jquery实现百叶窗效果（利用li宽度实现）

最新推荐文章于 2021-12-29 20:51:05 发布

weixin_43700362

最新推荐文章于 2021-12-29 20:51:05 发布

阅读量282

点赞数

文章标签：百叶窗利用width

本文链接：https://blog.csdn.net/weixin_43700362/article/details/103246712

版权

大致思路：

div设置的需要足够宽度，div里的ul也是如此，不然li里的图片会在下面放大。
li里的图片先设置一个统一宽高，比如560px，300px。
div里的ul 的li先设置一个比较小的宽度，（就好像是百叶窗），比如 width:112px;
height:300px;必须设置 overflow: hidden;和float：left。
当鼠标进入某个图片的时候，li的宽度变为560px。就实现了图片放大的效果。其他的li还是最初的宽度。
当鼠标离开li的时候，li的宽度都为最初的宽度。

程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .box{
        width:4000px;
        height:300px;
        margin:100px auto;
        position: relative;
    }
    .box ul{
        width:4000px;
        height:300px;
        float: left;
        list-style: none;
        position: absolute;
        left:0;
        top:0;
    }
    .box ul li{
        float: left;
        width:112px;
        height:300px;
        overflow: hidden;
    }
    img{
        width:560px;
        height:300px;
    }
</style>
<body>

<div class="box">
    <ul>
        <li> <a href="#"> <img src="img/0.jpg" alt=""></a> </li>
        <li>  <a href="#"> <img src="img/1.jpg" alt=""></a> </li>
        <li>  <a href="#"> <img src="img/2.jpg" alt=""></a> </li>
        <li>  <a href="#"> <img src="img/3.jpg" alt=""></a> </li>
        <li>  <a href="#"> <img src="img/4.jpg" alt=""></a> </li>
    </ul>

</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script>
    $("ul li").mouseenter(function(){
        console.log($(this).index());
        $(this).css("width","500px").siblings().css("width","120px");
    });
    $("ul li").mouseleave(function(){
        $(this).css("width","120px");
    })
</script>

</body>
</html>