wordpress网站下载文件,网络营销培训机构排名,企业邮箱登陆,创建一个app需要什么今天写一个简单的手风琴效果#xff0c;不用插件#xff0c;利用强大的jQuery#xff0c;写一个手风琴效果。 页面预览#xff0c;请点击这里预览#xff1a; 手风琴预览案例分析#xff1a; html结构 就是一个大盒子里面放着5个li#xff0c;每个li的小小是200像素不用插件利用强大的jQuery写一个手风琴效果。 页面预览请点击这里预览 手风琴预览案例分析 html结构 就是一个大盒子里面放着5个li每个li的小小是200像素给li浮动起来但是这里我用一个each循环给这5个li加的背景这样更简洁当然大家也可以自己给li直接指定背景。div classbox ul li好多钱/li li好多钱/li li好多钱/li li好多钱/li li好多钱/li /ul /div jquery 语句 这个效果完全是对于jqueryanimate的使用核心语句是这样的当鼠标放到当 前li上自己变成600宽但是他的兄弟变成100宽这样5个li的宽度一加还是没超过大盒子的宽度这样li就不会掉下来 当鼠标离开的时 候所有的li再复原为原来的200宽这样就完成这个案例了详细语句如下script typetext/javascript $(document).ready(function() { $(li).each(function(index, el) { var indeindex1; $(el).css({background:url(inde.jpg)}) }); $(li).hover(function() { $(this).stop().animate({width: 600px}, 500).siblings().stop().animate({width:100px}, 500) }, function() { $(li).stop().animate({width:202px}, 500) }); }); /script 是不是很简单小强零零壹 和大家一起分享。 转载于:https://www.cnblogs.com/xiaoqiang001/p/3921374.html
