手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

jQuery Plugins -- JQzoom

Submitted by gouki on 2008, November 14, 10:52 AM

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

Javascript | 评论:3 | 阅读:28663

JS取当时间的一个很妖的方法

Submitted by gouki on 2008, September 30, 10:55 PM

关于new Date().getTime()的简写方式.

原文来自cssrain，只取了其中的一小部分。http://www.cssrain.cn/demo/3/newDate.html

小结：
（1）getTime（new Date.getTime 方法）
返回指定的 Date 对象自 1970 年 1 月 1 日午夜（通用时间）以来的毫秒数。当比较两个或更多个 Date 对象时，使用此方法表示某一特定时刻。
返回值类型：Number -- 一个整数。

（2）
function now(){
return +new Date;
}
jQuery 源代码里就是使用的 +new Date ;

(3)
用来判断 google 浏览器：
if( !isNaN(Date.parse("1970.01.01")) ){
alert("This is Google Chrome!");
}else{
alert("This is NOT!");
}
结果：1和2的结果是一样的。但这个number是13位的number，和PHP中的时间戳并非同一个意义

Tags: time, jquery, gettime, date

Javascript | 评论:0 | 阅读:23438

祝贺：微软也开源 将采用jQuery JavaScript库

Submitted by gouki on 2008, September 29, 8:08 PM

微软和诺基亚正式宣布支持开源的 jQuery JavaScript库，另外，微软还称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括jQuery的智能提示，代码片段，示例，文档编制等内容在内的功能。微软和诺基亚将长期成为jQuery的用户成员，其他成员还有Google, Intel, IBM, Intuit, 路透社等。

Tags: javascript, jquery, microsoft, nokia, google

Javascript | 评论:0 | 阅读:22411

开心网争车位

Submitted by gouki on 2008, September 1, 10:10 AM

当你的车越来越多的时候，是不是感觉车没地方停？没关系，你不是还有两个邻居嘛。。。看不到？没事。

Firefox的话是很方便，打开firebug，在控制台里输入：gotoneighbor(1);运行一下就行了。

IE的话，需要在地址栏里：javascript:gotoneighbor(1);void(); 有的需要void();，有的不需要，自己测试吧。

Tags: 开心网, 争车位, 查看, 隐藏, 邻居

Javascript | 评论:1 | 阅读:25494

图片自动缩放

Submitted by gouki on 2008, August 31, 12:12 AM

图片的大小在不受控制的时候，我们不得不写函数来进行控制，依稀记得目前所有的jQuery图片处理函数里都有类似的函数了。但我在看到网上有人写了这个resize函数之后。不禁还是拿回来加工处理一下。以便以后随时可用。
函数如下：

JavaScript代码
  1. var MAX_WIDTH   = 100;  
  2. var MAX_HEIGHT  = 75;  
  3. function resizeImage( source_image , max_width , max_height){  
  4.     var image = new Image();  
  5.     image.src = source_image.src;  
  6.     if (!max_width || parseInt(max_width) <= 0){  
  7.         max_width = MAX_WIDTH;  
  8.     }  
  9.     if (!max_height || parseInt(max_height) <= 0){  
  10.         max_height = MAX_HEIGHT;  
  11.     }  
  12.     //开始检查图片  
  13.     if(image.width > 0 && image.height > 0 ){  
  14.         var image_rate = 1;  
  15.         if( (max_width / image.width) < (max_height / image.height)){  
  16.             image_rate = max_width / image.width ;  
  17.         }else{  
  18.             image_rate = max_height / image.height ;  
  19.         }  
  20.         if ( image_rate <= 1){  
  21.             source_image.width  = image.width * image_rate;  
  22.             source_image.height = image.height * image_rate;  
  23.         }  
  24.     }  
  25.       
  26. }  

用法很简单，js代码在文件头部加载后，如果遇到有图片需要缩放的，直接在<img>标签里加上：onload="resizeImage(this,300,200);"这样的代码。就可以自动缩小了。
目前并没有加上放大。
当然，我之所有转载并优化这个函数，是因为我想用在jQuery里面的。在使用jQuery的时候，必须把代码放在footer里才行。
代码如下：

JavaScript代码
  1. $('img[@class=test]').load(function(){  
  2.     resizeImage(this,300,200)  
  3. })  
  4. //[@class=test]代表了凡是图片的class是为test的，都将执行这个“自动缩放”函数，当然你也可以用其他的来代替，比如[@name=test]，则代表了如果img标签里，name=test的图片都将执行这个图片缩放程序。  

放大等以后有空再写，本来想写成jQuery的插件的。可是想想好象意义不大。。。

Tags: image, onload, autoresize, rate

Javascript | 评论:7 | 阅读:28994

Records:305«‹50515253545556575859›»