jquery实现图片手风琴效果

最新推荐文章于 2022-11-20 20:53:52 发布

weixin_30555515

最新推荐文章于 2022-11-20 20:53:52 发布

阅读量136

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/web001/p/8401555.html

版权

话不多说，来看代码实现手风琴效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{ margin:0; padding:0;}
    ul,li{list-style: none;}
    a{text-decoration: none;}
    .box{ width:340px; height:260px; margin:0 auto;border:1px solid #f00;overflow: hidden}
    .box ul{ width:340px; height:260px;}
    .box ul li{width:85px; height:260px;float: left}

    .box ul li img{border:0;width:100%;height:100%;display: block;background-size: cover}
</style>
<body>
<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
    $(function(){
        var $li = $(".box li");
        for(var i=0;i<$li.length;i++){
            $li.eq(i).css("backgroundImage","url(img/pic"+ (i+1) +".jpg)");//这里是将我当地文件夹中的图片写入li中，图片分别为pic1，pic2，pic3，pic4
        }
        $li.mouseenter(function(){
           $(this).stop().animate({width:250}).siblings().stop().animate({width:30})
       }).mouseleave(function(){
            $li.stop().animate({width:85})
        })
    })
</script>

</body>
</html>

效果图如下：

注意：以上stop是解决鼠标快速放入图片上的animate的bug问题。

好了效果就是这样，可以试试看呢！

转载于:https://www.cnblogs.com/web001/p/8401555.html

weixin_30555515

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现图片手风琴效果

话不多说，来看代码实现手风琴效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> *{ margin:0;...
复制链接

扫一扫