电影图片运动?谷歌运动logo?
本文案例请点击这里!http://www.lovewebgames.com/film/
window.onload=function(){
var filmImg = document.getElementById("filmImg");
var width = filmImg.width;
var height = filmImg.height;
var style=filmImg.style;
var x =0 ;
var y =0 ;
var nx=6;
var ny=4;
var speed=50;
var ix=width/nx;
var iy=height/ny;
var t =setInterval(run,speed);
var add=function (n){
return n-=25
}
function run(){
x+=ix;
if(x>=width){
x=0;
y+=iy
if(y>=height){
x=0;y=0;
}
}
style.left =- x+"px";
style.top =- y+"px";
}
}
var filmImg = document.getElementById("filmImg");
var width = filmImg.width;
var height = filmImg.height;
var style=filmImg.style;
var x =0 ;
var y =0 ;
var nx=6;
var ny=4;
var speed=50;
var ix=width/nx;
var iy=height/ny;
var t =setInterval(run,speed);
var add=function (n){
return n-=25
}
function run(){
x+=ix;
if(x>=width){
x=0;
y+=iy
if(y>=height){
x=0;y=0;
}
}
style.left =- x+"px";
style.top =- y+"px";
}
}
恩,就是这样了。随手写了几行代码,其实没你想象中的那么复杂。
css:
<style>
.film{width:700px;height:700px;border:10px solid #ccc;margin:0 auto;overflow:hidden;}
.film img{position:relative;}
</style>
.film{width:700px;height:700px;border:10px solid #ccc;margin:0 auto;overflow:hidden;}
.film img{position:relative;}
</style>
html:
<div class="film">
<img alt="" src="http://images.cnblogs.com/cnblogs_com/tianxiangbing/eagle.jpg" border="0" height="3030" width="5000" />
</div>
<img alt="" src="http://images.cnblogs.com/cnblogs_com/tianxiangbing/eagle.jpg" border="0" height="3030" width="5000" />
</div>