QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com

电影图片运动?谷歌运动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";
    }
    
}

恩,就是这样了。随手写了几行代码,其实没你想象中的那么复杂。

css:

<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>

本文案例请点击这里http://www.lovewebgames.com/film/

posted @ 2012-04-10 11:21  田想兵  阅读(3770)  评论(20编辑  收藏  举报
联系QQ:55342775,QQ技术群:5678537,70210212,77813547 个人网站:http://www.lovewebgames.com 邮箱:55342775@qq.com