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>
    <script src="move.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            var oBtn = document.getElementById("btn1");

            oBtn.onclick = function(){
                 move(oDiv,‘right‘,300);   //可使
                 //move(oDiv,‘left‘,300);  //可使
                 //move(oDiv,‘top‘,300);   //可使
                 //move(oDiv,‘width‘,300); //可使
                 //move(oDiv,‘height‘,300); //可使
            }

            oDiv.onmouseover = function(){
                move(oDiv,‘opacity‘,100);
            }

            oDiv.onmouseout = function(){
                move(oDiv,‘opacity‘,30);
            }

        }
    </script>
</head>
<body>
  <input type="button" id="btn1" value="运动" />
   <div id="div1" style="width:200px;height:200px;position:absolute;background:red;filter:alpha(opacity=30);opacity:0.3;">
   </div>
</body>
</html>

js:

//height,left , top ,right ,opacity
var timer = null
function move(obj,attr,target)
{
     //开启定时器
     timer = setInterval(function(){
     var current = 0;
     if(attr=="opacity")
     {
        current = Math.round(parseFloat(getStyle(obj,attr))*100);
     }
     else
     {
        current = parseInt(getStyle(obj,attr));
     }

    var speed = target>current ? 6 :-6;

    if(Math.abs(current-target)<6)
    {
        //清除定时器
        clearInterval(timer);
    }
    else
    {
         if(attr=="opacity")
         {
            obj.style.filter = "alpha(opacity:"+(current + speed) +")";
            obj.style.opacity = (current + speed) /100;

         }
         else
         {
            obj.style[attr] = current + speed +"px";
         }
    }

   },30);

}

function getStyle(obj,attr)
{
    if(obj.currentStyle)  //用于IE
    {
        return obj.currentStyle[attr];
    }
    else
    {
        //document.defaultView.getComputedStyle 该方法时DOM2中才出现的方法
        return document.defaultView.getComputedStyle(obj, null)[attr];
        //getComputedStyle DOM1中的方法
        //return getComputedStyle(obj,false)[attr];
    }
}
        
时间: 2024-10-19 14:30:26

js 运动框架及实例的相关文章

js实现的运动框架代码实例

js实现的运动框架代码实例:元素的运动效果在大量的场景中都有应用,最典型的一个就是网站的客服系统,一般都会随着滚动条运动,本章节就介绍一下js的一个运动框架实例,希望能够给需要的朋友带来借鉴作用.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwh

带无缝滚动的轮播图(含JS运动框架)

今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框架的代码如下: 1 //获取样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)

js运动框架逐渐递进版

运动,其实就是在一段时间内改变left.right.width.height.opactiy的值,到达目的地之后停止. 现在按照以下步骤来进行我们的运动框架的封装: 匀速运动. 缓冲运动. 多物体运动. 任意值变化. 链式运动. 同时运动 (第一部分):匀速运动 运动基础 思考:如何让div动起来?如下: 设置元素为绝对定位,只有绝对定位后,left,top等值才生效. 定时器的使用(动态改变值),这里使用setInterval()每隔指定的时间执行代码. 计时器setInterval(函数,交

js运动框架之掉落的扑克牌(重心、弹起效果)

玩过电脑自带纸牌游戏的同志们应该都知道,游戏过关后扑克牌会依次从上空掉落,落下后又弹起,直至"滚出"屏幕. 效果如图:    这个案例的具体效果就是:点击开始运动,纸牌会从右上角掉落下来,之后弹起,运动的速度会逐渐减慢,直到越出屏幕后,全部纸牌消失,在右上角会重新出现一张纸牌,继续动作,一再往复. 具体代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta ch

js运动框架完成块的宽高透明度及颜色的渐变

了解了运动框架完成块元素的宽高和透明度的变化的原理,我想着写一个颜色的变化来练习一下,不想写了很长时间才写出来,跟各位分享一下. 颜色的变化是通过三元素渐变的方式完成的,通过构造json,使当前的颜色与目标颜色进行对比,实现渐变的过程. 代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>

JS运动框架

本人也是菜鸟一枚,从网上搜索了很久,封装备注了一套运动框架,加强大家对此的理解,希望多多提议. getId:function(elemId){ return document.getElementById(elemId); }, getStyle:function(obj,attr){ return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj, false)[attr]; }, startMove:function(o

带无缝滚动的轮播图(含JS运动框架)-简洁版

昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!! js代码如下: 1 <script> 2 window.onload = function() { 3 var oWrap = document.getElementById("wrap"); 4 var oBox = document.getElementById("box"); 5 var aBox = oBox.getElementsByTagName("li

js运动框架tween

<!DOCTYPE html> <html> <head> <title>myAnimate</title> <style> *{ margin: 0; padding: 0; list-style: none; } #abc{ position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: #ff4500; } <

js 运动框架

/** * 使用offsetLeft,需注意margin的使用 * offsetLeft = margin-left + left; * offsetWidth= padding + border + width; * * @author Lonve */ function getStyle(elem,attr){ var result = null; result = elem.currentStyle?elem.currentStyle[attr]:getComputedStyle(elem