基于jquery的放大鏡效果
更新時(shí)間:2012年05月30日 01:24:00 作者:
基于jquery的放大鏡效果實(shí)現(xiàn)代碼,需要的朋友可以參考下
核心代碼:
$(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
復(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)文章
jQuery使用$.get()方法從服務(wù)器文件載入數(shù)據(jù)實(shí)例
這篇文章主要介紹了jQuery使用$.get()方法從服務(wù)器文件載入數(shù)據(jù),較為簡(jiǎn)單的分析了jQuery中g(shù)et方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03jQGrid Table操作列中點(diǎn)擊【操作】按鈕彈出按鈕層的實(shí)現(xiàn)代碼
在使用JqGrid時(shí),Table中最后一列是操作列,在操作列中每一行都有一個(gè)操作按鈕,該操作按鈕和下拉菜單非常類似,下面給大家分享jQGrid Table操作列中點(diǎn)擊【操作】按鈕彈出按鈕層的實(shí)現(xiàn)代碼,非常不錯(cuò),感興趣的朋友一起學(xué)習(xí)吧2016-12-12關(guān)于html+ashx開發(fā)中幾個(gè)問題的解決方法
在跟html+ashx打交道的園友們肯定會(huì)發(fā)現(xiàn),這種模式雖然優(yōu)美,但在開發(fā)中會(huì)遇到一些難處理的地方。我也不例外,下面是自己在實(shí)際開發(fā)中總結(jié)出來的幾條經(jīng)驗(yàn),希望跟大家分享,更希望得到大家的建議和更好的解決方法!2011-07-07jQuery中fadeIn、fadeOut、fadeTo的使用方法(圖片顯示與隱藏)
jQuery中fadeIn、fadeOut、fadeTo的使用方法(圖片顯示與隱藏),需要的朋友可以參考一下2013-05-05詳解JavaScript for循環(huán)中發(fā)送AJAX請(qǐng)求問題
這篇文章主要為大家剖析了JavaScript for循環(huán)中發(fā)送AJAX請(qǐng)求問題,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03