1. 程式人生 > >前端編程之頁面放大鏡功能的實現

前端編程之頁面放大鏡功能的實現

如何 osi one AS this OS box enter 放大鏡

  淘過寶的都知道,有些網站需要對商品進行放大鏡功能,也就是當鼠標移動到商品上面時,會在旁邊出現細節的放大效果,這對於一些商城類網站來說,是一定需要具備的,那麽頁面放大鏡功能是如何來實現的呢?下面就跟大家分享一下。

  實現代碼:

<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開發燚軒科技整理發布,如需轉載請註明原文作者及出處!

前端編程之頁面放大鏡功能的實現