Scrollleft图片滑动

前言

最近看到别人做的图片滑动，就自己动手用自己的方法试着做了一下。

图片滑动的关键点可以归结为3个要素：

  1. *增量函数
  2. *滑动持续时间
  3. *停顿时间

1.增量函数，2滑动持续时间

自己试着写了一个增量函数，是用ΔX来控制ScrollLeft的增量例如：

                  ScrollLeft+=ΔX;

可能是函数没找好，应该是可行的，等以后有时间再研究。现在用的是一个javascript高手（==！)写的函数：

    　　　　 ScrollLeft=function（）{......}；

当然图片的滑动可以有各种样式，现在使用的是“渐缓速”函数：

滑动持续时间已被写为这个函数的一个参数：

1 var tween = function (t, b, c, d) {
2         return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
3        
4     }

3.停顿时间

采用Javascript的函数setTimeout,setInterval.

setTimeout用以保证增量函数的间隔运行。setInterval保证增量函数的持续运行。

css部分

View Code 
 1    <style type="text/css">
 2         /*设置容器大小
 3         -------------------------------------------------------*/
 4         #outer
 5         {
 6             overflow: hidden;
 7             width: 300px;
 8             border: 1px red solid;
 9             height: 148px;
10             padding-top: 0px;
11             position: absolute;
12             left: 30%;
13             top: 30%;
14         }
15         /*设置移动部分的大小，width一定要设置的比外部容器大
16        -------------------------------------------------------- */
17         #part1
18         {
19             height: 148px;
20             width: 900px;
21             overflow: hidden;
22         }
23         /*设置"图片"，使它们在一行
24        -------------------------------------------------------- */
25         .samediv
26         {
27             float: left;
28             height: 148px;
29             width: 300px;
30             text-align: center;
31         }
32         #div1
33         {
34             background-color: #FFC0CB;
35         }
36         #div2
37         {
38             background-color: #FFCC00;
39         }
40         #div3
41         {
42             background-color: #009966;
43         }
44         /*按钮所在div的位置
45         -------------------------------------------------------------*/
46         #tooldiv
47         {
48             position: absolute;
49             left: 30%;
50             top: 75%;
51         }
52     </style>

Html部分

View Code 
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title>Untitled Page</title>
 5 </head>
 6 <body>
 7     <div id="outer">
 8         <div id="part1">
 9             <div class="samediv" id="div1">
10                 <span>first</span>
11             </div>
12             <div class="samediv" id="div2">
13                 <span>second</span>
14             </div>
15             <div class="samediv" id="div3">
16                 <span>third</span>
17             </div>
18         </div>
19     </div>
20     <div id="tooldiv">
21         <input type="button" value="run" onclick="Move()" /></div>
22 </body>
23 </html>

Javascript部分

View Code 
 1 <script type="text/javascript" language="javascript">
 2     /*关键点
 3     *停顿时间
 4     *滑动持续时间
 5     *增量函数
 6     */
 7     var $ = function (id) {
 8         return "string" == typeof id ? document.getElementById(id) : id;
 9     };
10     /*增量函数
11     -----------------------------------------------------------------------------------------------------------------*/
12     var tween = function (t, b, c, d) {
13         return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;     
14     }
15     /*正常滑行
16     -------------------------------------------------------------------------------------------------------------------*/
17     var iDuration = 5; //iDuration持续时间
18     var t = 0, c = 300, d = iDuration, c1 = 0; //c单个流程矩形块最大运动距离
19     var oOuter = $("outer");
20     var run, Move;
21     function _run() {
22         if (t < d) {
23             t++;
24             oOuter.scrollLeft = Math.ceil(tween(t, 0, c, d)) + c1; //c1，scrollLeft增量基数，第一次为0，第二次为300
25         }
26         /*判断是否到达下一张图片
27         ---------------------------------------------------*/
28         if (oOuter.scrollLeft % 300 == 0) {
29             t = 0; //时间指针清零
30             /*判断是否到达最后一张图片
31             ---------------------------------------------------*/
32             if (oOuter.scrollLeft % 600 != 0) {
33                 c1 += 300;
34             }
35             /*如果到达最后一张图片，则增量清零
36             ---------------------------------------------------*/
37             if (oOuter.scrollLeft == 600) {
38                 c1 = 0;
39             }
40             /*终止计时器
41             ---------------------------------------------------*/
42             clearInterval(run);
43             /*进行下一次滑动
44             ---------------------------------------------------*/
45             Move();
46         }
47     }
48     /*回调滑行
49     -------------------------------------------------------------------------------------------------------------------*/
50     var iDurationb = 10;
51     var tb = 0, db = iDurationb;
52     var _runBack;
53     function _runBack() {
54         if (tb < db) {
55             tb++;
56             oOuter.scrollLeft = 600 - Math.ceil(tween(tb, 0, 600, db));
57         }
58         if (oOuter.scrollLeft == 0) {
59             clearInterval(_runBack);
60         }
61     }
62     /*主函数，如果scrollLeft==600则嵌套运行一个setTimeot,为的是在最后一张照片停顿后，回到第一张照片后有停顿时间
63     -------------------------------------------------------------------------------------------------------------------*/
64     Move = function () {
65         oOuter.scrollLeft == 600 ?
66         setTimeout(function () {
67             setInterval(_runBack, 100); //回调滑行
68             tb = 0;
69             setTimeout(function ()
70             { run = setInterval(_run, 100); }, 2000);
71         }, 2000) : setTimeout(function () {
72             run = setInterval(_run, 100)
73         }, 2000);
74     };
75 </script>

posted @ 2011-08-29 15:31  softbeer  阅读(336)  评论(0)    收藏  举报