js实现的图片滚动


scorll.js

$(function(){

//alert("inside croll");
//Initial var
var speed = 0,
$back = $('#back'),
$middle = $('#middle'),
$front = $('#front'),
xPos = 0,
$win = $(window);
//Respond mousemove events
$(document).mousemove(function(e){
var halfWidth = $win.width()/2;
//alert("halfwigth" + halfWidth);
speed = e.pageX - halfWidth;
//alert("e.pageX" + e.pageX);
//alert("speed" + speed);
speed /= halfWidth;
//alert("to speed" + speed);
});
//Kill speed on mouseout
$(document).mouseout(function(e){
speed = 0;
});
//Every 30ms update each layer's background image position
setInterval(function(){
xPos += speed;
//console.log("speed" + speed);
$back.css({
//backgroundPositon: xPos + 'px 0px'
"background-position":xPos + 'px 0px'
});
//console.log("xPos" + xPos);
//console.log("background-position" + $back.css("background-position"));


$middle.css({
//backgroundPositon: xPos + 'px 0px'
"background-position":(xPos * 2) + 'px 0px'
});
$front.css({
//backgroundPositon: xPos + 'px 0px'
"background-position":(xPos * 3) + 'px 0px'
});
},30);
});

index.html

<!DOCTYPE html>
<html>
<head>
	<!--<script type="text/javascript" src="hello.js"></script>-->
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
	<script type="text/javascript" src="js/croll.js"></script>
	<title></title>
	<style type="text/css">
	body{
		padding:0px;
		margin:0px;
	}

	.layer{
		position: absolute;
		width: 100%;
		height: 256px;
	}

	#back{
		background: #3BB9FF url('imges/background.jpg') no-repeat;
	}

	#middle{
		background: transparent url('imges/back4.jpg') no-repeat;
	}

	#front{
		background: transparent url('imges/back5.jpg') no-repeat;
	}
	</style>
</head>
<body>
<!--<input type="text" id="text" />-->
<div id="back" class="layer"></div>
<div id="middle" class="layer"></div>
<div id="front" class="layer"></div>
</body>
</html>

你可能感兴趣的:(html,js)