这篇博客详细介绍了如何使用jQuery进行封装，创建手风琴效果。通过HTML结构和jQuery代码的结合，实现了内容区域的展开与折叠，提供了一种优化网页空间利用的交互方式。
jquery封装部分
$.fn.acc = function (colors, width) {
colors = colors || []
width = width || 100;
var $li = this.find("li");
var maxlength = this.width() - width * ($li.length - 1);
var avglength = this.width() / $li.length;
$li.mouseenter(function () {
$(this).stop().animate({width: maxlength}).siblings().stop().animate({width: width})
})
$li.mouseleave(function () {
$li.stop().animate({width: avglength})
})
}
html部分
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
div {
width: 1200px;
height: 400px;
/*border: 2px solid #000;*/
margin: 100px auto;
overflow: hidden;
}
ul{
width: 1220px;
}
li {
Apx;
float: left;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src="js/jquery.acc.js"></script>
<script>
$("#box li").each(function (index,ele) {
$(ele).css("backgroundImage","url(images/"+(index+1)+".jpg)")
})
$("#box").acc();
</script>
</body>
</html>
扫一扫
1878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
