利用这两个特效可以做很多事,比如在网站上做一个浮动的客服按钮、浮动的栏目链接、浮动的最新信息等,一切就靠你自己去想、去挖掘……
一、右侧浮动代码:
<div id="divStayTopright" style="position:absolute; z-index:999">
</div>
<SCRIPT type=text/javascript>
var verticalpos="frombottom"
function JSFX_FloatTopDiv()
{
var startX =0,
startY = 459;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.divs[id];
if(d.divs)el.style=el;
el.sP=function(x,y){this.style.right=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.documentElement.scrollTop +
document.documentElement.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopright=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.documentElement.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.documentElement.scrollTop +
document.documentElement.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopright()", 10);
}
ftlObj = ml("divStayTopright");
stayTopright();
}
JSFX_FloatTopDiv();
</SCRIPT>
这个代码最后的效果是在右侧浮动,会随着你的页面的滚动而浮动,只要在DIV内插入你想要用来显示的内容就可以了。
二、鼠标放上去展开的浮动特效:
这个特效最后实现的效果是,除了上面的浮动效果之外,当你把鼠标放到这个浮动的模块之后,会扩展出一个新的窗口。如图:
左边的图片就是普通的浮动时的效果,右边的图片就是当鼠标放上去之后扩展出来的效果。
这个特效的代码下载地址:http://283303360.qupan.com/6478341.html。下载后里面有一个JS文件、一个图片文件夹和一个CSS文件。修改JS文件内你要用来显示的内容,然后在你要实现该效果的页面上调用该JS就可以了。
作 者:子鹏@许耀鹏
博客地址:http://www.yi7.org/
本文地址:http://www.yi7.org/post/136.html
版权所有 转载时必须以链接形式注明作者和原始出处及本声明