自己写了个跟随滚动条而滚动的层的函数,可以同时调用多个,将一下代码复制 另存为 以.html后缀结尾的文件 访问即可测试
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>跟随滚动条滚动</title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> </head> <body onload="scro('dd','left','100','200'),scro('tt','right','100','200')"> <div style="height:1200px; background:#CCC; width:1600px;"> </div> <div class="dd" style="position:absolute;left:20px;top:100px; background:#09F;width:150px; height:250px; z-index:20;"> test<input type="button" value="x" onclick="clo('.dd',1)" /> </div> <div class="tt" style="position:absolute;right:20px;top:100px; background:#09F;width:150px; height:250px; z-index:20;"> test<input type="button" value="x" onclick="clo('.tt',2)" /> </div><input type="button" value="test" onclick="javascript:clo1=1;clo2=1;" /> <script language="javascript"> var clo1=1; var clo2=1; function scro(id,left,x,y){ $("."+id).hide(); var t,l; if (typeof window.pageYOffset != 'undefined') //针对Netscape 浏览器 { t = window.pageYOffset; l = window.pageXOffset; } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') { t = document.documentElement.scrollTop; l = document.documentElement.scrollLeft; } else if (typeof document.body != 'undefined') { t = document.body.scrollTop; l = document.body.scrollRight; } if(isNaN(x) || x=="0"){ x=0; }else{ x=parseInt(x); } if(isNaN(y) || y=="0"){ y=0; }else{ y=parseInt(y);} if(left=="right"){ l=l+(document.body.clientWidth)-$(".dd").width()-x; } else if(left=="left"){ l=l+20+x;} else{ alert("left值参数传递,只能为left或者是right!"); } t=t+y; $("."+id).animate( {top: t+"px" }, { queue: false, duration: 500 } ) .animate( {left: l+"px" }, { queue: false, duration: 500 } ) .animate( {opacity: "show" }, 500 ); //$("."+id).html(t+":"+l); //$("."+id).fadeIn(500); } $(window).scroll(function(){ if(clo1==1){ scro("dd","left","100","200"); } if(clo2==1){ scro("tt","right","100","200"); } }); function clo(a,b){ $(a).hide(); if(b==1){ clo1=0; }else if(b==2){ clo2=0; } } </script> </body> </html>
最新评论