Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 基于jquery的放大镜效果

基于jquery的放大镜效果

发布时间:2013-05-24   编辑:www.jquerycn.cn
基于jquery的放大镜效果实现代码,需要的朋友可以参考下
基于jquery的放大镜效果实现代码,需要的朋友可以参考下 核心代码:
复制代码 代码如下:

$(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){
//通过判断,让小框只能在小图区域中移动
if(markLeft<0){
markLeft = 0;
}else if(markLeft>maxLeft){
markLeft = maxLeft;
}

if(markTop<0){
markTop = 0;
}else if(markTop>maxTop){
markTop = maxTop;
}
//获取放大镜的移动比例,即这个小框在区域中移动的比例
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.显示区域和放大镜的关系?

这里的“放大镜”应该和大图的显示区域的比例,应该是大图和小的比例关系一样。比如大图和小图的比例是1:2,那个“放大镜”区域的大小,和显示大图区域的大小比例也应该是1:2,不然“放大镜”罩住的小图区域,和大图的显示区域,所显示的图像信息,不能保持一致。(妙味课堂里讲的那个实例,就是没有保持一至);

在线演示:http://demo.jb51.net/js/2012/mymagnifier/
打包下载:http://www.jb51.net/jiaoben/45315.html

您可能感兴趣的文章:
jQuery图片放大镜插件 magnifier
基于jquery的放大镜效果
jQuery的图片放大器插件 jQzoom
关于Jqzoom的使用心得 jquery放大镜效果插件
什么是canvas离屏技术?canvas放大镜效果如何实现?
canvas离屏技术与放大镜实现代码示例
photoshop制作MV常见的分散镜面效果教程
jQuery 图片放大镜效果插件jQZoom的用法举例
Canvas实现放大镜效果
基于Jquery插件开发之图片放大镜效果(仿淘宝)

[关闭]