jQuery图片手风琴特效一行代码搞定

 分类:jQuery教程时间:2016-11-26 11:33:33点击:

 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前端开发这个工作两年多了,个人感悟:网站的各站特效花心思去理解它的原理,懂了后自己写其实不难,就看花不花时间了。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: