jQuery图片手风琴特效一行代码搞定
jQuery图片手风琴特效挺好玩的，平时工作时也经常使用，原理挺简单的，除去入口函数和事件代码，就一行jQuery代码，所以标题写成了“jQuery图片手风琴特效一行代码搞定”，jQuery图片手风琴特效用了css3的属性有动画效果，这样才符合主流吧，具体的请看以下代码：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<title>jQuery手风琴特效</title>
<script type="text/javascript"src="http://tangjiusheng.cn/skin/default/js/jquery-1.7.2.min.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
.box{width:1200px;height:462px;margin:150px auto;
padding:4px;border:1px solid #ccc;box-sizing:border-box;overflow:hidden;}
.box .slide{width:206px;float:left;cursor:pointer;transition:1.5s;}
.box .on{width:570px;}
</style>
</head>
<body>
<div class="box">
<div class="slide on"><img src="images/box01.jpg"/></div>
<div class="slide"><img src="images/box02.jpg"/></div>
<div class="slide"><img src="images/box03.jpg"/></div>
<div class="slide"><img src="images/box04.jpg"/></div>
</div>
<script type="text/javascript">
$(function(){
$(".slide").hover(function(){
$(this).stop().addClass("on").siblings().removeClass("on");
});
});
</script>
</body>
</html>
希望这个特效对你有所帮助，写个jQuery图片手风琴特效真的没必要去找各种插件，各种引包，会让网站很臃肿影响网站性能。我2014年毕业的，做web前端开发这个工作两年多了，个人感悟：网站的各站特效花心思去理解它的原理，懂了后自己写其实不难，就看花不花时间了。
除注明外的文章,均为来源:老汤博客,转载请保留本文地址！
原文地址：https://tangjiusheng.cn/jQuery/89.html
原文地址：https://tangjiusheng.cn/jQuery/89.html