基于jquery的放大鏡效果
更新時間:2012年05月30日 01:24:00 作者:
基于jquery的放大鏡效果實現(xiàn)代碼,需要的朋友可以參考下
核心代碼:
$(function(){
var mouseX = 0; //鼠標移動的位置X
var mouseY = 0; //鼠標移動的位置Y
var maxLeft = 0; //最右邊
var maxTop = 0; //最下邊
var markLeft = 0; //放大鏡移動的左部距離
var markTop = 0; //放大鏡移動的頂部距離
var perX = 0; //移動的X百分比
var perY = 0; //移動的Y百分比
var bigLeft = 0; //大圖要移動left的距離
var bigTop = 0; //大圖要移動top的距離
//改變放大鏡的位置
function updataMark($mark){
//通過判斷,讓小框只能在小圖區(qū)域中移動
if(markLeft<0){
markLeft = 0;
}else if(markLeft>maxLeft){
markLeft = maxLeft;
}
if(markTop<0){
markTop = 0;
}else if(markTop>maxTop){
markTop = maxTop;
}
//獲取放大鏡的移動比例,即這個小框在區(qū)域中移動的比例
perX = markLeft/$(".small").outerWidth();
perY = markTop/$(".small").outerHeight();
bigLeft = -perX*$(".big").outerWidth();
bigTop = -perY*$(".big").outerHeight();
//設定小框的位置
$mark.css({"left":markLeft,"top":markTop,"display":"block"});
}
//改變大圖的位置
function updataBig(){
$(".big").css({"display":"block","left":bigLeft,"top":bigTop});
}
//鼠標移出時
function cancle(){
$(".big").css({"display":"none"});
$(".mark").css({"display":"none"});
}
//鼠標小圖上移動時
function imgMouseMove(event){
var $this = $(this);
var $mark = $(this).children(".mark");
//鼠標在小圖的位置
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);
})
這個里面主要有二點
1.如何大圖跟隨"放大鏡"的位置,同時移動大圖?
其實就是用到一個比例關系,當“放大鏡”移動多少比例(是比例,不是具體值),大圖也同時用這個比例去乘以大圖的寬和高,就可以算出大圖該移動多少距離了;
2.顯示區(qū)域和放大鏡的關系?
這里的“放大鏡”應該和大圖的顯示區(qū)域的比例,應該是大圖和小的比例關系一樣。比如大圖和小圖的比例是1:2,那個“放大鏡”區(qū)域的大小,和顯示大圖區(qū)域的大小比例也應該是1:2,不然“放大鏡”罩住的小圖區(qū)域,和大圖的顯示區(qū)域,所顯示的圖像信息,不能保持一致。(妙味課堂里講的那個實例,就是沒有保持一至);
在線演示:http://demo.jb51.net/js/2012/mymagnifier/
打包下載:http://www.dbjr.com.cn/jiaoben/45315.html
復制代碼 代碼如下:
$(function(){
var mouseX = 0; //鼠標移動的位置X
var mouseY = 0; //鼠標移動的位置Y
var maxLeft = 0; //最右邊
var maxTop = 0; //最下邊
var markLeft = 0; //放大鏡移動的左部距離
var markTop = 0; //放大鏡移動的頂部距離
var perX = 0; //移動的X百分比
var perY = 0; //移動的Y百分比
var bigLeft = 0; //大圖要移動left的距離
var bigTop = 0; //大圖要移動top的距離
//改變放大鏡的位置
function updataMark($mark){
//通過判斷,讓小框只能在小圖區(qū)域中移動
if(markLeft<0){
markLeft = 0;
}else if(markLeft>maxLeft){
markLeft = maxLeft;
}
if(markTop<0){
markTop = 0;
}else if(markTop>maxTop){
markTop = maxTop;
}
//獲取放大鏡的移動比例,即這個小框在區(qū)域中移動的比例
perX = markLeft/$(".small").outerWidth();
perY = markTop/$(".small").outerHeight();
bigLeft = -perX*$(".big").outerWidth();
bigTop = -perY*$(".big").outerHeight();
//設定小框的位置
$mark.css({"left":markLeft,"top":markTop,"display":"block"});
}
//改變大圖的位置
function updataBig(){
$(".big").css({"display":"block","left":bigLeft,"top":bigTop});
}
//鼠標移出時
function cancle(){
$(".big").css({"display":"none"});
$(".mark").css({"display":"none"});
}
//鼠標小圖上移動時
function imgMouseMove(event){
var $this = $(this);
var $mark = $(this).children(".mark");
//鼠標在小圖的位置
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);
})
這個里面主要有二點
1.如何大圖跟隨"放大鏡"的位置,同時移動大圖?
其實就是用到一個比例關系,當“放大鏡”移動多少比例(是比例,不是具體值),大圖也同時用這個比例去乘以大圖的寬和高,就可以算出大圖該移動多少距離了;
2.顯示區(qū)域和放大鏡的關系?
這里的“放大鏡”應該和大圖的顯示區(qū)域的比例,應該是大圖和小的比例關系一樣。比如大圖和小圖的比例是1:2,那個“放大鏡”區(qū)域的大小,和顯示大圖區(qū)域的大小比例也應該是1:2,不然“放大鏡”罩住的小圖區(qū)域,和大圖的顯示區(qū)域,所顯示的圖像信息,不能保持一致。(妙味課堂里講的那個實例,就是沒有保持一至);
在線演示:http://demo.jb51.net/js/2012/mymagnifier/
打包下載:http://www.dbjr.com.cn/jiaoben/45315.html
相關文章
jQuery使用$.get()方法從服務器文件載入數(shù)據(jù)實例
這篇文章主要介紹了jQuery使用$.get()方法從服務器文件載入數(shù)據(jù),較為簡單的分析了jQuery中get方法的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03jQGrid Table操作列中點擊【操作】按鈕彈出按鈕層的實現(xiàn)代碼
在使用JqGrid時,Table中最后一列是操作列,在操作列中每一行都有一個操作按鈕,該操作按鈕和下拉菜單非常類似,下面給大家分享jQGrid Table操作列中點擊【操作】按鈕彈出按鈕層的實現(xiàn)代碼,非常不錯,感興趣的朋友一起學習吧2016-12-12jQuery中fadeIn、fadeOut、fadeTo的使用方法(圖片顯示與隱藏)
jQuery中fadeIn、fadeOut、fadeTo的使用方法(圖片顯示與隱藏),需要的朋友可以參考一下2013-05-05詳解JavaScript for循環(huán)中發(fā)送AJAX請求問題
這篇文章主要為大家剖析了JavaScript for循環(huán)中發(fā)送AJAX請求問題,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-03-03