自己写了个跟随滚动条而滚动的层的函数,可以同时调用多个,将一下代码复制 另存为 以.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>
支付宝扫一扫
微信扫一扫
最新评论