制作简单的动画

1、使用jQuery（annimate）制作

 a、首先要做简单的页面布局（两个div加上10幅图）

<div id="img2">
    <input type ="button"  value="上一页" id="a"   ></input>
    <input type ="button"  value="下一页"  id="b"  ></input>
    <div id="img1" class="imgJ">
        <img src="image/1.jpg" class="ig1"/>
        ..................
        <img src="image/10.jpg" class="ig10"/>
    </div>
</div>

b、然后要用javascript做翻页功能，我们要做一些引用

<script language="javascript" type="text/javascript" src="jQuery/function.js"></script>
<script language="javascript" type="text/javascript" src="jQuery/jquery-latest.js"></script>//必须引用的jQuery
<link rel="stylesheet" href="css/img.css" type="text/css">//简单的页面布局

c、自己编写页面调用规则

//function.js
$("#b").click(function(){
    if(xs<0){
        $(".imgJ").animate({"left": "+=1024px"},"5000");//每次向左移动1024像素，移动时间5000ms
    }
});

运行效果图：（其中图片之间的移动为平滑移动，两个图片在变换之间是首尾相连慢慢变化的的）

 

2、使用html5的元素transform、transition来布局

 必须引用一个jQuery

<script language="javascript" type="text/javascript" src="jQuery/jquery-1.7.min.js"></script>
前面的页面布局和1的布局基本一样，就是在按钮的后面要加click事件
<input type ="button"  value="上一页" id="a"    οnclick="jump(a)">
<input type ="button"  value="下一页"  id="b"   οnclick="jump(b)">

function.js里面的函数编写（部分）：

$("#img1").css(
    {
        '-webkit-transform': "translate3d("+xs+"px, 0px,0)",
        //控制div需要移动到的像素点，其中xs为变量可以设为自己需要的数字
        '-webkit-transition': 'all .5s ease 0s'
    }
);

详细代码见：https://github.com/marujun/imageJump