摘要:本篇教程介绍了jQuery如何实现手风琴特效,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
本篇教程介绍了jQuery如何实现手风琴特效,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
<
代码:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 *{padding: 0px;margin: 0px;}
8 li{
9 width: 80px;height:300px;
10 float: left;overflow: hidden;
11 list-style: none;
12 }
13
14 </style>
15 <script type="text/javascript "src="//code.jquery.com/jquery-1.10.2.min.js"></script>
16 </head>
17 <body>
18 <script >
19 $(function () {
20 $("ul li").mouseover(function (){
21 $(this).stop().animate({width:350},500)//stop函数:停止当前正在运行的动画
22 //siblings:遍历
23 $(this).siblings().stop().animate({width:80},500)//anmate:500ms后将其width变为80px;
24 })
25 })
26 </script>
27 <div>
28 <ul>
29 <li style="width: 350px"><img src="1.jpg"></li>
30 <li><img src="2.jpg"></li>
31 <li><img src="3.jpg"></li>
32 <li><img src="4.jpg"></li>
33 <li><img src="5.jpg"></li>
34 </ul>
35 </div>
36 </body>
37 </html>
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号