左右滚动的电影画布
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style type="text/css">
.box{
width: 660px;
height: 500px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.box span{
width: 330px;
height: 500px;
position: absolute;
top: 0;
cursor: pointer;
}
.box #left{
left: 0;
}
.box #right{
left: 330px;
}
.box #pic{
position: absolute;
top: 0;
}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
window.onload = function(){
var step = 20;
var left = 0;
$('right').onmouseover = function(){
// alert($('pic').timer);
if($('pic').timer){
clearInterval($('pic').timer);
}
$('pic').timer = setInterval(function(){
if(left > -1520){
left -= step;
$('pic').style.left = left + 'px';
}
}, 50);
}
$('left').onmouseover = function(){
// alert($('pic').timer);
if($('pic').timer){
clearInterval($('pic').timer)
}
$('pic').timer = setInterval(function(){
if(left < 0){
left += step;
$('pic').style.left = left + 'px';
}
}, 50);
}
var box = document.getElementsByClassName('box')[0];
box.onmouseout = function(){
clearInterval($('pic').timer);
}
}
</script>
</head>
<body>
<div class="box">
<img src="imgs/mj.jpg" alt="" id="pic">
<span id="left"></span>
<span id="right"></span>
</div>
</body>
</html>
