特别简单的Javascript制作图片的缩放

最新推荐文章于 2024-04-15 10:09:15 发布

qq_65211241

最新推荐文章于 2024-04-15 10:09:15 发布

阅读量1k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/qq_65211241/article/details/121920414

版权

   <style>
        *{
            margin: 0;
            padding: 0;
            z-index: 0;
        }
        body{
            background: black;
        }
        ul{
            list-style: none;
            margin-top: 10px;
        }
        li{
            color: white;
            float: left;
            padding-left: 38px;
            padding-top: 25px;
        }
        #box{
            width: 750px;
            height: 500px;
            border: 3px solid white;
            margin: 0 auto;
            margin-top: 100px;
        }
        ul li img{
            width: 200px;
            height: 200px;
            opacity: 0.3;
        }
        .box{
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 9999;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 30%;
            display: none;
        }
    </style>
<body>
    <div id="box">
        <ul>
            <li>
                <img src="img/11.jpg" alt="" class="enlarge">
            </li>
            <li>
                <img src="img/22.jpg" alt="" class="enlarge">
            </li>
            <li>
                <img src="img/33.jpg" alt="" class="enlarge">
            </li>
            <li>
                <img src="img/44.jpg" alt="" class="enlarge">
            </li>
            <li>
                <img src="img/55.jpg" alt="" class="enlarge">
            </li>
            <li>
                <img src="img/66.jpg" alt="" class="enlarge">
            </li>
        </ul>
        <div class="box"></div><!--容器-->
    </div>
</body>
<script>
    $(document).ready(function () {
        $("li").hover(
            function () {
                var num = $(this).index();
                $("#box li:eq("+num+") img").css("opacity","1")
            },
            function () {
                var num = $(this).index();
                $("#box li:eq("+num+") img").css("opacity","0.5")
            }
        );
        $('.enlarge').click(function () {
            var imgSrc = $(this).attr("src");
            $('.box').css("background-image","url("+imgSrc+")");
            $(".box").show();
            $('.box').click(function () {
                $(this).hide()
            })
        })
    })
</script>