图片移动
Posted zerobased
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片移动相关的知识，希望对你有一定的参考价值。
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
.divv{
position: relative;
width: 400px;
height: 220px;
margin: 100px auto;
overflow: hidden;
cursor: pointer;
}
.divv2{
position: absolute;
width: 1330px;
height: 220px;
padding: 0;
}
.divv img{
position: relative;
}
</style>
<body>
<div id="div1" class="divv">
<div id="div2" class="divv2">
<img src="img/u=3381437764,4222561202&fm=21&gp=0.jpg" /><img src="img/u=3381437764,4222561202&fm=21&gp=0.jpg" />
</div>
</div>
</body>
</html>
<script>
num=10;
timr=null;
sum=30;
sum1=3
function $(id){
return document.getElementById(id);
}
$("div1").onmouseover=function(){
clearInterval(timr);
}
$("div1").onmouseout=function(){
timr=setInterval(function(){
num-=sum1;
if(num>=-930&&num<60){
$("div2").style.left=num+"px";
}else if(num<-930){
sum1=-50;
num=num+10;
return 0;
// $("div2").style.left=num+"px";
}else{
sum1=3
num=0;
return 0;
}
},sum)
}
以上是关于图片移动的主要内容，如果未能解决你的问题，请参考以下文章