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

开心网争车位

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

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

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

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

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

Javascript | 评论:1 | 阅读:26429

图片自动缩放

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

CSS背景

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

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

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

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

图片文件为：

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

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

比如说我们要给 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 | 阅读:23892

测试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 | 阅读:25544

YUI 3.0 Preview Release 1

Submitted by gouki on 2008, August 17, 10:05 AM

几天不见，YUI居然release了，虽然是preview版本。
官方这么说：

The YUI development team has issued YUI 3.0 Preview Release 1, an early look at the next generation of the Yahoo! User Interface Library (YUI). This developer preview shows you where the library is headed as we pursue goals of size, performance, consistency, power, security, and openness.

You can read the introduction to the new release on YUIBlog and get a sense of the new syntactical style in this blog post, which reviews Dav Glass's Draggable Portable example — one of more than 60 examples that accompany the preview's extensive documentation.

YUI 3.0 PR 1 is an early preview — not suitable for production deployment. The development team is looking forward to your feedback in the YUI 3.x community forum as we refine the API toward a 2009 release.

Work continues on YUI's main 2.x codeline, too, and YUI 2.x is still the foundation for current projects. Check out the library's Roadmap for a up-to-date picture of what we're planning for upcoming releases.

有点期待。

Tags: javascript, yui, preview, release, framewok

Javascript | 评论:0 | 阅读:26756

Records:307«‹51525354555657585960›»