jQuery实现手风琴特效-偶像资源网

本文实例为大家分享了jQuery实现手风琴的具体代码，供大家参考，具体内容如下

运用jQuery效果（功能如下）：

代码（链式编程）：

<!DOCTYPE html>
<html lang=\"en\">

<head>
<meta charset=\"UTF-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>Document</title>
<script src=\"../jquery-3.4.1.min.js\"></script>
<style type=\"text/css\">
* {
margin: 0;
padding: 0;
}

img {
display: block;
}

ul {
list-style: none;
}

.king {
width: 852px;
margin: 100px auto;
background: url(../images/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}

.king ul {
overflow: hidden;
}

.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}

.king li.current {
width: 224px;
}

.king li.current .big {
display: block;
}

.king li.current .small {
display: none;
}

.big {
width: 224px;
display: none;
}

.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
</head>

<body>
<div class=\"king\">
<ul>
<li class=\"current\">
<a href=\"#\" >
<img src=\"../images/m1.jpg\" alt=\"\" class=\"small\">
<img src=\"../images/m.png\" alt=\"\" class=\"big\">
</a>
</li>
<li>
<a href=\"#\" >
<img src=\"../images/l1.jpg\" alt=\"\" class=\"small\">
<img src=\"../images/l.png\" alt=\"\" class=\"big\">
</a>
</li>
<li>
<a href=\"#\" >
<img src=\"../images/c1.jpg\" alt=\"\" class=\"small\">
<img src=\"../images/c.png\" alt=\"\" class=\"big\">
</a>
</li>
<li>
<a href=\"#\" >
<img src=\"../images/w1.jpg\" alt=\"\" class=\"small\">
<img src=\"../images/w.png\" alt=\"\" class=\"big\">
</a>
</li>
<li>
<a href=\"#\" >
<img src=\"../images/z1.jpg\" alt=\"\" class=\"small\">
<img src=\"../images/z.png\" alt=\"\" class=\"big\">
</a>
</li>
<li>
<a href=\"#\" >
<img src=\"../images/h1.jpg\" alt=\"\" class=\"small\">
<img src=\"../images/h.png\" alt=\"\" class=\"big\">
</a>
</li>
<li>
<a href=\"#\" >
<img src=\"../images/t1.jpg\" alt=\"\" class=\"small\">
<img src=\"../images/t.png\" alt=\"\" class=\"big\">
</a>
</li>
</ul>
</div>

</body>
<script>
$(function() {
//1.鼠标经过小li有两步操作：当前小li的宽度变为225px，同时里面的小图片淡出，大图片淡入
//2.其余兄弟元素小li宽度变为69px，小图片淡入，大图片淡出
$(\".king li\").mouseenter(function() {
$(this).stop().animate({
width: 224
}).find(\".small\").stop().fadeOut().siblings(\".big\").stop().fadeIn();
$(this).siblings(\"li\").stop().animate({
width: 69
}).find(\".small\").stop().fadeIn().siblings(\".big\").stop().fadeOut();
})
})
</script>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

jQuery实现手风琴特效

请登录后发表评论