jquery-实现图片预览

本文使用jquery框架的方法，快速实现图片预览功能

一、附上优美的效果图

二、全部代码以及介绍

  1. 使用jquery方法操作dom(2d变化)

  2. 在主图片的样式加上transtion:1s,使2d变化更舒适

  3. 阻止默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigBox{
            width: 300px;
            height: 200px;
            margin: 20px auto;
            position: relative;
        }
        .bigBox img{
            position: absolute;
            width: 100%;
            height: 100%;
            transition: 1s;
        }
        .list{
            height: 50px;
            width: fit-content;
            margin: 0 auto;
        }
        .list li{
            float: left;
            width: 50px;
            height: 50px;
            margin: 0 10px;
            list-style: none;
        }
        .list li img{
            width: 100%;
            height: 100%;
        }
        .active{
            border: 2px #000 solid;
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <img src="./images/1.jpg" alt="">
    </div>
    <div class="list">
        <li class="active">
            <img src="./images/1.jpg" alt="">
        </li>
        <li>
            <img src="./images/2.jpg" alt="">
        </li>
        <li>
            <img src="./images/3.jpg" alt="">
        </li>
        <li>
            <img src="./images/4.jpg" alt="">
        </li>
    </div>
</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $('.bigBox img').click(function(e){
        e.stopPropagation();
        $('.bigBox img').css({
            'transform':'translateY(100px) scale(2)',
        })
    })
    $(document).click(function(){      
        $('.bigBox img').css({
            'transform':' scale(1)',
        })
    })
    $('.list').click(function(e){
        var t = e.target;
        if(t.nodeName=='IMG'){
            $('.bigBox img').attr('src',$(t).attr('src'));
            $(t).parent().addClass('active');
            $(t).parent().siblings().removeClass('active');
        }
    })
</script>
</html>
posted @ 2020-07-07 20:44  飘逸_winxin  阅读(3558)  评论(0)  编辑  收藏  举报