层的缓冲运动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.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">
			#divMove {
				width: 100px;
				height: 100px;
				position: absolute;
				top: 200px;
				left:0px;
				background: red;
			}
        </style>
    </head>
    <script type="text/javascript">
        window.onload = function() {
            //获取对象
            var oDivMove = document.getElementById("divMove");
            var oBtnMove = document.getElementById("btnMove");
            oBtnMove.onclick = function() {
                oDivMove.offsetLeft==0?startMove(oDivMove, 600):startMove(oDivMove, 0);//如果left是0就往右走,否则就往左走

            };
        };

        var oTimer = null;
        //定时器

        function startMove(obj, iTarget) {
            clearInterval(oTimer);
            //关闭定时器

            oTimer = setInterval(function() {
                var iSpeed = (iTarget - obj.offsetLeft) / 10;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//速度取整数,防止前后波动
                if (obj.offsetLeft == iTarget) {//判断是否到达终点
                    clearInterval(oTimer);
                    //关闭定时器
                } else {
                    obj.style.left = obj.offsetLeft + iSpeed + "px";//层运动
                    document.getElementById("divMove").innerHTML = "速度:"+iSpeed+'</br>'+'距离:'+obj.offsetLeft + "px";
                };
            }, 30);

        }
    </script>
    <body>
        <div id="divMove">

        </div>
        <input type="button" id="btnMove" value="开始运动" />
    </body>
</html>

时间: 2024-11-05 13:33:32

层的缓冲运动的相关文章

js之运动框架缓冲运动

由于JS里对于数值小数点会自动去除,所以对于运动位置,需要使用Math.ceil()向上取整或者 Math.floor()向下取整进行解决 以下是我的缓冲运动练习简单代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

关于javascript缓冲运动的笔记

Js里面有关运动的框架比较多,先从基本开始,我感觉缓冲运动是比教基础而且比较重要的,先提供一个小例子. <script type="text/javascript">        window.onload = function()        {            var oBtn = document.getElementById("btn1");            var oDiv = document.getElementById(&

关于多物体缓冲运动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>多物体缓冲运动</title></head><style>*{margin:0px;padding:0px;}#move li{width:200px;height:100px;display:block;margin-bottom:20

js缓冲运动代码实例

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

缓冲运动之框架開始一级简单框架实例

***********************缓冲运动[框架開始]-1.html********************************************* <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"

JS实现多物体width缓冲运动实例

多物体运动,运动参数不能公用. 这篇文章主要介绍了JS实现多物体缓冲运动实例代码,有需要的朋友可以参考一下 效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 代码如下: <head runat="server"> <title></title> <style type="text/css">

js运动基础之缓冲运动

单属性缓冲运动 1 /** 2 * 单属性缓冲运动 3 */ 4 function fnSingleBufferMove(oDom, sAttr, iTarget, fn){ 5 var iSpeed, iCur; 6 clearInterval(oDom.timer); 7 oDom.timer = setInterval(function(){ 8 // 计算当前值 9 if(sAttr == 'opacity'){ 10 iCur = Math.round(fnGetStyle(oDom,

缓冲运动之框架开始一级简单框架实例

***********************缓冲运动[框架开始]-1.html********************************************* <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"

js实现缓冲运动,和匀速运动有点不相同

缓冲运动和匀速运动有点不同,看图可以知道缓冲运动速度是越来越慢的. 1 <style> 2 *{ 3 padding:0; 4 margin:10px 0; 5 } 6 #div1{ 7 height:100px; 8 width:100px; 9 background:green; 10 float:left; 11 position:relative; 12 left:1000px; 13 } 14 #div2{ 15 border-left:1px solid black; 16 pos