您的位置：首页 > Web前端 > JQuery

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

2017-02-24 11:06 483 查看

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.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>

点击看效果（网址：http://tangjiusheng.com/e/demo/jq01.html）

希望这个特效对你有所帮助，写个jQuery图片手风琴特效真的没必要去找各种插件，各种引包，会让网站很臃肿影响网站性能。我2014年毕业的，做web前端开发这个工作两年多了，个人感悟：网站的各站特效花心思去理解它的原理，懂了后自己写其实不难，就看花不花时间了。

除注明外的文章,均为来源:汤久生博客(QQ:1917843637),转载请保留本文地址！

原文网址：http://tangjiusheng.com/jQuery/89.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css3 jquery 动画

相关文章推荐

新的分享

章节导航