金沙国际官网 1

废话不多说,先看效果图,和上一章节用的是同一个小图片:

本文实例讲述了基于jQuery插件jqzoom实现的图片放大镜效果。分享给大家供大家参考,具体如下:

废话不多说,先看效果图,和上一章节用的是同一个小图片:

下载源码

在线演示

 

jqzoom插件实现图片放大镜效果。

这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊.但是图片加载的话要比使用2张图片加载的快很多

效果图

还记得上次我们分享的jQuery放大镜效果插件 –
Melens吗?能够帮助你快速简单的搭建类似淘宝中货品大图查看效果。这里继续介绍另外一款超棒的图片缩放(放大镜效果)的jQuery插件

这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊.但是图片加载的话要比使用2张图片加载的快很多

金沙国际官网 2

金沙国际官网 3

 

  • elevateZoom。

 

图1.1jqzoom插件实现图片放大镜效果

插件代码:

以上内容来自Ajax实例站:

主要特性:

 

1、引入jqurty和jqzoom插件

 1  ; (function ($) {
 2             $.fn.gysFdj = function (options) {
 3                 var defaluts = { 
 4                     cameraW: 100, //镜头宽度
 5                     cameraH: 100, //镜头高度
 6                     pointBjColor: "#000", //镜头的背景颜色
 7                     pointOpacity: 0.6, //镜头的透明度
 8                     zoomPos: 10, //放大框距离源框的位置                
 9                     zoom: 2//放大倍数
10                 };
11                 options = $.extend(defaluts, options);
12                 var obj = $(this);               
13                 obj.addClass("gysFdjOrigin");
14                 var objOriImg=$("img",obj);
15                 var objOriImgW=objOriImg.width();
16                 var objOriImgH=objOriImg.height();                
17                 var fdCount = $(".gysFdjOrigin").length;
18                 var fdAttr = "fd"; //属性变量
19                 obj.attr(fdAttr, fdCount); //添加属性
20                 var offset = obj.offset();
21                 var objLeft = offset.left; //对象left                
22                 var objTop = offset.top; //对象top
23                 var objWidth = obj.width(); //对象宽度
24                 var objHeight = obj.height(); //对象高度              
25                 //镜头相对box的活动范围
26 
27                 var cameraMaxLeft = objWidth + objLeft - options.cameraW; //最大左范围
28                 var cameraMaxTop = objHeight + objTop - options.cameraH; //最大下范围
29 
30                 var imgStr = obj.html();
31                 var html = "";
32                 html += "<div style='left:" + (objLeft + objWidth + options.zoomPos) + "px; top:" + objTop + "px;display:none; position:absolute;width:" + (options.cameraW * options.zoom) + "px;height:" + (options.cameraH* options.zoom) + "px;overflow:hidden;' class='gysFdjBox' " + fdAttr + "=" + fdCount + ">" + imgStr + "</div>";
33                 $("body").append(html);
34                 $("img", $(".gysFdjBox[" + fdAttr + "=" + fdCount + "]")).width(objWidth*options.zoom).height(objHeight*options.zoom);
35                 var objFdjcamera = null;
36                 if ($("#gysFdjcamera").length == 0) {
37                     var pointBlock = "<div id='gysFdjcamera' style='width:" + options.cameraW + "px; height:" + options.cameraH + "px; background-color:" + options.pointBjColor + ";opacity:" + options.pointOpacity + ";filter:alpha(opacity="+options.pointOpacity*100+");cursor:crosshair;position:absolute;display:none;'></div>";
38                 $("body").append(pointBlock);                
39                 }
40                 objFdjcamera = $("#gysFdjcamera");
41                 var nowLeft = 0, nowTop = 0;
42                 obj.on("mouseover", function (event) {                   
43                     objFdjcamera.show().attr(fdAttr, fdCount);                                                            
44                     $(".gysFdjBox["+fdAttr+"="+fdCount+"]").show();
45                     $(document).on("mousemove", function (event) {
46                         var pointX = event.clientX+$(document).scrollLeft();
47                         var pointY = event.clientY+$(document).scrollTop();
48                         nowLeft = pointX - options.cameraW / 2;
49                         nowTop = pointY - options.cameraH / 2;
50                         if (nowLeft <= objLeft) { nowLeft = objLeft; }
51                         else if (nowLeft >= cameraMaxLeft) { nowLeft = cameraMaxLeft; }
52                         if (nowTop <= objTop) { nowTop = objTop; }
53                         else if (nowTop >= cameraMaxTop) { nowTop=cameraMaxTop;}                        
54                         objFdjcamera.css({ left: nowLeft + "px", top: nowTop + "px" });
55                         nowLeft=(nowLeft-objLeft)*options.zoom;
56                         nowTop=(nowTop-objTop)*options.zoom;                                   
57                         $("img",$(".gysFdjBox[" + fdAttr + "=" + fdCount + "]")).css({ "margin-top": -nowTop + "px", "margin-left": -nowLeft + "px" });
58                     });
59                 });
60                 objFdjcamera.on("mouseleave", function () {
61                     $(document).off("mousemove");
62                     objFdjcamera.hide();
63                     $(".gysFdjBox["+fdAttr+"="+fdCount+"]").hide();
64                 });
65             }
66         })(jQuery);

效果图
以上内容来自Ajax实例站:…

高度可自定义的选项

 

<script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script>
<script src="/js/common/jquery.jqzoom.js" type="text/javascript"></script>

CSS代码:

颜色化定义

插件代码:

2、应用官方网站给定的样式

1 .test{ width:300px;height:400px; overflow:hidden;}

超绚的图片库支持

 

/*jQzoom*/
.jqzoom{
  border:1px solid #BBB;
  float:left;
  position:relative;
  padding:0px;
  cursor:pointer;
}
div.zoomdiv {
  z-index:  999;
  position        : absolute;
  top:0px;
  left:0px;
  width          : 200px;
  height         : 200px;
  background: #ffffff;
  border:1px solid #CCCCCC;
  display:none;
  text-align: center;
  overflow: hidden;
}
div.jqZoomPup {
  z-index         : 999;
  visibility       : hidden;
  position        : absolute;
  top:0px;
  left:0px;
  width          : 50px;
  height         : 50px;
  border: 1px solid #aaa;
  background: #ffffff url(/images/shopping/zoomlens.gif) 50% top no-repeat;
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(Opacity=50);
}

HTML代码:

外部控制

复制代码

3、编写HTML代码

1 <div class="test"><img src="../img/x.jpg"  alt="小图"/></div>

窗口缩放,镜头缩放和内部缩放

 1  ; (function ($) {

<div class="jqzoom">
  <img src="/images/shopping/pro_img/blue_one_small.jpg" style="width:300px; height:300px;" alt="金沙国际官网 4" jqimg="/images/shopping/pro_img/blue_one_big.jpg" id="bigImg"/>
</div>

插件的调用:

金沙国际官网,免费使用(MIT and GPL)

 2             $.fn.gysFdj = function (options) {

其中,在HTML代码中添加该插件自定义的jqimg属性,值为大图的文件路径。

1 $(function () {
2             $(".test").gysFdj({ zoom: 2 });             3         });

使用elevateZoom非常简单,你可以使用一张图片,或者使用两张图片(一张缩略图,另外一张高清大图)。缩放的窗口可以被设置在页面的任何部分,并且拥有行内缩放选项,这样节约空间。使用行内缩放,你可以使用镜头图片展示缩放部分。

 3                 var defaluts = { 

4、查看官方网站的API使用说明,可以写出如下JS代码

 

这里还包含一个画廊模式,可以用来展示多张拥有缩放功能的图片。elevateZoom拥有非常多的自定义选项,例如,淡入/淡出,easing,透明度,边框等等,相信如果你选择一款选项丰富的缩放放大镜效果jQuery插件的话,它会成为你的选择之一!

 4                     cameraW: 100, //镜头宽度

/*使用jqzoom*/
$(function() {
  $(".jqzoom").jqueryzoom({
    xzoom: 300, //放大图的宽度(默认是 200)
    yzoom: 300, //放大图的高度(默认是 200)
    offset: 10, //离原图的距离(默认是 10)
    position: "right", //放大图的定位(默认是 "right")
    preload: 1
  });
});

还记得上次我们分享的jQuery放大镜效果插件

Melens吗?能够帮助你快速简单的搭建类似淘宝中货品大图查看效果。这里继续介绍另…

 5                     cameraH: 100, //镜头高度

附件

 6                     pointBjColor: “#000”, //镜头的背景颜色

附件1:jQuery.jqzoom.js

 7                     pointOpacity: 0.6, //镜头的透明度

//**************************************************************
// jQZoom allows you to realize a small magnifier window,close
// to the image or images on your web page easily.
//
// jqZoom version 2.2
// Author Doc. Ing. Renzi Marco(www.mind-projects.it)
// First Release on Dec 05 2007
// i'm looking for a job,pick me up!!!
// mail: renzi.mrc@gmail.com
//**************************************************************
(function($){
    $.fn.jqueryzoom = function(options){
    var settings = {
        xzoom: 200,   //zoomed width default width
        yzoom: 200,   //zoomed div default width
        offset: 10,   //zoomed div default offset
        position: "right" ,//zoomed div default position,offset position is to the right of the image
        lens:1, //zooming lens over the image,by default is 1;
        preload: 1
      };
      if(options) {
        $.extend(settings, options);
      }
      var noalt='';
      $(this).hover(function(){
      var imageLeft = $(this).offset().left;
      var imageTop = $(this).offset().top;
      var imageWidth = $(this).children('img').get(0).offsetWidth;
      var imageHeight = $(this).children('img').get(0).offsetHeight;
      noalt= $(this).children("img").attr("alt");
      var bigimage = $(this).children("img").attr("jqimg");
      $(this).children("img").attr("alt",'');
      if($("div.zoomdiv").get().length == 0){
      $(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");
      $(this).append("<div class='jqZoomPup'> </div>");
      }
      if(settings.position == "right"){
      if(imageLeft + imageWidth + settings.offset + settings.xzoom > screen.width){
      leftpos = imageLeft - settings.offset - settings.xzoom;
      }else{
      leftpos = imageLeft + imageWidth + settings.offset;
      }
      }else{
      leftpos = imageLeft - settings.xzoom - settings.offset;
      if(leftpos < 0){
      leftpos = imageLeft + imageWidth + settings.offset;
      }
      }
      $("div.zoomdiv").css({ top: imageTop,left: leftpos });
      $("div.zoomdiv").width(settings.xzoom);
      $("div.zoomdiv").height(settings.yzoom);
      $("div.zoomdiv").show();
      if(!settings.lens){
       $(this).css('cursor','crosshair');
      }
          $(document.body).mousemove(function(e){
          mouse = new MouseEvent(e);
          /*$("div.jqZoomPup").hide();*/
          var bigwidth = $(".bigimg").get(0).offsetWidth;
          var bigheight = $(".bigimg").get(0).offsetHeight;
          var scaley ='x';
          var scalex= 'y';
          if(isNaN(scalex)|isNaN(scaley)){
          var scalex = (bigwidth/imageWidth);
          var scaley = (bigheight/imageHeight);
          $("div.jqZoomPup").width((settings.xzoom)/scalex );
          $("div.jqZoomPup").height((settings.yzoom)/scaley);
          if(settings.lens){
          $("div.jqZoomPup").css('visibility','visible');
          }
          }
          xpos = mouse.x - $("div.jqZoomPup").width()/2 - imageLeft;
          ypos = mouse.y - $("div.jqZoomPup").height()/2 - imageTop ;
          if(settings.lens){
          xpos = (mouse.x - $("div.jqZoomPup").width()/2 < imageLeft ) ? 0 : (mouse.x + $("div.jqZoomPup").width()/2 > imageWidth + imageLeft ) ? (imageWidth -$("div.jqZoomPup").width() -2) : xpos;
          ypos = (mouse.y - $("div.jqZoomPup").height()/2 < imageTop ) ? 0 : (mouse.y + $("div.jqZoomPup").height()/2 > imageHeight + imageTop ) ? (imageHeight - $("div.jqZoomPup").height() -2 ) : ypos;
          }
          if(settings.lens){
          $("div.jqZoomPup").css({ top: ypos,left: xpos });
          }
          scrolly = ypos;
          $("div.zoomdiv").get(0).scrollTop = scrolly * scaley;
          scrollx = xpos;
          $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;
          });
      },function(){
        $(this).children("img").attr("alt",noalt);
        $(document.body).unbind("mousemove");
        if(settings.lens){
        $("div.jqZoomPup").remove();
        }
        $("div.zoomdiv").remove();
      });
    count = 0;
    if(settings.preload){
    $('body').append("<div style='display:none;' class='jqPreload"+count+"'>sdsdssdsd</div>");
    $(this).each(function(){
    var imagetopreload= $(this).children("img").attr("jqimg");
    var content = jQuery('div.jqPreload'+count+'').html();
    jQuery('div.jqPreload'+count+'').html(content+'<img src=\"'+imagetopreload+'\">');
    });
    }
    }
})(jQuery);
function MouseEvent(e) {
   this.x = e.pageX;
   this.y = e.pageY;
}

 8                     zoomPos: 10, //放大框距离源框的位置              
 

附件2:放大镜图标(zoomlens.gif)

 9                     zoom: 2//放大倍数

金沙国际官网 5

10                 };

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

11                 options = $.extend(defaluts, options);

希望本文所述对大家jQuery程序设计有所帮助。

12                 var obj = $(this);               

您可能感兴趣的文章:

  • jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
  • 快速解决FusionCharts联动的中文乱码问题
  • JSP FusionCharts Free显示图表
    具体实现
  • FusionCharts图表显示双Y轴双(多)曲线
  • jQuery.Highcharts.js绘制柱状图饼状图曲线图
  • jqPlot
    jQuery绘图插件的使用
  • jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
  • 使用jQuery
    jqPlot插件绘制柱状图
  • jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
  • jquery
    dataview数据视图插件使用方法
  • jQuery自适应轮播图插件Swiper用法示例
  • jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】

13                 obj.addClass(“gysFdjOrigin”);

14                 var objOriImg=$(“img”,obj);

15                 var objOriImgW=objOriImg.width();

16                 var objOriImgH=objOriImg.height();                

17                 var fdCount = $(“.gysFdjOrigin”).length;

18                 var fdAttr = “fd”; //属性变量

19                 obj.attr(fdAttr, fdCount); //添加属性

20                 var offset = obj.offset();

21                 var objLeft = offset.left; //对象left                

22                 var objTop = offset.top; //对象top

23                 var objWidth = obj.width(); //对象宽度

24                 var objHeight = obj.height(); //对象高度            
 

25                 //镜头相对box的活动范围

26 

27                 var cameraMaxLeft = objWidth + objLeft –
options.cameraW; //最大左范围

28                 var cameraMaxTop = objHeight + objTop –
options.cameraH; //最大下范围

29 

30                 var imgStr = obj.html();

31                 var html = “”;

32                 html += “<div style=’left:” + (objLeft + objWidth

  • options.zoomPos) + “px; top:” + objTop + “px;display:none;
    position:absolute;width:” + (options.cameraW * options.zoom) +
    “px;height:” + (options.cameraH* options.zoom) + “px;overflow:hidden;’
    class=’gysFdjBox’ ” + fdAttr + “=” + fdCount + “>” + imgStr +
    “</div>”;

33                 $(“body”).append(html);

34                 $(“img”, $(“.gysFdjBox[” + fdAttr + “=” + fdCount +
“]”)).width(objWidth*options.zoom).height(objHeight*options.zoom);

35                 var objFdjcamera = null;

36                 if ($(“#gysFdjcamera”).length == 0) {

37                     var pointBlock = “<div id=’gysFdjcamera’
style=’width:” + options.cameraW + “px; height:” + options.cameraH +
“px; background-color:” + options.pointBjColor + “;opacity:” +
options.pointOpacity +
“;filter:alpha(opacity=”+options.pointOpacity*100+”);cursor:crosshair;position:absolute;display:none;’></div>”;

38                 $(“body”).append(pointBlock);                

39                 }

40                 objFdjcamera = $(“#gysFdjcamera”);

41                 var nowLeft = 0, nowTop = 0;

42                 obj.on(“mouseover”, function (event) {              
    

43                     objFdjcamera.show().attr(fdAttr, fdCount);      
                                                     

44                     $(“.gysFdjBox[“+fdAttr+”=”+fdCount+”]”).show();

45                     $(document).on(“mousemove”, function (event) {

46                         var pointX =
event.clientX+$(document).scrollLeft();

47                         var pointY =
event.clientY+$(document).scrollTop();

48                         nowLeft = pointX – options.cameraW / 2;

49                         nowTop = pointY – options.cameraH / 2;

50                         if (nowLeft <= objLeft) { nowLeft =
objLeft; }

51                         else if (nowLeft >= cameraMaxLeft) {
nowLeft = cameraMaxLeft; }

52                         if (nowTop <= objTop) { nowTop = objTop; }

53                         else if (nowTop >= cameraMaxTop) {
nowTop=cameraMaxTop;}                        

54                         objFdjcamera.css({ left: nowLeft + “px”, top:
nowTop + “px” });

55                         nowLeft=(nowLeft-objLeft)*options.zoom;

56                         nowTop=(nowTop-objTop)*options.zoom;        
                          

57                         $(“img”,$(“.gysFdjBox[” + fdAttr + “=” +
fdCount + “]”)).css({ “margin-top”: -nowTop + “px”, “margin-left”:
-nowLeft + “px” });

58                     });

59                 });

60                 objFdjcamera.on(“mouseleave”, function () {

61                     $(document).off(“mousemove”);

62                     objFdjcamera.hide();

63                     $(“.gysFdjBox[“+fdAttr+”=”+fdCount+”]”).hide();

64                 });

65             }

66         })(jQuery);

复制代码

CSS代码:

 

1 .test{ width:300px;height:400px; overflow:hidden;}

HTML代码:

 

1 <div class=”test”><img src=”../img/x.jpg”
 alt=”小图”/></div>

插件的调用:

 

1 $(function () {

2             $(“.test”).gysFdj({ zoom: 2 });             3         });

:
这个方法实现的放大有个弊端就是放大倍数设置的过大的话,会带来图片上的模糊…

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图