首頁

HTML編程之頁面放(fàng)大(dà)鏡功能的實現

放(fàng)大(dà)鏡 2018-04-05 4350

淘過寶的都知(zhī)道,有些網站需要對商(shāng)品進行放(fàng)大(dà)鏡功能,也就是當鼠标移動到商(shāng)品上面時,會在旁邊出現細節的放(fàng)大(dà)效果,這對于一(yī)些商(shāng)城類網站來說,是一(yī)定需要具備的,那麽頁面放(fàng)大(dà)鏡功能是如何來實現的呢?下(xià)面專業的app開(kāi)發報價燚軒科技就跟大(dà)家分(fēn)享一(yī)下(xià)。

實現代碼:

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


好了,相信看到這裏大(dà)家都知(zhī)道該如何去(qù)做了,那麽現在可以保存查看一(yī)下(xià)效果了,如果沒有做出放(fàng)大(dà)鏡效果的程序員(yuán)也不需要灰心,可以留言詢問我(wǒ)(wǒ)們。

分(fēn)享:
分(fēn)享到微信朋友圈 +
打開(kāi)微信,點擊底部的“發現”,使用 “掃一(yī)掃” 即可将網頁分(fēn)享到我(wǒ)(wǒ)的朋友圈。 如何使用?
推薦文章

熱貼More +

服務範圍More +

聯系我(wǒ)(wǒ)們

請掃二維碼聯系客服

854221200@qq.com

185-3825-9583

QQ客服

關于  ·  招聘  ·  案例中(zhōng)心  ·  網站地圖

©@2018 燚軒科技版權所有 豫ICP備16015002号-4

百度提供搜索支持