html實作放大鏡效果,利用jquery實作放大鏡特效

特效描述：利用jquery實作 放大鏡特效。利用jquery實作放大鏡特效

代碼結構

1. 引入CSS

2. 引入JS

3. HTML代碼

function Zoom(imgbox,hoverbox,l,t,x,y,h_w,h_h,showbox){

var moveX =x-l-(h_w/2);

//滑鼠區域距離

var moveY =y-t-(h_h/2);

//滑鼠區域距離

if(moveX<0){moveX=0}

if(moveY<0){moveY=0}

if(moveX>imgbox.width()-h_w){moveX=imgbox.width()-h_w}

if(moveY>imgbox.height()-h_h){moveY=imgbox.height()-h_h}

//判斷滑鼠使其不跑出圖檔框

var zoomX =showbox.width()/imgbox.width()

//求圖檔比例

var zoomY =showbox.height()/imgbox.height()

showbox.css({left:-(moveX*zoomX),top:-(moveY*zoomY)})

hoverbox.css({left:moveX,top:moveY})

//确定位置

}

function Zoomhover(imgbox,hoverbox,showbox){

var l = imgbox.offset().left;

var t = imgbox.offset().top;

var w =hoverbox.width();

var h = hoverbox.height();

var time;

$(".probox img,.hoverbox").mouseover(function(e){

var x=e.pageX;

var y=e.pageY;

$(".hoverbox,.showbox").show();

hoverbox.css("opacity","0.3")

time =setTimeout(function(){Zoom(imgbox,hoverbox,l,t,x,y,w,h,showbox)},1)

}).mousemove(function(e){

var x=e.pageX;

var y=e.pageY;

time =setTimeout(function(){Zoom(imgbox,hoverbox,l,t,x,y,w,h,showbox)},1)

}).mouseout(function(){

showbox.parent().hide()

hoverbox.hide();

})

}

$(function(){

Zoomhover($(".probox img"),$(".hoverbox"),$(".showbox img"));

})