仿TAOBAOUED放大镜功能插件

最近比较空，经常会上网搜一些前端的技术类文章充实自己，淘宝UED部门的文章自然是比不可少的，看国内前端大牛们的文章每次都有不小的收获，在首页“About”栏目里面有个其UED部门的照片墙，链接为：http://ued.taobao.com/blog/about/效果为：当鼠标放到照片墙上时，即可在一个DIV里看到图片的放大效果。想想实现起来应该不是很难，就仿造着写了一个。原理是：当鼠标放到照片墙上时，显示要跟踪的DIV，跟踪鼠标的X和Y的坐标值，让生成的DIV和里面的图片随着鼠标移动而移动。具体代码如下：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 7 <script type="text/javascript">
 8 $(document).ready(function(){
 9     //设置加入图片的长宽
10     var _org_width = 1300;
11     var _org_height = 2128;
12     var _div_width = $("#showBigImgBox").width()/2;
13     var _div_height = $("#showBigImgBox").height()/2;
14     //页面中图片与原始图片的倍数
15     var _multiple = _org_width/$("#showImgBox img:first-child").width();
16     //原始图片的地址
17     var _href = $("#showImgBox img:first-child").attr("src");
18     
19     $("#showImgBox").mousemove(function(e){
20         //跟踪鼠标的X和Y坐标
21         var _moveX = e.pageX-$("#showImgBox").offset().left;
22         var _moveY = e.pageY-$("#showImgBox").offset().top;
23         //DIV内部图片的偏移值
24         var _imgmoveX = -(_moveX*_multiple)+_div_width*2;
25         var _imgmoveY = -(_moveY*_multiple)+_div_height*2;
26         //当鼠标在图片内部时显示放大镜DIV
27         if((_moveX>0)&&(_moveX<_org_width/_multiple)&&(_moveY>0)&&(_moveY<_org_height/_multiple))
28         {
29             $("#showBigImgBox").fadeIn(200);
30         }else{
31             $("#showBigImgBox").fadeOut(200);
32         }
33         //设置放大镜DIV的属性
34         $("#showBigImgBox").css({
35             top:(_moveY-_div_height)+"px",
36             left:(_moveX-_div_width)+"px",
37             background:"url("+_href+") no-repeat",
38             backgroundPosition: _imgmoveX+"px "+_imgmoveY+"px"
39         });
40         
41 });
42     
43 })
44 
45 </script>
46 </head>
47 
48 <body>
49 <div id="showImgBox" style="width:700px; height:1100px;">
50     <img src="b.jpg" width="650" height="1064" style="margin:50px"/>
51     <div id="showBigImgBox" style="position:absolute; border:3px solid #000; width:300px; height:300px; overflow:hidden; background-color:#F00; display:none;"></div>
52 </div>
53 
54 </body>
55 </html>

 写完以后发现,虽然功能完成了,但是代码的耦合性很不好,既然是插件么,肯定要具有通用性,上面的代码通用性太差,只能在当前页面使用.由于之前没怎么写过插件,找了下JQuery的相关文档，发现其内置了扩展函数，所以将代码改下成如下形式。

 

 主页面:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>TBMagnifier</title>
 6 <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
 7 <script type="text/javascript" src="jquery.TBMagnifier.js"></script>
 8 <script type="text/javascript">
 9 $(document).ready(function(){
10         $("#ShowPictureBox").TBMagnifier({
11             picID:"#ShowPictureBox",
12             picWidth:1300,
13             picHeight:2128,
14             divWidth:250,
15             divHeight:250
16         });
17 });
18 </script>
19 </head>
20 
21 <body>
22  <div id="ShowPictureBox" style="width:650px;">
23    <img src="b.jpg" width="650" height="1064" />
24 </div>
25 </body>
26 </html>

jquery.TBMagnifier.js:

 1 /*
 2 *
 3 * JQUERY 仿TaoBaoUED放大镜插件
 4 * Author:SunandSing
 5 * Date:2012-11-23
 6 *
 7 */
 8 
 9 (function($){
10     //$.fn = jQuery.fn = jQuery.prototype 
11     $.fn.TBMagnifier = function(settings){
12         var _zipimg;
13         if(settings&&settings.picID&&settings.picWidth&&settings.picHeight){
14             if(typeof(settings.picID)=="string"&&typeof(settings.picWidth)=="number"&&typeof(settings.picHeight)=="number"&&typeof(settings.divWidth)=="number"&&typeof(settings.divHeight)=="number"){
15                 _zipimg = $(settings.picID).children("img");
16             }
17         }else{
18             return;
19         }
20         var _orgwidth = settings.picWidth;
21         var _orgheight = settings.picHeight;
22         var _divwidth = settings.divWidth;
23         var _divheight = settings.divHeight;
24         var _multiple = Math.round(_orgwidth/_zipimg.width());
25         var _href = _zipimg.attr("src");
26         
27         //生成放大镜DIV并设置初始属性
28         $(this).append("<div id='bigImg'></div>");
29         
30         $("#bigImg").css({
31             width:_divwidth,
32             height:_divheight,
33             border:"#ccc 5px solid",
34             position:"absolute",
35             background:"red",
36             display:"none"
37         });
38         $(this).mousemove(function(e){
39             var _moveX = e.pageX-$(this).offset().left;
40             var _moveY = e.pageY-$(this).offset().top;
41             var _imgmoveX = -(_moveX*_multiple)+_divwidth/2;
42             var _imgmoveY = -(_moveY*_multiple)+_divheight/2;
43             if((_moveX>0)&&(_moveX<_zipimg.width())&&(_moveY>0)&&(_moveY<_zipimg.height()))
44             {
45                 $("#bigImg").fadeIn(200);
46             }else{
47                 $("#bigImg").fadeOut(200);
48             }
49             
50             $("#bigImg").css({
51                 top:(_moveY-_divheight/2)+"px",
52                 left:(_moveX-_divwidth/2)+"px",
53                 background:"url("+_href+") no-repeat",
54                 backgroundPosition: _imgmoveX+"px "+_imgmoveY+"px"
55             });
56         })
57         
58     }
59 })(jQuery);

 改写完成以后,在主页面中只要写插件调用时的几个属性即可,做到了显示和行为的分离.

posted @ 2012-11-23 21:09  SunandSing  阅读(309)  评论(0)    收藏  举报