jquery插件：放大镜 #39

mishe · 2015-12-03T05:37:28Z

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>放大镜</title>

 <style type="text/css">

 /* basic */

 body { background:#f9f9f9; margin:0 auto; font:12px/24px tahoma, Helvetica, Arial; text-align:center; }

 body,iframe,div,p,h1,h2,h3,h4,h5,h6,fieldset,ul,dl,dt,dd,form,input,button,textarea,select,i { margin:0px; padding:0px; font-weight:normal; }

 img {border:none; }

 .main{ font:12px/24px "Microsoft YaHei"; width:960px; margin:100px auto; position:relative; text-align:left; }

 .main:after{ content:""; clear:both; display:table; }

 #zoomPic{ width:400px; height:400px; position:relative; left:0; }



 </style>



 </head>



 <body>

 <div class="main">

     <div id="zoomPic"  bigSrc="http://p1.vanclimg.com/product/0/1/8/0180997/big/0180997-1j201208211605141213.jpg">

         <img src="http://p1.vanclimg.com/product/0/1/8/0180997/mid/0180997-1j201208211605141213.jpg" id="show_pic" />

     </div>

 </div>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

 <script type="text/javascript">



     $.fn.extend({

         simpleZoom:function(options){

             var opt= {

                 markSize : [200, 100],          //放大镜宽高

                 zoomSize : [400, 400],          //需要放大的区域宽高

                 zoomImg : [800, 800]            //需要放大的区域的图片的宽高

             };

             opt = $.extend(opt, options);

             return this.each(function(){

                 var markBox = $(this),

                         bigSrc=markBox.attr('bigSrc'),

                         markBoxSize = [markBox.width(), markBox.height(), markBox.offset().left, markBox.offset().top],

                         mask = $("<i></i>"),

                         markCss = {position:"absolute", top:0, left:0, width:opt.markSize[0], height:opt.markSize[1], backgroundColor:"#000", opacity:.5, filter:"alpha(opacity=50)",  display:"none", cursor:"crosshair"},

                         zoomCss = {position:"absolute", top:0, left:markBoxSize[0], width:opt.zoomSize[0], height:opt.zoomSize[1],display:"none",overflow:"hidden"},

                         zoomBox =$('<div><img src="'+bigSrc+'" style="position:absolute"></div>'),

                         show_w = markBoxSize[0]-opt.markSize[0],

                         show_h = markBoxSize[1]-opt.markSize[1];

    //             new Image(bigSrc);//预加载大图；

                 markBox.append(mask);

                 mask.css(markCss);

                 zoomBox.css(zoomCss)

                 markBox.append(zoomBox);

                 markBox.mouseover(function(){

                     mask.show();

                     zoomBox.show();

                 }).mouseout(function(){

                             mask.hide();

                             zoomBox.hide();

                         }).mousemove(function(e){

                             var l = e.pageX-markBoxSize[2]-(opt.markSize[0]/2),

                                     t = e.pageY-markBoxSize[3]-(opt.markSize[1]/2);

                             l=l<0?0:(l>show_w?show_w:l)

                             t=t<0?0:(t>show_h?show_h:t)

                             mask.css({left:l, top:t});

                             var z_x = -(l/show_w)*(opt.zoomImg[0]-opt.zoomSize[0]),

                                     z_y = -(t/show_h)*(opt.zoomImg[1]-opt.zoomSize[1]);

                             zoomBox.find("img").css({left:z_x, top:z_y});

                         });

             });

         }

     })

 $(function(){



     $("#zoomPic").simpleZoom({

         markSize : [100, 100],

         zoomSize : [400, 400],

         zoomImg : [800, 800]

     });

 });



(function($){



 })(jQuery);



 </script>

 </body>

 </html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jquery插件：放大镜 #39

jquery插件：放大镜 #39

mishe commented Dec 3, 2015

jquery插件：放大镜 #39

jquery插件：放大镜 #39

Comments

mishe commented Dec 3, 2015