案例推拉门的实现--（jq）

最新推荐文章于 2020-03-24 17:24:39 发布

Tt-wW

最新推荐文章于 2020-03-24 17:24:39 发布

阅读量346

点赞数

CC 4.0 BY-SA版权

分类专栏：案例与项目文章标签： jq 推拉门

本文链接：https://blog.youkuaiyun.com/weixin_44773271/article/details/96726185

案例与项目专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>  
<meta charset="UTF-8"> 
 <title>Title</title>  
 <style> 
    *{      margin: 0;      padding: 0;    }  
       ul {      list-style: none;      width: 1300px;    }  
     #box {      width: 1200px;      height: 400px;      border: 2px solid red;      margin: 100px auto;    }     
    #box li {      width: 240px;      height: 400px;      /*border: 1px solid #000;*/      float: left;    }  
     </style>
     </head>
     <body>
     <div id="box"> 
      <ul>   
       <li></li>   
        <li></li>    
        <li></li>  
        <li></li>    
        <li></li>  
        </ul>
        </div>
        <script src="node_modules/jquery/dist/jquery.js"></script>
        <script>
          $(function () {    
          var $li = $("#box li");       
           for (var i = 0; i < $li.length; i++) {      
           $li.eq(i).css("backgroundImage", "url(img/" +"00"+(i + 1) + ".jpg)");    }       
            //给所有的li注册鼠标经过事件  
              //stop()防抖动   
               $li.mouseenter(function () {     
                $(this).stop().animate({width:800}).siblings().stop().animate({width:100});               }).mouseleave(function () {      $li.stop().animate({width:240});    });          });
                </script>
                </body>
                </html>