基于jQuery插件jqzoom实现的图片放大镜效果示例


Posted in Javascript onJanuary 23, 2017

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

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

基于jQuery插件jqzoom实现的图片放大镜效果示例

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

1、引入jqurty和jqzoom插件

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

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

/*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);
}

3、编写HTML代码

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

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

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

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

附件

附件1:jQuery.jqzoom.js

//**************************************************************
// 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;
}

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

基于jQuery插件jqzoom实现的图片放大镜效果示例

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

Javascript 相关文章推荐
javascript 读取xml,写入xml 实现代码
Jul 10 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
AngularJS内置指令
Feb 04 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
Sep 13 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
JS开发常用工具函数(小结)
Jul 04 Javascript
JS实现简单移动端鼠标拖拽
Jul 23 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 Javascript
vue3语法糖内的defineProps及defineEmits
Apr 14 Vue.js
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 #Javascript
canvas绘制表盘时钟
Jan 23 #Javascript
canvas绘制的直线动画
Jan 23 #Javascript
node.js实现复制文本到剪切板的功能
Jan 23 #Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 #Javascript
Javascript中构造函数要注意的一些坑
Jan 23 #Javascript
在 Angular2 中实现自定义校验指令(确认密码)的方法
Jan 23 #Javascript
You might like
PHP date函数参数详解
2006/11/27 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
JQuery validate插件Remote用法大全
2016/05/15 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
基于数据归一化以及Python实现方式
2018/07/11 Python
Python3enumrate和range对比及示例详解
2019/07/13 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
物业管理公司实习生自我鉴定
2013/09/19 职场文书
公司总经理岗位职责
2014/03/15 职场文书
2014乡镇机关党员个人对照检查材料思想汇报
2014/10/09 职场文书
初一数学教学反思
2016/02/17 职场文书
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫