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="https://blog.deisuan.com/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>
点击看效果(网址:https://blog.deisuan.com/e/demo/jq01.html)
希望这个特效对你有所帮助,写个jQuery图片手风琴特效真的没必要去找各种插件,各种引包,会让网站很臃肿影响网站性能。我2014年毕业的,做web前端开发这个工作两年多了,个人感悟:网站的各站特效花心思去理解它的原理,懂了后自己写其实不难,就看花不花时间了。
原文网址:https://blog.deisuan.com/jQuery/89.html