许耀鹏

一个从seo开始将往电子商务发展的草根。

« 豪华海景房投资-新加坡豪华海景房投资防止文章转载不留版权的小技巧 »

今天分享两个网页漂浮框的特效

利用这两个特效可以做很多事,比如在网站上做一个浮动的客服按钮、浮动的栏目链接、浮动的最新信息等,一切就靠你自己去想、去挖掘……

一、右侧浮动代码:

<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
版权所有 转载时必须以链接形式注明作者和原始出处及本声明
联系我

  • 相关文章:

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By 江西seo 南昌seo Designed by

Copyright © 2009 Yi7.org. All Rights Reserved 京ICP备09097875号