织梦网站开发_织梦兼职

当前位置: > 建站教程 > 二次开发 >

网站设计时到底需要添加顶部浮动框吗,我从用户体验角度帮您分析

发布时间:2017-10-28 作者:织梦兼职 浏览: 关键词:

在网站建设的过程中,我遇到过好多的客户,经常做的一件事就是让我改需求,改完需求又反悔了,还得让我改回去,他们觉得还是原来的设计更好。遇到这种事情,您会怎么办呢?如果您也遇到过这样的客户,欢迎您在评论区留言,一起说说您是怎么解决的。

客户的最初需求,添加顶部浮动框

网站做的比较精美,说实话,这是我做的最满意的整形美容手机网站之一。应客户需求,我先加上了顶部的浮动框,目的只有一个,可以增加对话量。

然后我们上代码,在网站的js目录下添加topwx.js文件

双击打开topwx.js文件,在上面逐行敲入代码,保存,当然我在这免费分享给您,您也可以直接复制就可以用了

function swt_top(){

var sHTML = [

'<style type="text/css">

'.topTips { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: fixed; left:0; top: 0; width: 100%; z-index: 3000;-webkit-perspective: 600px; perspective: 600px; }',

'.tipsInner {font-family: "Microsoft YaHei"; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); background: #fff;-webkit-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; }',

'.tipsInner a { text-decoration:none;display: block; position: relative; padding-left: 50px; color: #111; }',

'.tipsInner img { position: absolute; left: 8px; top: 50%; margin-top: -17px; width: 36px; height: auto; padding-right: 5px; background: #fff; }',

'.tipsInner dl { margin:0; padding: 10px 5px; border-left: 1px solid #ccc; }',

'.tipsInner dt { font-weight: bold;line-height:2em; font-size:13px;}',

'.tipsInner dd { margin:0; line-height: 1.8em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px; }',

'.showTip { visibility:visible; }',

'.showTip .tipsInner { -webkit-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }',

'.hideTip { visibility:hidden; }',

'.hideTip .tipsInner { -webkit-transform-origin: 0px 100%; transform-origin: 0px 100%; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 0; }',

'</style>',

'<div class="topTips" id="toptips">',

' <div class="tipsInner">',

' <a href="javascript:void(0)" class="JS-SWT-LINK" >',

' <img src="'+imagepath+'wxicon.png" alt="">',

' <dl>',

' <dt onclick="KS.openChatWin();return false;">伊思美丽顾问</dt>',

' <dd onclick="KS.openChatWin();return false;">您好,请问有什么可以帮助到您…</dd>',

' </dl>',

' </a>',

' </div>',

'</div>'

].join('\r\n');

var o = document.createElement('div');

o.innerHTML = sHTML;

while (o.firstElementChild) {

document.body.appendChild(o.firstElementChild);

}

T = {

hasClass: function(d, a) {

var c = d.className.split(/\s+/);

for (var b = 0; b < c.length; b++) {

if (c[b] == a) {

return true

}

}

return false

},

addClass: function(b, a) {

if (!this.hasClass(b, a)) {

b.className += " " + a

}

},

removeClass: function(d, a) {

if (this.hasClass(d, a)) {

var c = d.className.split(/\s+/);

for (var b = 0; b < c.length; b++) {

if (c[b] == a) {

delete c[b]

}

}

d.className = c.join(" ")

}

}

};

function Toptips(options) {

this.init(options);

};

Toptips.prototype = {

constructor: Toptips,

init: function(options) {

this.item = options.item;

this.itemInner = options.item.children[0];

this.loop = typeof options.loop == "undefined" ? true : options.loop;

this.showTime = typeof options.showTime == "undefined" ? 5000 : options.showTime;

this.hideTime = typeof options.hideTime == "undefined" ? 15000 : options.hideTime;

this.showTimer = null;

this.hideTimer = null;

this.preTimer = null;

this.item.style.WebkitTransition = this.item.style.transition = this.itemInner.style.WebkitTransition = this.itemInner.style.transition = "0.5s";

var me = this;

var initTimer = setTimeout(function() {

me.showTip();

}, 1000);

},

showTip: function() {

var me = this;

T.addClass(me.item, "showTip");

T.removeClass(me.item, "hideTip");

clearTimeout(me.hideTimer);

me.showTimer = setTimeout(function() {

me.hideTip();

}, me.showTime);

},

hideTip: function() {

var me = this;

T.removeClass(me.item, "showTip");

T.addClass(me.item, "hideTip");

me.item.style.visibility = me.itemInner.style.visibility = "hidden";

if (me.loop) {

clearTimeout(me.showTimer);

me.preTimer = setTimeout(function() {

me.item.style.visibility = me.itemInner.style.visibility = "visible";

}, me.hideTime - 100);

me.hideTimer = setTimeout(function() {

me.showTip();

}, me.hideTime);

}

}

};

var toptip = document.getElementById("toptips");

new Toptips({

item: toptip,

loop: true

});

return false;

delete o;

}

swt_top();

保存之后,把这个js文件引用到页面模板中,如果您用的织梦cms,就会非常简单容易了。用不了10分钟,这个需求就搞定了。

网站页面十分整洁大方,给客户包装了数百个医疗美容项目,您体验一下,操作是不是十分方便呢?

客户要求在顶部浮动框上添加关闭按钮

客户体验了一天之后找到我,说那个顶部浮动框老显示很烦人,你得给我加个关闭按钮。起初我有点想不通,这个问题起初我是想抗拒的,您如果想要顶部浮动的效果就加上,不想要就去掉,为什么还要费二遍事呢?

后来我还是想办法解决了,客户很满意。

以下是我修改过的代码,我增加了一个关闭按钮图标的样式,添加了一个点击关闭按钮时触发的js函数。

function swt_top(){

var sHTML = [

'<style type="text/css">.closeBtn_swt {z-index: 9999; right: -5px; top: -5px; width: 44px; height: 44px;background: url(http://4g.yisiyl.com/images/closeBtn_swt.png) no-repeat;-moz-background-size: 100%;-webkit-background-size: 100%;background-size: 100%;cursor: pointer;}',

'.topTips { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: fixed; left:0; top: 0; width: 100%; z-index: 3000;-webkit-perspective: 600px; perspective: 600px; }',

'.tipsInner {font-family: "Microsoft YaHei"; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); background: #fff;-webkit-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: rotateX(90deg); transform: rotateX(90deg); opacity: 0; }',

'.tipsInner a { text-decoration:none;display: block; position: relative; padding-left: 50px; color: #111; }',

'.tipsInner img { position: absolute; left: 8px; top: 50%; margin-top: -17px; width: 36px; height: auto; padding-right: 5px; background: #fff; }',

'.tipsInner dl { margin:0; padding: 10px 5px; border-left: 1px solid #ccc; }',

'.tipsInner dt { font-weight: bold;line-height:2em; font-size:13px;}',

'.tipsInner dd { margin:0; line-height: 1.8em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:12px; }',

'.showTip { visibility:visible; }',

'.showTip .tipsInner { -webkit-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); opacity: 1; }',

'.hideTip { visibility:hidden; }',

'.hideTip .tipsInner { -webkit-transform-origin: 0px 100%; transform-origin: 0px 100%; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); opacity: 0; }',

'</style>',

'<div class="topTips" id="toptips">',

' <div class="tipsInner">',

' <a href="javascript:void(0)" class="JS-SWT-LINK" >',

' <img src="'+imagepath+'wxicon.png" alt="">',

' <dl>',

' <dt onclick="KS.openChatWin();return false;">伊思美丽顾问</dt>',

' <dd onclick="KS.openChatWin();return false;">您好,请问有什么可以帮助到您…</dd><span onclick="hideswt();return false;" class="closeBtn_swt absolute"></span>',

' </dl>',

' </a>',

' </div>',

'</div>'

].join('\r\n');

var o = document.createElement('div');

o.innerHTML = sHTML;

while (o.firstElementChild) {

document.body.appendChild(o.firstElementChild);

}

T = {

hasClass: function(d, a) {

var c = d.className.split(/\s+/);

for (var b = 0; b < c.length; b++) {

if (c[b] == a) {

return true

}

}

return false

},

addClass: function(b, a) {

if (!this.hasClass(b, a)) {

b.className += " " + a

}

},

removeClass: function(d, a) {

if (this.hasClass(d, a)) {

var c = d.className.split(/\s+/);

for (var b = 0; b < c.length; b++) {

if (c[b] == a) {

delete c[b]

}

}

d.className = c.join(" ")

}

}

};

function Toptips(options) {

this.init(options);

};

Toptips.prototype = {

constructor: Toptips,

init: function(options) {

this.item = options.item;

this.itemInner = options.item.children[0];

this.loop = typeof options.loop == "undefined" ? true : options.loop;

this.showTime = typeof options.showTime == "undefined" ? 5000 : options.showTime;

this.hideTime = typeof options.hideTime == "undefined" ? 15000 : options.hideTime;

this.showTimer = null;

this.hideTimer = null;

this.preTimer = null;

this.item.style.WebkitTransition = this.item.style.transition = this.itemInner.style.WebkitTransition = this.itemInner.style.transition = "0.5s";

var me = this;

var initTimer = setTimeout(function() {

me.showTip();

}, 1000);

},

showTip: function() {

var me = this;

T.addClass(me.item, "showTip");

T.removeClass(me.item, "hideTip");

clearTimeout(me.hideTimer);

me.showTimer = setTimeout(function() {

me.hideTip();

}, me.showTime);

},

hideTip: function() {

var me = this;

T.removeClass(me.item, "showTip");

T.addClass(me.item, "hideTip");

me.item.style.visibility = me.itemInner.style.visibility = "hidden";

if (me.loop) {

clearTimeout(me.showTimer);

me.preTimer = setTimeout(function() {

me.item.style.visibility = me.itemInner.style.visibility = "visible";

}, me.hideTime - 100);

me.hideTimer = setTimeout(function() {

me.showTip();

}, me.hideTime);

}

}

};

var toptip = document.getElementById("toptips");

new Toptips({

item: toptip,

loop: true

});

return false;

delete o;

}

swt_top();

function hideswt(){

$('#toptips').hide();

}

新加的代码我已经做了加粗,您拿来就可以直接用了。怎么样?效果是不是很好?再上传几张美图,有需要这款网站的给我私信吧

责任编辑:织梦兼职
共有人阅读,期待你的评论!评论
二次开发
二次开发
使用技巧
调试安装
运营推广