您当前位置:
  1. 首页
  2. 网页技巧
  3. 今天分享两个网页漂浮框的特效

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

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

一、右侧浮动代码:

<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就可以了。

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

    • 不错,终于找到江西的了,哈哈
      许耀鹏 于 2010-10-4 12:55:04 回复
      别把我当组织哈。。。

      回复

    • 老三不给我链接,只好自己发了
      zipeng 于 2010-6-24 23:23:34 回复
      = =#
      你这算是威胁我吗?!
      PS:你什么时候有说过还和我做链接?

      回复

    • PTFE
    • 1#. PTFE

      发表于 2010-6-23 19:23:42

    • 有时候会用到,谢谢了。
      zipeng 于 2010-6-23 19:54:11 回复
      好神勇的沙发。

      回复

发表评论

validcode