js 弹性运动

<!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>
    <title>弹性运动</title>
    <style>
        #div1
        {
            width:100px;
            height:100px;
            background:red;
            position:absolute;
        }
    </style>

    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById("btn");

            var oDiv = document.getElementById("div1");

            oBtn.onclick = function(){
               move2(oDiv,300);
            }

        }

        var timer = null;
        var speed = 0;

        function move(){

            clearInterval(timer);
            timer = setInterval(function(){
                var oDiv = document.getElementById("div1");

                speed+=(300-oDiv.offsetLeft)/5;

                speed*= 0.7;

                oDiv.style.left = oDiv.offsetLeft + speed +‘px‘;

            },30);
        }

        var iSpeed = 0;
        function move2(obj,target)
        {
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){

                iSpeed +=(target-obj.offsetLeft)/5;
                iSpeed *=0.7;

                if(Math.abs(iSpeed)<1 && Math.abs(target-obj.offsetLeft)<1)
                {
                    clearInterval(obj.timer);
                }
                else
                {
                    obj.style.left = obj.offsetLeft + iSpeed +‘px‘;
                }
            },30);
        }
    </script>
</head>
<body>
   <input type="button" id="btn" value="运动" />
   <div id="div1">
    </div>

    <div style="width:1px;height:300px;background:black;top:0px;left:300px;position:absolute;"></div>

</body>
</html>
时间: 2024-10-06 13:12:20

js 弹性运动的相关文章

js弹性运动滑动的菜单

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹性运动效果下滑的菜单</title> <script>  window.onload = function(){   var oUl = document.getElementById('oul');   var oLi = oul.getElem

js弹性运动---弹性菜单

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>弹性运动---弹性菜单</title> <style> * { padding: 0; margin: 0; } li { list-style: none; } ul {

css3使用transform属性制作js弹性运动

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>用css3仿制js的弹力效果</title> </head> <body> <style type="text/css"> *{margin:0;padding:0px;} body{backgr

JS运动基础(三) 弹性运动

加减速运动速度不断增加或减少速度减小到负值,会向反方向运动弹性运动在目标点左边,加速:在目标点右边,减速根据距离,计算加速度带摩擦力的弹性运动弹性运动+摩擦力 弹性:速度 += (目标点 - 当前值)/系数;  //6 , 7 , 8速度 *= 摩擦系数;   // 0.7 0.75终止条件距离足够近 并且 速度足够小 缓冲:var 速度 = (目标点 - 当前值)/系数;速度取整 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <me

JS学习之路,之弹性运动框架

弹性运动:顾名思义,就如同物理中的加速减速运动,当开始时速度过大,到达终点时,速度不会立刻停下,而是再前进一段距离,而后再向相反方向运动,如此往复. var timer=null; var speed=0; //速度必须放在外面,放在里面的话,每次速度都是从0开始而不是保持上次执行的结果 function move(){ timer=setInterval(function(){ /*if (oDiv.offsetLeft<300) { speed+=(300-oDiv.offsetLeft)/

js缓冲运动代码实例

js缓冲运动代码实例:元素的缓冲运动效果要比匀速运动更为美观一些,因为显得更为有张力和弹性,当然对于浏览者来说可能会有更好的效果,那么留住用户的可能性也就更大,下面就通过代码实例简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www

利用弹性运动的原理做弹性菜单

主要是速度以及临界条件的处理弹性运动的函数 function startMove(obj,target) { clearInterval(obj.timer); var speed=0; obj.timer = setInterval(function() { speed += (target - obj.offsetLeft) / 6; //类似于摩擦系数 speed *= 0.75; if(Math.abs(speed) < 1 && Math.abs(target - obj.

jQuery插件之-----弹性运动

<!doctype html><html><head><meta charset="utf-8"><title>弹性运动</title> <script type="text/javascript" src="images/jquery-1.11.1.min.js"></script> <script> // JavaScript Docu

新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了

新买了ipad,在ipad上面看见的一个效果,pc上应该也见过,但是还是ipad上面有印象,如果是弹性运动就最好了<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>无标题文档</title> <style type="text/css"> .in{ width:200px; height:24px; backg