zoukankan      html  css  js  c++  java
  • 摆动运动

    2013-06-12

    Javascript 摆动运动

    有时候匀速运动,缓冲运动已经无法满足现在挑剔的客户群了,今天,小郭写了一个摆动运动,大家相互学习下。

    code:

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>导航条摆动运动</title>

    <style type="text/css">

    *{margin:0px;padding:0px;}

    ul,li{list-style-type:none;}

    .wrapper{800px;margin:10px auto;}

    ul{position:relative;600px;height:32px;overflow:hidden;_zoom:1;}

    ul li{position:relative;float:left;100px;height:30px;border:1px solid #ccc;line-height:30px;text-align:center;cursor:pointer;}

    ul li.bg{position:absolute;bottom:0;left:0px;100px;height:2px;overflow:hidden;background:red;}

    #moveUL1{margin:100px;}

    </style>

    </head>

    <body>

    <div class="wrapper">

        <ul id="moveUL">

            <li>导航条1</li>

            <li>导航条2</li>

            <li>导航条3</li>

            <li class="bg"></li>

        </ul>

        <ul id="moveUL1">

            <li>导航条1</li>

            <li>导航条2</li>

            <li>导航条3</li>

            <li class="bg"></li>

        </ul>

    </div>

    <script type="text/javascript">

    window.onload = function(){

        var friction = new Friction({

            id:"moveUL",                // 设置对象的id

            type:"frictionMove",              // 设置对象的运动类型。这里只设置了一个,以后会有缓冲运动,匀速运动等

            modulus:0.7                // 设置摩擦系数,默认是0.7

        })

        var friction2 = new Friction({

            id:"moveUL1",

            type:"frictionMove",

            modulus:0.7

        })

    }

    function Friction(vArg){

        this.id = getId(vArg.id);              // 设置对象属性

        this.dom = getDom("li",this.id);

        this.type = vArg.type;

        this.moveObj = this.dom[this.dom.length-1];

        this.iSpeed = 0;

        this.left = 0;

        this.modulus = vArg.modulus || 0.7;

        var _this = this;

        for(var i=0;i<this.dom.length-1;i++){

            this.dom[i].index = i;

            this.dom[i].onmouseover = function(){

                _this.frictionMove(_this.moveObj,this.offsetLeft);

            }

        }

    }

    Friction.prototype.frictionMove = function(obj,iTarget){    // 运动方法

        var _this = this;

        clearInterval(obj.timer);

        obj.timer = setInterval(function(){

            _this.iSpeed +=(iTarget-obj.offsetLeft)/5;

            _this.iSpeed *= _this.modulus;

            _this.left +=_this.iSpeed;

            if(Math.abs(_this.iSpeed)<1 && Math.abs(_this.left-iTarget)<1){

                clearInterval(obj.timer);

                obj.style.left = iTarget+"px";    

            }else{

                obj.style.left = _this.left+"px";

            }

        },30);

    }

    function getId(id){

        return document.getElementById(id);

    }

    function getDom(dom,obj){

        var obj = obj || document;

        return obj.getElementsByTagName(dom);

    }

    </script>

    </body>

    </html>

  • 相关阅读:
    ubuntu 安装 systemback
    嵌入式gdb远程调试
    pecl 安装 phpredis
    Linux服务器内存池技术是如何实现的
    统一登录的几种常用设计模式
    数据库并发控制
    抽取一部分服务端做BFF(Backend For Frontend服务于前端的后端)
    干货 | 质量保障新手段,携程回归测试平台实践 原创 Sedro 携程技术 2021-01-21
    服务端绘图
    中间件技术在百度云原生测试中的应用实践 原创 路由器 百度智能化测试 今天
  • 原文地址:https://www.cnblogs.com/xiuciedward/p/js.html
Copyright © 2011-2022 走看看