弹性运动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    #div1{width: 100px; height: 100px; background: red; position: absolute; top: 50px; left: 0px;}
    </style>
    <script type="text/javascript">
            var iSpeed=0;
            var timer=null;
            var left=0;
            function startMove(obj,iTarget){

clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    /*
                    if(oDiv.offsetLeft<300){
                        iSpeed+=(300-oDiv.offsetLeft)/50;
                    }else {
                        iSpeed-=(oDiv.offsetLeft-300)/50;
                    }*/
                    //因为if里边的判断可以化简,所有为
                    iSpeed+=(iTarget-obj.offsetLeft)/5;
                    iSpeed*=0.7; //乘以小数,让时间慢慢变小

left+=iSpeed; //引入一个外部变量将误差每次累计起来

if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ //当速度的绝对值小于1 并且 边距和目标的差小于1时 就停止
                        clearInterval(obj.timer);
                        obj.style.left=iTarget+‘px‘; //停止定时器 并手动移动到指定的位置
                    }else{
                        obj.style.left=left+‘px‘;                        
                    }
                    
                
                },30);
            };

</script>
</head>
<body>
    <input type="button" value="开始运动" onclick="startMove(document.getElementById(‘div1‘),‘300‘)" />
    <div id="div1"></div>
    <div style="position: absolute; width: 1px; height: 300px; left: 300px; top:0; background: black;"></div>
</body>
</html>

时间: 2024-10-16 14:26:08

弹性运动的相关文章

新买了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

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

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

主要是速度以及临界条件的处理弹性运动的函数 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.

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

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

canvas链式弹性运动

上一课我学习了相对于鼠标为目标点的弹性运动,这次就学习了如何以上一个球为目标点的弹性运动,这次的函数比较复杂,首先分成了如下几个函数,首先定义了一个球的model,之后添加了4个球,在加载中调用了动画事件,之后在动画事件里面加载了画线的事件,画完线之后才开始画球,而且专门用了一个函数来计算,也就是完全分开了层次,以免自己的逻辑思维混乱,这是一种编程的良好思维,分区处理内容,这样有效避免了代码重用,也增加了代码可读性. 还是像以前一样,代码如下: var canvas = document.get

[ActionScript 3.0] AS3 弹性运动

1 package com.views 2 { 3 import flash.display.Sprite; 4 import flash.events.Event; 5 import flash.geom.Point; 6 7 /** 8 * @author Frost.Yen 9 * @E-mail [email protected] 10 * @create 2015-8-20 上午11:16:11 11 * 12 */ 13 [SWF(width="800",height=&q

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

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

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

弹性运动+摩擦力

  <!DOCTYPE html>   <html>   <head lang="en">   <meta charset="UTF-8">   <style type="text/css">   #box{width:100px;height:100px;background:red;position: absolute;left:0;}   span{height:900px;bor

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> &l