基于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 相关文章推荐
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
May 06 Javascript
微信小程序入门教程
Nov 18 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
extract-text-webpack-plugin用法详解
Feb 14 Javascript
js实现简单掷骰子效果
Oct 24 Javascript
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
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
php后台程序与Javascript的两种交互方式
2009/10/25 PHP
为PHP安装imagick时出现Cannot locate header file MagickWand.h错误的解决方法
2014/11/03 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php查询mysql大量数据造成内存不足的解决方法
2015/03/04 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
php经典算法集锦
2015/11/14 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
IE8 引入跨站数据获取功能说明
2008/07/22 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
JavaScript中数组继承的简单示例
2015/07/29 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
js事件驱动机制 浏览器兼容处理方法
2016/07/23 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Python中print函数简单使用总结
2019/08/05 Python
用Python画小女孩放风筝的示例
2019/11/23 Python
pycharm远程连接vagrant虚拟机中mariadb数据库
2020/06/05 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
Crocs美国官方网站:卡骆驰洞洞鞋
2017/08/04 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
线程问题:wait()方法是定义在哪个类里面
2015/07/07 面试题
离婚协议书范本(2014版)
2014/09/28 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
关于vue中如何监听数组变化
2021/04/28 Vue.js
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js