使用jquery实现放大镜效果
实现原理
首先,我们讲解一下放大镜效果的实现方式:
方法一:准备一张高像素的大图,当鼠标放到原图上,加载显示大图的对应位置。
方法二:对原图片进行放大,也就是调整原图的长和宽。
上面我们介绍了通过两种方式实现放大镜效果,接下来,我们将以上的两种方式应用到我们的jQuery插件中。
首先,我们需要一个img元素显示原图对象,还需要一个容器作为显示框;显示框里面存放大图对象。当鼠标移动到原图上时,通过对大图进行绝对定位来显示对应的部位,实现类似放大镜的效果。
接下来,让我们定义Index.html页面,具体实现如下:
<!DOCTYPEhtml> <html> <head> <title>放大镜效果</title> <metacharset="utf-8"/> <metaname="description"content=""/> <metaname="keywords"content=""/> <linktype="text/css"rel="stylesheet"href="css/reset.css"/> <linktype="text/css"rel="stylesheet"href="css/main.css"/> <scripttype="text/javascript"src="js/jquery-1.11.1.js"></script> <scripttype="text/javascript"src="js/jquery.imageZoom.js"></script> </head> <body> <divclass="magnify"> <divclass="large"></div> <imgclass="small"src="images/iphone.jpg"width="200"/> </div> <divclass="magnify_02"> <divclass="large_02"></div> <imgclass="small_02"src="images/img5.jpg"width="400"/> </div> <scripttype="text/javascript"> $(function(){ $(".magnify").hover(function(){ $.fn.imageZoom({ small:"small", large:"large", magnify:"magnify" }); },function(){}) $(".magnify_02").hover(function(){ $.fn.imageZoom({ small:"small_02", large:"large_02", magnify:"magnify_02" }); },function(){}) }) </script> </body> </html>
css样式:
.magnify{width:200px;margin:50pxauto;position:relative;} .large{width:175px;height:175px;position:absolute;border-radius:100%;z-index:99;box-shadow:0007pxrgba(255,255,255,0.85),007px7pxrgba(0,0,0,0.25),inset0040px2pxrgba(0,0,0,0.25);background:url("../images/iphone.jpg")no-repeat;display:none;} .small{display:block;} .magnify_02{width:400px;margin:50pxauto;position:relative;} .large_02{width:175px;height:175px;position:absolute;border-radius:100%;z-index:99;box-shadow:0007pxrgba(255,255,255,0.85),007px7pxrgba(0,0,0,0.25),inset0040px2pxrgba(0,0,0,0.25);background:url("../images/iphone.jpg")no-repeat;display:none;} .small_02{display:block;}
mousemove事件
接下来,我们通过jQuery插件形式来实现放大镜效果,当鼠标移动到small对象上方时,就会在large对象中显示大图的对应位置,这就涉及到mousemove事件了,所以,我们需要实现mousemove事件的监听方法。
实现jquery.imagezoom.js插件:
(function($){ $.fn.imageZoom=function(options){ vardefaults={ scaling:0.3, small:"small", large:"large", magnify:"magnify" }; options=$.extend(defaults,options), native_width=0, native_height=0, current_width=0, current_height=0, magnify="."+options.magnify; small="."+options.small; $small=$(small); large="."+options.large; $large=$(large); $(magnify).mousemove(function(e){ varimage_object=newImage(); image_object.src=$small.attr("src"); if(!+[1,]){ native_height=image_object.height; native_width=image_object.width; } else{ image_object.onload=function(){ image_object.onload=null; native_height=image_object.height; native_width=image_object.width; } } current_height=$small.height(); current_width=$small.width(); varmagnify_offset=$(this).offset(); varmx=e.pageX-magnify_offset.left; varmy=e.pageY-magnify_offset.top; if(mx<$(this).width()&&my<$(this).height()&&mx>0&&my>0){ $large.fadeIn(100); }else{ $large.fadeOut(100); } if($large.is(":visible")){ varrx=Math.round(mx/$small.width()*native_width-$large.width()/2)*-1, ry=Math.round(my/$small.height()*native_height-$large.height()/2)*-1, bgp=rx+"px"+ry+"px", px=mx-$large.width()/2, py=my-$large.height()/2; $large.css({ left:px, top:py, backgroundPosition:bgp }); } //} }); }; })(jQuery);
注释:当鼠标移动到magnify对象中,我们需要获取鼠标在magnify中的相对坐标位置,这里我们把相对坐标定义为(mx,my),通过上图我们知道相对坐标等于(pageX-offsetLeft,pageY-offsetTop)。
现在,我们已经获取鼠标在magnify对象中的坐标值,接下来,需要获取对应大图的相应坐标,这里我们把大图的对应坐标定义为(rx,ry),我们可以通过比例关系获取(rx,ry)的值。
mx/small.width(原图的宽)=rx/native_width(大图的宽)
my/small.height(原图的长)=ry/native_height(大图的长)
通过上面的比例关系,我们知道大图的坐标(rx,ry)等于(mx/small.widthnative_width,my/small.heightnative_height)。
mousewheel事件
前面,我们通过mousemove事件来放大图片,这里我们将通过鼠标的滚轮事件实现图片放大效果。
由于,不同的浏览器有不同的滚轮事件。主要是有三种:onmousewheel(IE6/7/8)、mousewheel(IE9,Chrome,Safari和Opera)和DOMMouseScroll(只有Firefox支持),关于这三个事件这里不做详细的介绍了。
由于不同浏览器之间存在着差异,为了实现浏览器之间的兼容,所以,我们需要监听以上三种滚轮事件(onmousewheel,mousewheel和DOMMouseScroll),具体实现如下:
上面,我们实现了兼容不同浏览器的滚轮事件监听方法,接下来,判断滚轮向上或向下也要考虑不同浏览器的兼容性,主流的览器(IE、Opera、Safari、Firefox、Chrome)中Firefox使用detail,其余四类使用wheelDelta;两者只在取值上不一致,代表含义一致,detail与wheelDelta只各取两个值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。
由于detail和wheelDelta都有两个值表示向上或向下滚动,所以不同浏览器间可以通过以下方式实现兼容,具体实现如下:
$(".magnify").bind("DOMMouseScrollmousewheelonmousewheel",function(e){ //cross-browserwheeldelta vare=window.event||e;//oldIEsupport. vardelta=Math.max(-1,Math.min(1,(e.wheelDelta||-e.detail))); });
上面,我们已经处理了不同浏览器滚轮监听方法,当用户滚动滚轮时需要动态地修改原图的尺寸,这里我们定义缩放比scaling为0.3,也就是说每当用户滚动一下滚轮原图就按0.3的比例进行缩放,具体实现如下:
//Getstheimagescalingheightandwidth. native_height+=(native_height*scaling*delta); native_width+=(native_width*scaling*delta); //Updatebackgroudimagesize. $large.css("background-size",native_width+"px"+native_height+"px");
上面,我们实现了放大镜效果,当我们鼠标停留在图片上方会自动放大图片的相应部位,当然我们可以通过滚轮调整放大的比例。
参考
http://tech.pro/tutorial/681/css-tutorial-the-background-position-property http://www.sitepoint.com/html5-javascript-mouse-wheel/ http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3
相关文章
- jquery ajax步骤,jquery ajax(ajax请求的五个步骤jQuery)
- 使用 jQuery 插件 CitySelect 实现省市联动效果
- 如何使用Jquery实现复选框的全选详解编程语言
- jquery实现的元素的left增加N像素鼠标移开会慢慢的移动到原来的位置
- 用JQuery调用Session的实现代码
- 基于jquery的lazyloader插件实现图片的延迟加载[简单使用]
- 基于jquery实现的鼠标滑过按钮改变背景图片
- 使用jQuery操作Cookies的实现代码
- 用JQuery在网页中实现分隔条功能的代码
- jquery实现checkbox全选,反选,全不选等功能代码(奇数)
- JQuery的ajax的用法在asp中使用$.ajax()实现
- 如何使用jQuery来处理图片坏链具体实现步骤
- 使用jquery实现div的tab切换实例代码
- jquery实现加载等待效果示例
- jQuery借助插件Lavalamp实现导航条动态美化效果
- 利用了jquery的ajax实现二级联互动菜单
- 使用简洁的jQuery方法实现隔行换色功能
- jquery实现不同大小浏览器使用不同的css样式表的方法
- jquery使用ajax实现微信自动回复插件
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- JQuery使用attr方法实现下拉列表选中
- 使用jQuery简单实现模拟浏览器搜索功能
- jquery实现显示已选用户
- jquery实现的鼠标下拉滚动置顶效果
- 使用jquery简单实现下拉菜单
- 使用jQuery实现返回顶部