首页

HTML编程之页面放大镜功能的实现

放大镜2018-04-051091

淘过宝的都知道,有些网站需要对商品进行放大镜功能,也就是当鼠标移动到商品上面时,会在旁边出现细节的放大效果,这对于一些商城类网站来说,是一定需要具备的,那么页面放大镜功能是如何来实现的呢?下面专业的app开发报价燚轩科技就跟大家分享一下。

实现代码:

    <style>

        html,body{

            margin: 0;

            padding: 0;

        }

        .main{

            width: 1200px;

            margin: 100px auto 0;

            display: flex;

        }

        .box{

            width: 400px;

            height: 500px;

            position: relative;

            border: 1px solid red;

            display: flex;

            flex-flow: column;

            justify-content: space-between;

            padding: 5px;

        }

        .box_top{

            width: 400px;

            height: 400px;

            display: flex;

            

            position: relative;

            border: 1px solid green;

        }

        .box_top_left{

            width: 400px;

            height: 400px;

            position: relative;

        }

        .box_top_left_999{

            width: 100%;

            height: 100%;

            position: absolute;

            z-index: 999;

        }

        .box_top_left_99{

            width: 200px;

            height: 200px;

            position: absolute;

            z-index: 99;

            background-color: rgb(81, 223, 255);

            opacity: 0.5;

            display: none;

        }

        .box_top_left img{

            width: 100%;

            height: 100%;

        }

 

 

        .box_top_right{

            width: 400px;

            height: 400px;

            overflow: hidden;

            position: absolute;

            left: 500px;

            border: 1px solid red;

            display: none;

        }

        .box_top_right img{

            width: 800px;

            height: 800px;

            position: relative;

            display: block;

        }

 

        .box_bottom{

            width: 400px;

            height: 80px;

            display: flex;

            align-items: center;

            border: 1px solid blue;

            padding: 1% 0;

        }

        .box_bottom img{

            width: 23%;

            height: 100%;

            margin: 0 1%;

        }

    </style>

</head>

<body>

    <main>

        <div class="main">

            <div class="box">

                <div class="box_top">

                    <div class="box_top_left">

                        <div class="box_top_left_999"></div>

                        <div class="box_top_left_99"></div>

                        <img src="imgs/timg.jpg" alt="">

                    </div>

                    <div class="box_top_right">

                        <img src="imgs/timg.jpg" alt="">

                    </div>

                </div>

                <div class="box_bottom">

                    <img src="imgs/timg.jpg" alt="">

                    <img src="imgs/b.jpg" alt="">

                    <img src="imgs/c.jpg" alt="">

                    <img src="imgs/d.jpg" alt="">

                </div>

            </div>

        </div>

    </main>

    <script>

        $(".box_bottom img").each(function(){

            $(this).mouseover(function(){

                $(".box_top_left img").attr("src",$(this).attr("src"))

                $(".box_top_right img").attr("src",$(this).attr("src"))

            })

        })

        $(".box_top_left_999").mousemove(function(e){

            var top = e.pageY;

            var left = e.pageX;

 

            $(".box_top_left_99").css("display","block")

            $(".box_top_right").css("display","block")

 

            var new_left_x = $(this).offset().left+100;

            var new_left_d = $(this).offset().left+300;

            

            var img_left = left - new_left_x

            img_left = -img_left

            img_left = img_left*2

 

            if( left > new_left_x){

                if(left < new_left_d){

                    $(".box_top_left_99").css("left",left - new_left_x)

                    $(".box_top_right img").css("left",img_left)

                }else{

                    $(".box_top_left_99").css("left",200)

                    $(".box_top_right img").css("left",-400)

                }

            }else{

                $(".box_top_left_99").css("left",0)

                $(".box_top_right img").css("left",0)

            }

 

            var new_top_x = $(this).offset().top+100;

            var new_top_d = $(this).offset().top+300;

            var img_top = top - new_top_x

            img_top = -img_top

            img_top = img_top*2

 

            if(new_top_x < top){

                if(new_top_d>top){

                    $(".box_top_left_99").css("top",top - new_top_x)

                    $(".box_top_right img").css("top",img_top)

                }else{

                    $(".box_top_left_99").css("top",200)

                    $(".box_top_right img").css("top",-400)

                }

            }else{

                $(".box_top_left_99").css("top",0)

                $(".box_top_right img").css("top",0)

            }

 

        }).mouseout(function(){

            $(".box_top_left_99").css("display","none")

            $(".box_top_right").css("display","none")

        })

    </script>


好了,相信看到这里大家都知道该如何去做了,那么现在可以保存查看一下效果了,如果没有做出放大镜效果的程序员也不需要灰心,可以留言询问我们。

分享到微信朋友圈+
打开微信,点击底部的“发现”,使用 “扫一扫” 即可将网页分享到我的朋友圈。 如何使用?
推荐文章

热贴More +

服务范围More +

联系我们

请扫二维码联系客服

854221200@qq.com

185-3825-9583

QQ客服

关于  ·  招聘  ·  案例中心  ·  网站地图

©@2018 燚轩科技版权所有 豫ICP备16015002号-4

百度提供搜索支持