JS完美运动框架(学习篇)

完美运动框架实现JS运动

move.js运动框架

//获取属性
function getStyle(obj, name) {
    if(obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, true)[name];
    }
}
//obj表示运动的物体,json运动的属性,fnEnd链式运动的函数
function starMove(obj, json, fnEnd) {
    //移除定时器
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        //假定所有运动的属性都结束
        var bStop = true;
        //遍历需要同时运动的属性
        for(var attr in json) {
            //获得运动属性的当前运动值
            var cur = 0;
            if(attr == 'opacity') {
                cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
            } else {
                cur = parseInt(getStyle(obj, attr));
            }
            //计算速度
            var speed = (json[attr] - cur) / 6;
            //速度需要取整
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
            //判断如果有属性没有结束,则为false
            if(cur != json[attr]) bStop = false;
            //开始运动增减
            if(attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + cur + speed + ');'
                obj.style.opacity = (cur + speed) / 100;
            } else {
                obj.style[attr] = cur + speed + 'px';
            }
        }
        //最后运动结束
        if(bStop == true) {
            //关闭定时器
            clearInterval(obj.timer);
            //执行链式函数
            if(fnEnd) fnEnd();
        }
    }, 30)
}

运动框架实现的两个小例子

JS幻灯片实现

    
        
        
        
        
        
    
    
        

            

                
1
                
2
                
3
                
4
                
5
            
            

                
![](img/1.jpg)
                
![](img/2.jpg)
                
![](img/3.jpg)
                
![](img/4.jpg)
                
![](img/5.jpg)
            
        
        

            
ÊÊÓÃä¯ÀÀÆ÷£ºIE8¡¢360¡¢FireFox¡¢Chrome¡¢Safari¡¢Opera¡¢°ÁÓΡ¢Ëѹ·¡¢ÊÀ½çÖ®´°. 
            
À´Ô´£º
                Õ¾³¤ËزÄ
            
        
    

css代码

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

#div1 {
    width: 750px;
    height: 360px;
    overflow: hidden;
    margin: 50px auto;
    position: relative;
}

#div1 ol {
    position: absolute;
    right: 5px;
    bottom: 5px;
    height: 25px;
    z-index: 999;
}

#div1 ol li {
    float: left;
    width: 20px;
    height: 20px;
    text-align: center;
    border: 1px solid #f47400;
    margin: 2px;
    cursor: pointer;
    color: #f47400;
    background: #fbf2d1;
    margin-top: 2px;
}

#div1 ol li.actived {
    background: #ffb542;
    font-weight: bold;
    color: #FFF;
    width: 22px;
    height: 22px;
    margin-top: 0;
}

#div1 ul {
    position: absolute;
    left: 0;
    top: 0;
}

#div1 ul li {
    width: 750px;
    height: 360px;
    float: left;
}

#div1 ul li img {
    width: 750px;
    height: 360px;
    float: left;
}

发布信息简单实现

    
        
        
        
        
        
    
    
        
        
        
        

            
ajfiaejof