您的位置：首页 > Web前端 > JavaScript

javascript:左右两侧广告的滑动特效

2012-06-20 10:22 369 查看

<html>
<head>
<title>1</title>
<style type='text/css'>
#guanggao{
border:solid 1px green;
width:120px;
height:280px;
position:absolute;
left:10px;
top:200px;
background-color:orange;
}
#guanggao2{
border:solid 1px green;
width:120px;
height:280px;
position:absolute;
right:10px;
top:200px;
background-color:orange;
}
</style>
</head>
<body>
<div id='guanggao'></div>
<div id='guanggao2'></div>
<script language='javascript'>
for(var i=0;i<200;i++){
document.write('<br/>');
}

var out;
var s;
var obj1=document.getElementById('guanggao');
var obj2=document.getElementById('guanggao2');
var top=200;
var x;
window.onscroll=function(){
window.setTimeout(function(){
out=window.setInterval("move();",30);

},1000);
s=document.body.scrollTop;
x=((top+s)-obj1.offsetTop)/15;
}
function move(){
if(x<0){
if(obj1.offsetTop+x<top+s)
obj1.style.top=(top+s)+'px';
else
obj1.style.top=(obj1.offsetTop+x)+'px';
}else{
if(obj1.offsetTop+x>top+s)
obj1.style.top=(top+s)+'px';
else
obj1.style.top=(obj1.offsetTop+x)+'px';
}
obj2.style.top=obj1.style.top;
//var temp=Number(obj1.style.top.substr(0,obj1.style.top.length-2));
if(obj1.style.top==(top+s)+'px')
clearTimeout(out);
//6-40.html
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航