手风琴的实现之js和jq代码的分别实现
html和css代码:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 1178px;
height: 174px;
overflow: hidden;
margin: 0 auto;
}
.wrap ul li{
float: left;
width: 210px;
height: 174px;
overflow: hidden;
}
.wrap ul{
width: 2000px;
}
.wrap ul li img{
width: 550px;
height: 174px;
}
</style>
<div class="wrap">
<ul>
<li style='width:550px'><img src="http://pic.shejiben.com/hot_sjb/377_8180.jpg?1462261126" alt=""></li>
<li ><img src="http://pic.shejiben.com/hot_sjb/377_8288.jpg?1464830033" alt=""></li>
<li ><img src="http://pic.shejiben.com/hot_sjb/377_8155.jpg?1460709517" alt=""></li>
<li ><img src="http://pic.shejiben.com/hot_sjb/377_7937.jpg?1456984280" alt=""></li>
</ul>
</div>
js代码:
//js原生的方法来实现
//var liobj=document.getElementsByTagName("li");//获取li标签对象
// for(var i=0;i<liobj.length;i++)
// { liobj[i].onmouseenter=function();//为每个li标签对象添加鼠标进入事件
// {
// for(var j=0;j<liobj.length;j++)
// {
// liobj[j].style.width="210px";//进入之前先把所有的图片宽度设置为210px
// }
// this.style.width="550px";//设置当前的鼠标进入的li标签对象的宽度为550px;
// this.style.transition="1s linear width";//为了让当前li的宽度变成550的过程匀速进行,添加css3的过渡效果
// }
// }
在这里插入代码片
// jq的方法来实现 注意这里使用jq的时候要引入下载好的jQuery文件,否则jq代码无法实现。
// 简单版本 思路是当鼠标滑过谁,当前的图片变宽,而此时所有其他的图片宽度相对变小点
// $("ul").find("li").mouseenter(function(){
// // console.log(this);//这里的this直接是各个li标签对象了
// var liAll=$("ul").children();//找到所有的li标签对象
// // console.log(liAll);
// liAll.css("width","210px");//设置所有标签对象宽度为210px
// $(this).css("width","550px");//把this转为jq--dom对象然后设置当前li的宽度为550px
// })