jQuery特效手风琴特效 手写手风琴网页特效

今天写一个简单的手风琴效果，不用插件，利用强大的jQuery，写一个手风琴效果。

页面预览，请点击这里预览：  手风琴预览

案例分析：

html结构

就是一个大盒子里面放着5个li，每个li的小小是200像素，给li浮动起来，但是这里，我用一个each循环给这5个li加的背景，这样更简洁，当然大家也可以自己给li直接指定背景。
<div class="box">
        <ul>
            <li>好多钱</li>
            <li>好多钱</li>
            <li>好多钱</li>
            <li>好多钱</li>
            <li>好多钱</li>
        </ul>
</div>

jquery 语句

这个效果完全是对于jqueryanimate的使用，核心语句是这样的，当鼠标放到当 前li上，自己变成600宽，但是他的兄弟变成100宽，这样，5个li的宽度一加，还是没超过大盒子的宽度，这样li就不会掉下来， 当鼠标离开的时 候，所有的li再复原为原来的200宽，这样就完成这个案例了，详细语句如下：
<script type="text/javascript">
        $(document).ready(function() {
            $("li").each(function(index, el) {
                var inde=index+1;
                $(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

总结

以上是生活随笔为你收集整理的jQuery特效手风琴特效 手写手风琴网页特效的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。