电影图片运动?谷歌运动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>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验