| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
dengjianbin
11年前发布

原创Jquery实现图片放大镜插件

此Jquery插件是一款非常实用的功能，是商城不可缺少的神兵利器之一，主要是显示小图片预览大图片效果。

主要设置4个参数：

1、需要放大的区域

2、放大镜宽高

3、需要放大的区域宽高

4、需要放大的区域的图片的宽高

   

插件初始化代码如下： 

;(function($){   $.fn.simpleZoom = function(options){    var defs = {     zoomBox : "#zoomBox",   //需要放大的区域     markSize : [200, 100],   //放大镜宽高     zoomSize : [400, 400],   //需要放大的区域宽高     zoomImg : [800, 800]   //需要放大的区域的图片的宽高    };    var opt = $.fn.extend({}, defs, options);    return this.each(function(){     var markBox = $(this);     var zoomBox = $(opt.zoomBox);     var zoom_img = $(opt.zoomBox).find("img");      var markBoxSize = [markBox.width(), markBox.height(), markBox.offset().left, markBox.offset().top];     var markSize = opt.markSize;     var zoomSize = opt.zoomSize;     var zoomImg = opt.zoomImg;     var mark_ele = "<i id='mark'></i>";     var mark_css = {position:"absolute", top:0, left:0, width:markSize[0]+"px", height:markSize[1]+"px", backgroundColor:"#000", opacity:.5, filter:"alpha(opacity=50)",  display:"none", cursor:"crosshair"};          var show_w = markBoxSize[0]-markSize[0];     var show_h = markBoxSize[1]-markSize[1];       //created mark element and add cascading style sheets     zoomBox.css({width:zoomSize[0]+"px", height:zoomSize[1]+"px"});     markBox.append(mark_ele);     $("#mark").css(mark_css);       markBox.mouseover(function(){      $("#mark").show();      zoomBox.show();     }).mouseout(function(){      $("#mark").hide();      zoomBox.hide();     }).mousemove(function(e){      var l = e.pageX-markBoxSize[2]-(markSize[0]/2);      var t = e.pageY-markBoxSize[3]-(markSize[1]/2);      if(l < 0){       l = 0;      }else if(l > show_w){       l = show_w;      }      if(t < 0){       t = 0;      }else if(t > show_h){       t = show_h;      }        $("#mark").css({left:l+"px", top:t+"px"});            var z_x = -(l/show_w)*(zoomImg[0]-zoomSize[0]);      var z_y = -(t/show_h)*(zoomImg[1]-zoomSize[1]);      zoom_img.css({left:z_x+"px", top:z_y+"px"});     });    });   }  })(jQuery);


</div>
1 $(function(){   
2     $("#show").simpleZoom({
3         zoomBox : "#zoom",
4         markSize : [120, 169],
5         zoomSize : [240, 338],
6         zoomImg : [480, 677]
7     });
8 });
</div> </div>

效果如下：

网友sole分享原创Jquery实现图片放大镜插件

在线演示和下载

 本文由用户 dengjianbin 自行上传分享，仅供网友学习交流。所有权归原作者，若您的权利被侵害，请联系管理员。
 转载本站原创文章，请注明出处，并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台，欢迎各类分享！