文章导航

jQuery 放大镜效果详解

2019-2-14 23:34| 作者: admin| 查看: 50| 评论: 0|来自: 凯博

放大镜效果在很多网站都在使用,尤其在图片类型网站或者购物网站。

当然实现放大镜效果的方式有多种,这里仅仅是提供一种思路。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码




凯博

/index.html



一.实现原理:

原理特别的简单,两张等比例的图片,一张是小图,一张是大图,当鼠标在小图中移动的时候会出现一个半透明的遮罩图片,用来标识要放大的区域,这个时候就根据相应的比例,在另一个区域调整大图的left和top属性值,来显示相应的位置,原理大致如此,具体可以参阅代码注释,再加以思考,应该很容易弄明白。

二.代码注释:

(1).$(function(){}),当文档结构完全加载完毕之后再去执行函数中的代码。

(2).var mouseX=0,声明一个变量用来存放半透明遮罩框的左边缘距离small元素的距离。

(3).var mouseY=0,声明一个变量用来存放半透明遮罩框的上边缘距离small元素的距离。

(4).var maxLeft=0,声明一个变量用来存放半透明遮罩框左边缘距离samll元素的最大距离。

(5).var maxTop=0,声明一个变量用来存放半透明遮罩框的上边缘距离small元素的最大距离。

(6).var markLeft=0,用来存放mouseX值。

(7).var markTop=0,用来存放mouseY值。

(8).var perX=0,用来存放mouseX与samll元素宽度的比例。

(9).var perY=0,用来存放mouseY与samll元素高度的比例。

(10).var bigLeft=0,用来存放big元素left属性值。

(11).var bigTop=0,用来存放big元素的top属性值。

(12).function updataMark($mark){},此函数可以控制办透明遮罩层的位置,参数为半透明对象。

(13).if(markLeft<0){markLeft = 0;},如果半透明遮罩框左边缘超出small元素的左边缘,则将markLeft值设置为0,也就是让半透明遮罩层贴在samll元素内壁上。

(14).else if(markLeft>maxLeft){markLeft=maxLeft;},如果半透明遮罩层右边缘超出small元素的右边缘,则将markLeft设置为maxLeft,也就是让半透明遮罩层贴在small元素的右侧内壁。

(15).perX=markLeft/$(".small").outerWidth(),可以计算出半透明遮罩层在small元素中向左移动的尺寸占small元素宽度的比例,使用这个值再乘以大图的尺寸就可以计算出大图相应的移动尺寸,这样可以确保放大位置和右侧出现的放大位置对应。

(16).perY=markTop/$(".small").outerHeight(),和上面同样的道理。

(17).bigLeft=-perX*$(".big").outerWidth(),计算出big元素左移的尺寸,其实也就是图片左移的尺寸。

(18).bigTop=-perY*$(".big").outerHeight(),和上面同样的道理。

(19).$mark.css({"left":markLeft,"top":markTop,"display":"block"}),设置半透明遮罩框的位置,并将其设为可见。

(20).function updataBig(){},设置big元素的定位坐标。

(21).$(".big").css({"display":"block","left":bigLeft,"top":bigTop}),设置big元素的left和top属性值,并将其设置为可见。

(22).function cancle(){},规定当鼠标移出时的操作。

(23).$(".big").css({"display":"none"}),将big设置为隐藏。

(24).$(".mark").css({"display":"none"}),将半透明遮罩层设置为隐藏。

(25).function imgMouseMove(event){},当鼠标移动时,用来设定遮罩层的坐标。

(26).var $this=$(this),鼠标移动所在的对象。

(27).var $mark=$(this).children(".mark"),获取半透明遮罩框对象。

(28).mouseX=event.pageX-$this.offset().left-$mark.outerWidth()/2,设置半透明遮罩框的左边缘距离samll元素的距离,使用这种方式也可以将鼠标指针位于遮罩框水平中心位置。

(29).mouseY=event.pageY-$this.offset().top-$mark.outerHeight()/2,和上面同样的道理。

(30).maxLeft=$this.width()-$mark.outerWidth(),获取半透明遮罩框左边缘距离samll元素的最大距离。

(31).maxTop=$this.height()-$mark.outerHeight(),半透明遮罩框的上边缘距离small元素的最大距离。

(32).$(".small").bind("mousemove",imgMouseMove).bind("mouseleave",cancle),事件处理函数的绑定。

三.相关阅读:

(1).css()参阅jQuery css()方法一章节。

(2).event.pageX参阅jQuery event.pageX属性一章节。

(3).event.pageY参阅jQuery event.pageY属性一章节。

(4).offset()参阅jQuery offset()方法一章节。

(5).outerWidth()参阅jQuery outerWidth()方法一章节。

(6).outerHeight()参阅jQuery outerHeight()方法一章节。

(7).width()参阅jQuery width()方法一章节。

(8).height()参阅jQuery height()方法一章节。

最新评论

返回顶部