图片在body中来回滚动

效果如图:

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>

阅读更多
文章标签: javascript 滚动
个人分类: JavaScript 自学
想对作者说点什么? 我来说一句

左右图片自动滚动代码

2015年05月04日 930KB 下载

MFC加载中来回滚动进度条

2015年12月06日 16KB 下载

图片循环滚动

2012年06月27日 1KB 下载

没有更多推荐了,返回首页

不良信息举报

图片在body中来回滚动

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭