javascript无缝滚动示例-动画-2011-4-3

日期:2011-04-03 21:40:54 点击:61

此文件包括了javascrpt动画的点击滚动,单向滚动,循环滚动,不同的封装方法:自创建属性法、闭包法,还就事件的两种不同的绑定方式。原文件中有完整的注释说明。并且附件中的示例可运行。

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    #outer{ width:400px; height:400px;  margin:0 auto; position:relative; clear:both; overflow:hidden;}
    #inner{width:2000px; height:400px; overflow:hidden; position:absolute; top:0px; left:0px;}
    #inner div{ float:left; width:400px; height:400px; background:url(images/01.gif);}
    ul{width:600px; margin:0 auto;}
    ul li{width:100px; height:100px; background:green; float:left; margin-right:20px;}
</style>
<script type="text/javascript">
    var animate = null;
    function move(nTarget) {
        window.clearTimeout(animate);
        var oDiv = document.getElementById('inner');
        var nDivLeft = oDiv.offsetLeft;
        if (nDivLeft > nTarget) {//向左走
            if (nDivLeft <= nTarget) {
    //空
            }
            else {
    /*处理过界的问题
    if(nDivLeft - 19 <nTarget){
     oDiv.style.left = nTarget + "px";
    }else
                oDiv.style.left = nDivLeft - 19 + "px";
    */
    var nSpeed=Math.floor((nTarget-nDivLeft)/10);//减速算法
    //如果向左运动则用Math.floor
    oDiv.style.left = nDivLeft +nSpeed + "px";
    
    //以下是setTimeout的几种写法
                animate = window.setTimeout(function () { move(nTarget); }, 10);
    //animate = window.setTimeout("move(" + nTarget + ")", 10);
                //window.setTimeout("move(nTarget)", 10);
                //window.setTimeout(move,10);
            }
        } else {//向右走
            if (nDivLeft >= nTarget) {
            }
            else {
    /*处理过界的问
    if(nDivLeft + 19>nTarget)
     oDiv.style.left = nTarget + "px";
    else
                 oDiv.style.left = nDivLeft + 19 + "px";
     */
     var nSpeed=Math.ceil((nTarget-nDivLeft)/10);//减速算法
     //如果向右运动则用Math.ceil
    oDiv.style.left = nDivLeft +nSpeed + "px";
                animate=window.setTimeout("move(" + nTarget + ")", 10);
            }

        }
    }


    function bind() {//用JS代码为四个li的onclick绑定方法
        var oLis = document.getElementById('myul').getElementsByTagName('li');
        /* 麻烦的方式
        oLis.item(0).onclick = function () { move(0) }
        oLis.item(1).onclick = function () { move(-400) }
        oLis.item(2).onclick = function () { move(-800) }
        oLis.item(3).onclick = function () { move(-1200) }
        */
        /* 错误的方式
        for (var i = 0; i < oLis.length; i++) {
                  oLis.item(i).onclick = function () { move(i * -400) }
        }//当click被触发的时候,i的值已经是4了
        */

        /* 用闭包来解决
        for (var i = 0; i < oLis.length; i++) {
        (function fn(m) {
            oLis.item(m).onclick = function () { move(m * -400) }
        })(i);

    }
     */
    /* 给HTML自创建一个属性的方式 */
    for (var i = 0; i < oLis.length; i++) {
        oLis.item(i).nIndex = i;
        oLis.item(i).onclick = function () {
          clearTimeout(autoAnimte);//点击li时取消自动滚动
         move(this.nIndex * -400) }

    }

}

var num = 0;
var autoAnimte = null;
function autoMove() {//自动滚动的方法
    clearTimeout(autoAnimte);
    if (num == 4) {//如果走到头了则往回走
        num = 0;
    }
    move(num * -400);
    num++; //num=num+1;
    autoAnimte=setTimeout(autoMove,2000);
}
function autoMove2() {
    clearTimeout(autoAnimte);
    if (num == 5) {//如果走到头了则往回走
        num = 0;
        document.getElementById('inner').style.left = 0;
    }
    move(num * -400);
    num++; //num=num+1;
    autoAnimte = setTimeout(autoMove2, 2000);

}

//window.onload = function () { bind(); autoMove2(); }

function bindEvent(fn) {

    if (typeof fn != 'function') {
        alert('参数类型不正确');
        return;
    }

    var oldFn = window.onload;
    if ((typeof oldFn) == 'function') {
        window.onload = function () { oldFn(); fn() }
    } else {
        window.onload = fn;
    }
}

//bindEvent(bind);
//bindEvent(autoMove2);
//bindEvent(222);

//document.getElementById('myul').getElementsByTagName('li').item(0).addEventListener('click',function () {          clearTimeout(autoAnimte);//点击li时取消自动滚动
        // move(this.nIndex * -400) },false);

if(window.addEventListener){
 window.addEventListener("load",bind,false);
 window.addEventListener('load',autoMove2,false);
}
if(window.attachEvent){
 window.attachEvent('onload',bind)//ie 
 //attachEvent
 window.attachEvent('onload',autoMove2);
}
 </script>
</head>

<body>
<ul id='myul'><li >1</li><li >2</li><li >3</li><li>4</li></ul>
<div id="outer">
    <div id="inner">
        <div>1</div>
        <div style=" background:url(images/02.gif);">2</div>
        <div style=" background:url(images/03.gif);">3</div>
        <div style=" background:url(images/04.gif);">4</div>
        <div>5555555555555555555 -1600</div>
    </div>
</div>

</body>
</html>
 

上一篇: 2011年4月3号课程示例:JS动画最基本原理示例

下一篇: CSS3 3D下拉式菜单