原生手风琴效果 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{list-style: none}
        *{margin:0; padding:0;}
        div{
            width: 1150px;
            height: 400px;
            margin:50px auto;
            border:1px solid red;
            overflow: hidden;

        }
        div li {
            width: 240px;
            height: 400px;
            float: left;
        }
        div ul {
            width: 1300px;
        }
    </style>
    <script src="../jquery1.0.0.1.js"></script>
    <script>
        window.onload = function () {
            //需求：鼠标放入到li中该盒子变宽，其他的盒子变窄。移开大盒子，回复原样。
            //步骤：
            //1.给li添加背景
            //2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
            //3.移开大盒子，回复原样


            var div = document.getElementsByTagName("div")[0];
            var liArr = div.getElementsByTagName("li");
            //1.给li添加背景
            for(var i=0;i<liArr.length;i++){
                
                liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";

                //2.绑定onmouseover事件，鼠标放入到li中该盒子变宽，其他的盒子变窄
                liArr[i].onmouseover = function () {
                    //排他思想
                    for(var j=0;j<liArr.length;j++){
                        //引用框架实现宽度变窄
                        animate(liArr[j],{"width":100});
                    }
                    //剩下他自己
                    animate(this,{"width":800})
                }
            }

            //3.移开大盒子，回复原样
            div.onmouseout = function () {
                for(var j=0;j<liArr.length;j++){
                    //引用框架实现宽度变窄
                    animate(liArr[j],{"width":240});
                }
            }
        }
    </script>
</head>
<body>
<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>

　　引入jq.js原生框架

function show(ele){
	ele.style.display="block";
}

//

function getStyle(ele,attr){

	if (window.getComputedStyle) {
		return window.getComputedStyle(ele,null)[attr];
	} 

	return ele.currentStyle[attr];
}

//动画基础 参数有三个

function animate(ele,json,fn){

	clearInterval(ele.timer);

	ele.timer=setInterval(function(){
		//首先是开闭原则;
		var bool=true;

		for(var k in json){
			//老三步
			var leader=parseInt(getStyle(ele,k))||0;

			var step=(json[k]-leader)/10;

			step = step>0?Math.ceil(step):Math.floor(step);

			leader=leader+step;

			ele.style[k]=leader+"px";

			if (json[k]!==leader) {
				bool=false;
			}

		}

		if (bool) {
			clearInterval(ele.timer);

			if (fn) {
				fn();
			}
		}

	},10)

}



//获取元素的可视区域

function client(){

	if (window.innerWidth!==undefined) {
		return{
			"width":window.innerWidth,
			"height":window.innerHeight
		}
	}else if (document.compatMode==="CSS1Compat") {
		return{
			"width":document.documentElement.clientWidth,
			"height":document.documentElement.clientHeight
		}
	}else{
		return{
			"width":document.body.clientWidth,
			"height":document.body.clientHeight
		}
	}

}

　　

posted @ 2017-03-31 14:58  北漂阿猫  阅读(262)  评论(0)    收藏  举报