Blog

网页浮动窗口代码

说到网页浮动窗口,大家很容易就想到了一些低级网站里碍眼的对联广告和漂浮广告吧,那些广告一般不靠谱,明明鼠标点击关闭,却要弹出一个广告页面,确实讨厌。不过同样的技术,我们若换个目的和方式,就大受欢迎了。比如作为一个企业网站或购物商城的客服窗口,尤其是购物商城,添加一个浮动客服窗口就是很有必要的了。因为一般商城为了展示商品页面都会比较长,如果有这样一个相对视觉静止在网页中的客服窗口,对顾客来讲,方便之处可想而知。
所以说掌握这种浮动窗口代码的运用,还是很有必要的。网上也有很多这样的源代码下载,大家可以搜搜,今天我就在这分享一个简单易用的例子(也是最近完成项目中运用到的):
以下是放在body标签里的代码(只要在body里,位置可以随便放,不过因为有js,所以我一般选择放在,body内容的最下面)——
<script>
var w3c = (document.getElementById) ? true : false;
var agt = navigator.userAgent.toLowerCase();
var ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1) && (agt.indexOf("omniweb") == -1));
var mymovey = new Number();
function IeTrueBody(){
return (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
}
function GetScrollTop(){
return ie ? IeTrueBody().scrollTop : window.pageYOffset;
}
</script>
<div id="window">
<p><strong>ceshi@hotmail.com</strong>
<a href="#"><b>MSN</b>留言</a></p>
</div>
<script language="JavaScript1.1">
function heartBeat(){
diffY=GetScrollTop();
mymovey += Math.floor((diffY-document.getElementById('window').style.top.replace("px","")+160)*0.1);
document.getElementById('window').style.top = mymovey+"px";
}
window.setInterval("heartBeat()",1);
</script>
以下是Css内容:
#window {z-index:1; width:179px; right:0px; position:absolute; height:104px; background: url(contactBG.png) no-repeat;}
#window p {margin:50px 10px 0 14px; line-height:21px; color:#e14e05;}
#window p a {text-decoration:underline; color:#666;}
代码写出来有点多,但是其实很简单,就是两段js和一个ID命名为window的div,第二段js里的参数是可以根据自己需要来设置的。而这里的样式,大家只需参考#window就可以了,我这是针对附加图的完整样式。

Over 95% of our clients recommend our language services to others


Copyright © CCJK Technologies Co., Ltd. 2000-2017. All rights reserved.
TOP