基于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实现在小方框中浏览大图的代码
Aug 14 Javascript
javascript AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
JS中不为人知的五种声明Number的方式简要概述
Feb 22 Javascript
判断及设置浏览器全屏模式
Apr 20 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
简单的vuex 的使用案例笔记
Apr 13 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
May 12 jQuery
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 Javascript
JsonServer安装及启动过程图解
Feb 28 Javascript
JavaScript实现网页动态生成表格
Nov 25 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
php中cookie的使用方法
2014/03/29 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
WordPress分页伪静态加html后缀
2016/06/08 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
JavaScript实现关键字高亮功能
2014/11/12 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
jQuery的position()方法详解
2015/07/19 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
JS实现动态生成表格并提交表格数据向后端
2020/11/25 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
ajax接收后台数据在html页面显示
2017/02/19 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
2017/05/26 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
使用AutoJs实现微信抢红包的代码
2020/12/31 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
利用python如何在前程无忧高效投递简历
2019/05/07 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
人力资源经理的岗位职责范本
2014/02/28 职场文书
反腐倡廉标语
2014/06/24 职场文书
反四风对照检查材料思想汇报
2014/09/16 职场文书
八年级数学教学反思
2016/02/17 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis