jQuery实现手风琴效果

最新推荐文章于 2023-04-17 20:46:17 发布

敲出真谛

最新推荐文章于 2023-04-17 20:46:17 发布

阅读量302

点赞数 1

分类专栏： jQuery 文章标签：手风琴效果

本文链接：https://blog.csdn.net/qq_36818627/article/details/81814620

版权

jQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

涉及技术栈 jQuery链、each（index，ele）函数

代码如下

<!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>
</head>
<body>
<div class="wrap">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
</body>
</html>
<script type="text/javascript" src="../../js/jquery-1.11.1.min.js" ></script>
<script>
    $(document).ready(function(){
    	$(".wrap li").each(function(key,value){
    		console.log(key,value);
    		$(value).css("background","url(images/"+(key+1)+".jpg)");
    	}).mouseenter(function(){
    		$(this).stop().animate({width:800},5).siblings().stop().animate({width:100},5);
    	}).mouseleave(function(){
    		$(".wrap li").stop().animate({width:240},5);
    	});
    });
//  var box = document.getElementsByTagName("div")[0];
//  var lis = box.children[0].children;
//  for(var i=0;i<lis.length;i++)
//  {
//      lis[i].style.backgroundImage = "url(images/"+(i+1)+".jpg)";
//      lis[i].onmouseover = function() {
//          for(var i=0;i<lis.length;i++)
//          {
//              animate(lis[i],{width:100});
//          }
//          animate(this,{width:800});
//      }
//      lis[i].onmouseout = function(){
//          for(var i=0;i<lis.length;i++)
//          {
//              animate(lis[i],{width:240});
//          }
//       }
//  }
</script>

敲出真谛

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现手风琴效果

涉及技术栈 jQuery链、each（index，ele）函数代码如下&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;手风琴效果&lt;/title&gt; &lt;style&a
复制链接

扫一扫

专栏目录