滑動顯示大圖

時間 2020-08-18

標籤滑動顯示简体版

原文原文鏈接

話很少說，直接源碼css

點擊看效果demohtml

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./demo.css" type="text/css" />
</head>
<body>
    <div class="demo-container">
        <div class="img-container">
            <div class="method4">
                <ul class="zxx_ul_image">
                    <li>
                        <img src='../images/imgcommon1.jpg' />
                    </li>
                    <li>
                        <img src="../images/imgcommon3.jpg" />
                    </li>
                    <li>
                        <img src="../images/imgcommon2.jpg" />
                    </li>
                    <li>
                        <img src="../images/imgcommon4.jpg" />
                    </li>
                    <li>
                        <img src="../images/imgcommon5.jpg" />
                    </li>
                    <li>
                        <img src="../images/imgcommon7.jpg" />
                    </li>
                </ul>
            </div>
        </div>
        <div class="show-platform">
            <div class="round_shade_box" id="zoom"> 
                <div class="round_shade_top"> 
                    <span class="round_shade_topleft"></span> 
                    <span class="round_shade_topright"></span> 
                </div> 
                <div class="round_shade_centerleft"> 
                    <div class="round_shade_centerright"> 
                        <div class="round_shade_center" id="zoom_content">
                            <img id="showPic" src="">
                        </div> 
                    </div>
                </div>
                <div class="round_shade_bottom">
                    <span class="round_shade_bottomleft"></span>
                    <span class="round_shade_bottomright"></span>
                </div> 
            </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $(function() {
            function hoverOut(e) {
                $('#zoom').animate({
                    opacity : "hide"
                    }, 500, null, function() {
                        
                        //動畫完成回調
                        $('#showPic').css('display', 'none');
                    });
            };
            function hoverIn(e) {
                $('#zoom').animate({
                    opacity : "show"
                    }, 500, null, function() {

                        //動畫完成回調
                        $('#showPic').attr('src', $(e.currentTarget).find('img').attr('src'));
                        $('#showPic').css('display', 'block');
                    });
            };
            $('.zxx_ul_image li').hover(hoverIn, hoverOut);                    
        });
    </script>
</body>
</html>

　　css主要用到兩個地方：jquery

　　1.垂直居中展現圖片ide

　　2.圓角展現外框動畫

　　以上兩個地方的css能夠看到前幾篇的點擊放大圖片和垂直居中圖片ui