jqzoom插件

<!DOCTYPE html>

<html>

<head>

 <meta charset="utf-8"/>

 <title></title>

 <style type="text/css">

  /*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(zoomlens.gif) 50% top no-repeat;

   opacity: 0.5;

   -moz-opacity: 0.5;

   -khtml-opacity: 0.5;

   filter: alpha(Opacity=50);

  }

 </style>

</head>

<body>

<div class="jqzoom">

 <img src="j_small.jpg" style="width:300px; height:300px;" jqimg="j_big.jpg" id="bigImg"/>

</div>

<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>

<script type="text/javascript">

 //**************************************************************

 // 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'>&nbsp;</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 + '\">');

    });

   }

  }

 })($);

 function MouseEvent(e) {

  this.x = e.pageX;

  this.y = e.pageY;

 }

</script>

<script type="text/javascript">

 /*使用jqzoom*/

 $(function () {

  $(".jqzoom").jqueryzoom({

   xzoom: 200, //放大图的宽度(默认是 200)

   yzoom: 200, //放大图的高度(默认是 200)

   offset: 10, //离原图的距离(默认是 10)

   position: "right", //放大图的定位(默认是 "right")

   preload: 1

  });

 });

</script>

</body>

</html>

jqzoom插件的更多相关文章

jqzoom插件图片放大功能的一些BUG
建议使用cloud-zoom插件,jqzoom插件就不要使用了点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了, ...
Jquery的jqzoom插件的使用（图片放大镜）
今天学习一下,图片放大镜功能,需要使用插件JQzoom 引入文件 <script type="text/javascript" src="js/jquery.min ...
jqury.jqzoom插件--放大镜
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
jquery jqzoom插件练习
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
使用jqzoom插件时
[javascript] view plaincopy /*使用jqzoom*/ $(function() { $(".jqzoom").jqueryzoom({ xzoom: 3 ...
jquery.jqzoom.js图片放大镜
jqzoom插件实现图片放大镜效果 1. jquery.jqzoom.js //************************************************************ ...
jquery中用jqzoom实现放大镜效果
使用的jqzoom 插件实现的放大镜的效果 jqzoom 里面的代码 : 直接copy就好 //**************************************************** ...
图片放大镜插件 Cloud Zoom v3.1
Cloud Zoom是一个图像放大jQuery插件,效果堪比Magic Zoom.相对于流行jQZoom插件,Cloud Zoom体积小,有更多的功能和更强大的跨浏览器兼容性. 猛击这里查看演示DEM ...
jquery插件——图片放大器
用到了JQzoom插件,可以使图片实现放大效果

随机推荐

关于C++的const对象
对于const类对象,类指针, 类引用, 只能调用类的const成员函数. 1.const成员函数不允许被修改它所在对象的任何一个成员变量. 2.const成员函数能访问对象的const成员, 而其他 ...
Linux系统（三）系统基础扫盲大全
序言如果大家都爱装逼,一般会偏爱使用安装最小化的liunx系统,那么你的系统就不带图形化的桌面功能,这样对于一个想装B的初学者来说,Liunx就是黑漆马虎,一望无际的黑屏,黑屏,如何快速的对liun ...
Redis参数配置和运维说明
开发过程中使用缓存的情况还是比较多的,记录一下Redis的参数说明以备以后查看: #Redis Config daemonize yes pidfile /var/run/redis.pid port ...
HTTP协议详解【转】
当今web程序的开发技术真是百家争鸣,ASP.NET, PHP, JSP,Perl, AJAX 等等. 无论Web技术在未来如何发展,理解Web程序之间通信的基本协议相当重要, 因为它让我们理解了We ...
VMware WorkStation9.0虚拟机如何运行WINPE
VMware WorkStation9.0虚拟机如何运行WINPE...我们在使用VMware的过程中,有些时候需要让VMware来运行WINPE系统,比如在使用VMware进行系统封装的过程中,其中 ...
装SQL server 2008问题解决
在控制面板把之前安装的sql service卸载干净看看,我是这样搞定的! sql server 2008 安装过程中无法更改共享功能目录去控制面板把相关于sql server 2008的所有程序删 ...
css :target
花了半小时在找如果完成:target的问题需求:点击<a href="#Main">Main</a>时,会触发:target 效果结果在网络上没有找到, ...
Tesseract pytesseract的安装和使用
Tesseract是开源的OCR引擎,可以识别的图片里的文字,支持unicode(UTF-8)编码,100多种语言,需要下载相应语言的训练数据. 安装: 有两种方法,一种是通过编译源码,比较麻烦.我使 ...
java 完全二叉树的构建与四种遍历方法
本来就是基础知识,不能丢的太干净,今天竟然花了那么长的时间才写出来,记一下. 有如下的一颗完全二叉树: 先序遍历结果应该为:1 2 4 5 3 6 7 中序遍历结果应该为:4 2 5 ...
《你不知道的JavaScript》整理（六）——强制类型转换
JavaScript中通常分为两种类型转换,"隐式强制类型转换"(implicit coercion)和"显式强制类型转换"(explicit coercion ...

jqzoom插件

jqzoom插件的更多相关文章

随机推荐

热门专题