js和jq方法实现手风琴案例

手风琴的实现之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

//  })