首页手记 javascript -- 链式运动

javascript -- 链式运动

标签：

Html/CSS JavaScript

1.startMove.js

function startMove(obj,attr,iTarget,func){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var curWidth =0;
        if(attr == 'opacity'){
            curWidth = Math.round(parseFloat(getStyle(obj,attr))*100);  
        }else{
            curWidth = parseInt(getStyle(obj,attr));                    
        }
        var speed = (iTarget - curWidth)/5;
        speed = (speed > 0 ? Math.ceil(speed):Math.floor(speed)); 
        if(curWidth == iTarget){
            clearInterval(obj.timer);
            if(func){
                func();
            }
        }else{
            if(attr == 'opacity'){
                obj.style[attr] = (curWidth + speed)/100;                       //chrome
                obj.style[attr] = 'Alpha(opacity:' + (curWidth + speed) + ')';  //IE

            }else{
                obj.style[attr] = curWidth + speed +'px';

                //设置行高
                if(attr == 'height'){
                    obj.style.lineHeight = obj.style[attr];
                }
            }   

        }
    },30);
}

function getStyle(obj,attr){
    if(obj.curentStyle){//IE
        return obj.currentStyle[attr];
    }else{//firefox
        return getComputedStyle(obj,false)[attr];
    }
}

2.lesson20.html

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>链式运动</title>
<style type="text/css">
 body,ul,li{
    padding:0;
    margin:0;
 }
 ul,li{
    list-style:none;
 }

 ul li{
    width:300px;
    height:300px;
    background:#0FF;
    margin-bottom:20px;
    border:2px dotted #999;
    filter:alpha(opacity:30);
    opacity:0.3;
    text-align:center;
    line-height:302px;
 }

</style>

<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="startMove.js"></script>
<script type="text/javascript">
window.onload=function(){

   //时钟
   var timer = null;
   clearInterval(timer);
   timer = setInterval('clock()',1000);

    //鼠标over事件
    var li = document.getElementById('li1');
    li.onmouseover=function(){
        startMove(li,'width',500,function(){
            startMove(li,'height',500,function(){
                startMove(li,'opacity',100,'');
            });
        });
    };

    //鼠标out事件
    li.onmouseout=function(){
        startMove(li,'opacity',30,function(){
            startMove(li,'height',300,function(){
                startMove(li,'width',300,'');
            });
        });
    };  

}

function clock(){
    var time=new Date();   
    var weekdays = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var date = time.getFullYear() + "年" + time.getMonth() + "月" + time.getDate() + "日 " + weekdays[time.getDay()] + " ";
    attime= date + (time.getHours() < 10 ? "0" + time.getHours() : time.getHours())+":" + (time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes()) + ":" + (time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds()) ;
    document.getElementById("li1").innerHTML = attime;
  }
</script>
</head>

<body>
<ul><li id="li1" ></li></ul>
</body>
</html>

点击查看更多内容