码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-04-24 17:28:08      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:pac   column   sem   content   isp   移动   lock   this   mouse   

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

  实现代码:

    <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" >

                    </div>

                    <div class="box_top_right">

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

                    </div>

                </div>

                <div class="box_bottom">

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

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

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

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

                </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>

  好了,相信看到这里大家都知道该如何去做了,那么现在可以保存查看一下效果了,如果没有做出放大镜效果的程序员也不需要灰心,可以在下方留言询问,或者跟其他人互动来解决都是可以的。

  本文由专业的app开发燚轩科技整理发布,如需转载请注明原文作者及出处!

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

标签:pac   column   sem   content   isp   移动   lock   this   mouse   

原文地址:https://www.cnblogs.com/yxkj/p/8930895.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!