滑动显示大图

话不多说，直接源码

点击看效果demo

<!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主要用到两个地方：

　　1.垂直居中展示图片

　　2.圆角展示外框

　　以上两个地方的css可以看到前几篇的点击放大图片和垂直居中图片

posted @ 2017-12-06 10:44  柠檬张先生  阅读(155)  评论(0)  编辑  收藏  举报