关闭

图片在body中来回滚动

标签: javascript滚动
174人阅读 评论(0) 收藏 举报
分类:

效果如图:

JS代码

var oScroll=document.getElementById('scroll');
	var right=0;
      setInterval(function(){
      	if(right==0){

			oScroll.style.left=oScroll.offsetLeft+2+'px';
			if(oScroll.offsetLeft>=document.body.clientWidth-202){
				right=2;
			}
		}
      	if(right==2){
      		oScroll.style.left=oScroll.offsetLeft-2+'px';
      		if(oScroll.offsetLeft<=0){
      			right=0;
      		}
      	}
      },30);
HTML代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>闭包</title>
		<style>
		body{
			margin:0;
			padding: 0;
		}
			
			#scroll{
				width:200px;
				height:100px;
				position: absolute;
			}
			#scroll img{
				width:100%;
				height:100%;
			}
		</style>

	</head>
	<body>
		
		<div id="scroll">
			<img src="img/index2.png" />
		</div>
	</body>
</html>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:5916次
    • 积分:143
    • 等级:
    • 排名:千里之外
    • 原创:8篇
    • 转载:3篇
    • 译文:0篇
    • 评论:0条