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