手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆

jQuery Plugins -- JQzoom

首页 > Javascript >

demo地址:http://www.51toria.cn/demo/JQplus/jqzoom/

 

使用的JS:

 

XML/HTML代码(用JS代码的时候居然卡住了。没办法,只能用XML代码来展示)
  1. //**************************************************************  
  2. // jQZoom allows you to realize a small magnifier window,close  
  3. // to the image or images on your web page easily.  
  4. //  
  5. // jqZoom version 1.0  
  6. // Author Doc. Ing. Renzi Marco(www.mind-projects.it)  
  7. // Released on Dec 05 2007  
  8. // i'm searching for a job,pick me up!!!  
  9. // mail: renzi.mrc@gmail.com  
  10. //**************************************************************  
  11.   
  12. (function($){  
  13.   
  14.         $.fn.jqueryzoom = function(options){  
  15.   
  16.         var settings = {  
  17.                 xzoom: 200,     //zoomed width default width  
  18.                 yzoom: 200,     //zoomed div default width  
  19.                 offset: 10,     //zoomed div default offset  
  20.                 position: "right"  //zoomed div default position,offset position is to the right of the image  
  21.             };  
  22.   
  23.             if(options) {  
  24.                 $.extend(settings, options);  
  25.             }  
  26.   
  27.         $(this).hover(function(){  
  28.   
  29.   
  30.             var imageLeft = $(this).get(0).offsetLeft;  
  31.             var imageRight = $(this).get(0).offsetRight;  
  32.             var imageTop =  $(this).get(0).offsetTop;  
  33.             var imageWidth = $(this).get(0).offsetWidth;  
  34.             var imageHeight = $(this).get(0).offsetHeight;  
  35.   
  36.             var bigimage = $(this).attr("alt");  
  37.   
  38.             if($("div.zoomdiv").get().length == 0){  
  39.   
  40.             $(this).after("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");  
  41.   
  42.             }  
  43.   
  44.             if(settings.position == "right"){  
  45.   
  46.             leftpos = imageLeft + imageWidth + settings.offset;  
  47.   
  48.             }else{  
  49.   
  50.             leftpos = imageLeft - settings.xzoom - settings.offset;  
  51.   
  52.             }  
  53.   
  54.             $("div.zoomdiv").css({ top: imageTop,left: leftpos });  
  55.   
  56.             $("div.zoomdiv").width(settings.xzoom);  
  57.   
  58.             $("div.zoomdiv").height(settings.yzoom);  
  59.   
  60.             $("div.zoomdiv").show();  
  61.   
  62.   
  63.                     $(document.body).mousemove(function(e){  
  64.   
  65.                     var bigwidth = $(".bigimg").get(0).offsetWidth;  
  66.   
  67.                     var bigheight = $(".bigimg").get(0).offsetHeight;  
  68.   
  69.                     var scaley ='x';  
  70.   
  71.                     var scalex'y';  
  72.   
  73.   
  74.                     if(isNaN(scalex)|isNaN(scaley)){  
  75.   
  76.                     var scalex = Math.round(bigwidth/imageWidth) ;  
  77.   
  78.                     var scaley = Math.round(bigheight/imageHeight);  
  79.   
  80.                     }  
  81.   
  82.                     mouse = new MouseEvent(e);  
  83.   
  84.   
  85.   
  86.                     scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ;  
  87.   
  88.                     $("div.zoomdiv").get(0).scrollTop = scrolly * scaley  ;  
  89.   
  90.                     scrollx =    mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ;  
  91.   
  92.                     $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ;  
  93.   
  94.   
  95.                     });  
  96.             },function(){  
  97.                $("div.zoomdiv").hide();  
  98.                $(document.body).unbind("mousemove");  
  99.                $(".lenszoom").remove();  
  100.                $("div.zoomdiv").remove();  
  101.             });  
  102.   
  103.         }  
  104.   
  105. })(jQuery);  
  106.   
  107. function MouseEvent(e) {  
  108. this.x = e.pageX  
  109. this.y = e.pageY  
  110. }  

 

页面调用方法:

JavaScript代码
  1. jQuery.noConflict();  
  2. jQuery(document).ready(function(){  
  3. $("img.jqzoom").jqueryzoom();  
  4. });  

 




本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自"易栈网-膘叔", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: jquery, plugins, jqzoom, javascript, demo

« 上一篇 | 下一篇 »

只显示10条记录相关文章

JQuery -- this 和 $(this) 的区别 (浏览: 86531, 评论: 3)
[转载]超强大的jquery formValidator (浏览: 51891, 评论: 3)
jQuery插件---获取URL参数 (浏览: 47212, 评论: 1)
jQuery的html()等方法介绍 (浏览: 46624, 评论: 1)
取得html中的comment的内容 (浏览: 43516, 评论: 2)
jQuery的bind函数 (浏览: 41750, 评论: 1)
将Yiiframework与JQuery easyUI整合使用 (浏览: 39189, 评论: 2)
jQuery一些插件的链接[转] (浏览: 38764, 评论: 2)
取消radio的选中状态 (浏览: 37905, 评论: 1)
通过JS更改FORM的action (浏览: 36475, 评论: 1)

3条记录访客评论

改好了,呵呵。是我在编辑的时候不小心放了一个插入代码的区块

Post by gouki on 2008, November 15, 6:33 PM 引用此文发表评论 #1

又来看一遍,发现你的DEMO地址是,显示出错了
http://www.51toria.cn/demo/JQplus/

jqzoom/

Post by yhustc on 2008, November 15, 11:19 AM 引用此文发表评论 #2

demo地址返回403错误
是不是TP共享版面那个人演示的站点产品展示的效果?点击一个图片放大显示出来?但是不像thickbox、lightbox那样的其他区域变灰

Post by yhustc on 2008, November 15, 11:11 AM 引用此文发表评论 #3


发表评论

评论内容 (必填):