javascript让图片来回移动

本示例中用了四张图片,分别是四个方向,用它们来实现图片向前滚动的效果。
图片滚动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片移动</title>
</head>
<body>	
	<img id ="ren" border ="0" style="position:absolute;left:10px;top:150px;width=180px" src="favicon1.png">

	<script>
		//获取图片名称
		function basename(url){
			var loc = url.lastIndexOf("/") + 1;
			return url.substr(loc);
			
		}
		
		//创建图片对象
		var ren = document.getElementById("ren");

		function changetu(){
			var ind = basename(ren.src).charAt(7);
			if( ind == "1"){
				ren.src="favicon" + "2" + ".png" ;
			}else if(ind == "2"){
				ren.src="favicon" + "3" + ".png" ;
			}else if(ind =="3"){
				ren.src="favicon" + "4" + ".png" ;
			}else{
				ren.src="favicon" + "1" + ".png" ;
			}
		}

		

		var x=0; x向前进距离
		var xs=20; //x向前进加速度

		function run(){
			var winWidth=0;
			if (window.innerWidth){
				winWidth = window.innerWidth;
			}else if ((document.body) && (document.body.clientWidth)){
				winWidth = document.body.clientWidth;
			}
			
			x +=xs;
			if( x>= winWidth - parseInt(ren.width) -13 || x<=0){ //用parseInt可以让获取的值不含有"px";-13是用来修正

				xs = (-1)*xs;
			}
			ren.style.left = x +"px";
		}

		setInterval(function(){
			changetu();
			run();
		},500)


	</script>
</body>
</html>

看看代码实现起来其实很简单。需要稍微提一下的是:

if( x>= winWidth - parseInt(ren.width) -13 || x<=0){ //用parseInt可以让获取的值不含有"px";-13是用来修正

				xs = (-1)*xs;
			}

利用 xs= (-1)*xs 实现图片走到最右边后转向回走的功能

发表评论

电子邮件地址不会被公开。 必填项已用*标注