基于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提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
使用Sticker.js实现贴纸效果
Jan 28 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
May 09 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
js实现StringBuffer的简单实例
Sep 02 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
JavaScript 实现 Tab 点击切换实例代码
Mar 25 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
jQuery+ThinkPHP实现图片上传
Jul 23 jQuery
html中创建并调用vue组件的几种方法汇总
Nov 17 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
PHP 布尔值的自增与自减的实现方法
2018/05/03 PHP
PHP折半(二分)查找算法实例分析
2018/05/12 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
javascript网页关键字高亮代码
2008/07/30 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
2018/05/18 Javascript
微信小程序开发之自定义tabBar的实现
2018/09/06 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
Python获取网页上图片下载地址的方法
2015/03/11 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python模块hashlib(加密服务)知识点讲解
2019/11/25 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
python实现逢七拍腿小游戏的思路详解
2020/05/26 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
python3中确保枚举值代码分析
2020/12/02 Python
python regex库实例用法总结
2021/01/03 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
六一儿童节活动策划方案
2014/01/27 职场文书
毕业论文答辩演讲稿
2015/06/23 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
MySQL update set 和 and的区别
2021/05/08 MySQL