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

发布时间：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();

}