原生手风琴效果
<!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
}
}
}
