欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于jquery的放大鏡效果

 更新時(shí)間:2012年05月30日 01:24:00   作者:  
基于jquery的放大鏡效果實(shí)現(xiàn)代碼,需要的朋友可以參考下
核心代碼:
復(fù)制代碼 代碼如下:

$(function(){
var mouseX = 0; //鼠標(biāo)移動(dòng)的位置X
var mouseY = 0; //鼠標(biāo)移動(dòng)的位置Y
var maxLeft = 0; //最右邊
var maxTop = 0; //最下邊
var markLeft = 0; //放大鏡移動(dòng)的左部距離
var markTop = 0; //放大鏡移動(dòng)的頂部距離
var perX = 0; //移動(dòng)的X百分比
var perY = 0; //移動(dòng)的Y百分比
var bigLeft = 0; //大圖要移動(dòng)left的距離
var bigTop = 0; //大圖要移動(dòng)top的距離
//改變放大鏡的位置
function updataMark($mark){
//通過判斷,讓小框只能在小圖區(qū)域中移動(dòng)
if(markLeft<0){
markLeft = 0;
}else if(markLeft>maxLeft){
markLeft = maxLeft;
}

if(markTop<0){
markTop = 0;
}else if(markTop>maxTop){
markTop = maxTop;
}
//獲取放大鏡的移動(dòng)比例,即這個(gè)小框在區(qū)域中移動(dòng)的比例
perX = markLeft/$(".small").outerWidth();
perY = markTop/$(".small").outerHeight();
bigLeft = -perX*$(".big").outerWidth();
bigTop = -perY*$(".big").outerHeight();
//設(shè)定小框的位置
$mark.css({"left":markLeft,"top":markTop,"display":"block"});
}
//改變大圖的位置
function updataBig(){
$(".big").css({"display":"block","left":bigLeft,"top":bigTop});
}
//鼠標(biāo)移出時(shí)
function cancle(){
$(".big").css({"display":"none"});
$(".mark").css({"display":"none"});
}
//鼠標(biāo)小圖上移動(dòng)時(shí)
function imgMouseMove(event){
var $this = $(this);
var $mark = $(this).children(".mark");
//鼠標(biāo)在小圖的位置
mouseX = event.pageX-$this.offset().left - $mark.outerWidth()/2;
mouseY = event.pageY-$this.offset().top - $mark.outerHeight()/2;
//最大值
maxLeft =$this.width()- $mark.outerWidth();
maxTop =$this.height()- $mark.outerHeight();
markLeft = mouseX;
markTop = mouseY;
updataMark($mark);
updataBig();
}

$(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle);
})


這個(gè)里面主要有二點(diǎn)

1.如何大圖跟隨"放大鏡"的位置,同時(shí)移動(dòng)大圖?

其實(shí)就是用到一個(gè)比例關(guān)系,當(dāng)“放大鏡”移動(dòng)多少比例(是比例,不是具體值),大圖也同時(shí)用這個(gè)比例去乘以大圖的寬和高,就可以算出大圖該移動(dòng)多少距離了;

2.顯示區(qū)域和放大鏡的關(guān)系?

這里的“放大鏡”應(yīng)該和大圖的顯示區(qū)域的比例,應(yīng)該是大圖和小的比例關(guān)系一樣。比如大圖和小圖的比例是1:2,那個(gè)“放大鏡”區(qū)域的大小,和顯示大圖區(qū)域的大小比例也應(yīng)該是1:2,不然“放大鏡”罩住的小圖區(qū)域,和大圖的顯示區(qū)域,所顯示的圖像信息,不能保持一致。(妙味課堂里講的那個(gè)實(shí)例,就是沒有保持一至);

在線演示:http://demo.jb51.net/js/2012/mymagnifier/
打包下載:http://www.dbjr.com.cn/jiaoben/45315.html

相關(guān)文章

最新評(píng)論