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];
    }
}
        
复制代码

 

posted @   大空白纸  阅读(203)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
点击右上角即可分享
微信分享提示