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

祝贺：微软也开源 将采用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 | 阅读:21631

开心网争车位

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

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

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

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

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

Javascript | 评论:1 | 阅读:24923

图片自动缩放

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 | 阅读:28272

CSS背景

Submitted by gouki on 2008, August 23, 9:02 AM

不多说啥了。在网上看到这篇文章，难得是有详细介绍的。。虽然这个功能我很多时候其实已经在用了，但。那都是直接拿来用的，并没有深刻的研究过。今天这里终于看到一个有注释的，就贴上来看看。

这种用法，是被YAHOO所推荐的。因为。这样的用法，降低了图片的下载量。而且并在一起，并不会给图片的大小增加很多。

原文：http://iruif.cn/swd/?p=25
这里只贴重要的内容。请原作者不要伤心。谢谢

图片文件为：

大小: 6.41 K 尺寸: 14 x 166 浏览: 1844 次 点击打开新窗口浏览全图

首先我们得控制好要应用小图标的对象的高度. 否则到时候这个图标就会显示异常了.

比如说我们要给 li 标签使用这个小东东, 那么我们就得写上这样的代码:

CSS代码
  1. li {   
  2. height: 12px; /* 这个高度等于每个小图标的高度 */   
  3. line-height: 12px; /* 这个同上. 但只是有些时候需要写这个而已. */   
  4. background: url('icons.gif') 0 -12px; /* 这里的 -12px 就是定义你要使用第几个图标. 如果每个图标的高度都是 12px 的话, 那么我要使用第 N 个图标的话就得写 n*12 . */   
  5. padding-top: 0; /* 这个要严格限定为 0 . 否则呢, 哼哼哈莉.. */   
  6. padding-bottom: 0; /* 这个也一样.. */   
  7. padding-left: 14px; /* 这个肯定是要设定一个值的.. 否则小图标就会被文字覆盖掉.. padding-right 可以设定也可以不设定.. */   
  8. margin: 2px 0; /* 如果要设定每个 li 标签之间的距离话, 就要改这个了.. */   
  9. overflow: hidden; /* 在有些情况下需要写这个. 具体作用我就不多解释了. */   
  10. }  
显然, 把小图标都放到一个文件里的话会带来很多的问题. 比如要限定宽度和高度 [也就是内容会显示不完整] , 并且 padding 也将无法使用 [也就是会影响到 border 等属性的效果] .
当然也有解决办法. 那就是 — 把每个小图标的距离拉开, 或者干脆把他们都拆成单独的文件..

如果不明白可以问问原作者。。。

 

Tags: css, 背景色, position

Javascript | 评论:0 | 阅读:22345

测试JS的速度

Submitted by gouki on 2008, August 21, 10:49 PM

在mootools的官方网站有一个网页专门用来测试几个框架的速度，大概是：mootools,jquery,prototype,dojo,yui，测试下来jquery的平均速度应该算是最快的。

那个评测下来IE下JS运行速度慢果然是很明显的。同样的测试在IE下面比FF下面，速度慢了一倍左右啊。

不多了。自己测试一下看结果吧。。
http://mootools.net/slickspeed/

Tags: javascript, speed, framework

Javascript | 评论:0 | 阅读:24141

Records:298«‹49505152535455565758›»