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

图片自动缩放

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

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

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

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

javascript---浅析注册事件

Submitted by gouki on 2008, August 15, 11:18 PM

在这个浮躁的世界里，说实话，很难看到一两篇好的文章，我写的一般都比较垃圾，但我会尽量发现精品。在闲逛的时候发现这篇文章确实不错，虽然讲的比较简单一点。

文章是从cssrain.cn上COPY而来，原文网址为：http://item.feedsky.com/~feedsky/cssrain/~6110346/103912558/4218245/1/item.html

内容如下：

首先是最常规的方法：

XML/HTML代码
  1. <p id="para" title="cssrain demo!" onclick="test()" >test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6. </script>  

当某一天，我们知道JavaScript要跟HTML结构实现分离后，就会改了一种写法:

XML/HTML代码
  1. <p id="para" title="cssrain demo!">test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6. window.onload = function(){  
  7.     document.getElementById("para").onclick = test;  
  8. }  
  9. </script>  

当我们工作越来越久后，有时候我们需要对某个元素绑定多个相同的事件类型：

XML/HTML代码
  1. <p id="para" title="cssrain demo!">test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6.   
  7. function pig(){  
  8.   alert("pig");  
  9. }  
  10.   
  11. window.onload = function(){  
  12.      document.getElementById("para").attachEvent("onclick",test);  
  13.      document.getElementById("para").attachEvent("onclick",pig);  
  14. }  
  15. </script>  

在一段时间内，你并没发现这段代码有任何错误。
某一天，一个名叫firefox的浏览器 闯入你的视野，当我们把这段代码放到firefox中执行后，
发现并不能正常运行。 问题就这样，越来越多，然而作为一名JS程序员，这些都是必须面对的。

为了解决这段代码的平台兼容性问题，我翻翻手册，知道了firefox跟ie的区别：
firefox中注册事件使用：addEventListener方法，同时为了兼容ie，我们必须用到if ... else...

XML/HTML代码
  1. <p id="para" title="cssrain demo!">test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6.   
  7. function pig(){  
  8.   alert("pig");  
  9. }  
  10.   
  11. window.onload = function(){  
  12.          var element =  document.getElementById("para");  
  13.          if(element.addEventListener){  // firefox  , w3c  
  14.                 element.addEventListener("click",test,false);  
  15.     element.addEventListener("click",pig,false);  
  16.          } else {   // ie  
  17.     element.attachEvent("onclick",test);  
  18.     element.attachEvent("onclick",pig);  
  19.          }  
  20. }  
  21. </script>  

此时，代码就可以在多个平台上工作了。

但随着水平的进步，你不满足每次都去判断，你想把这个判断封装起来，以后可以直接调用：

XML/HTML代码
  1. <p id="para" title="cssrain demo!">test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6.   
  7. function pig(){  
  8.   alert("pig");  
  9. }  
  10.   
  11. function addListener(element,e,fn){  
  12.      if(element.addEventListener){  
  13.           element.addEventListener(e,fn,false);  
  14.      } else {  
  15.           element.attachEvent("on" + e,fn);  
  16.      }  
  17. }  
  18.   
  19. window.onload = function(){  
  20.          var element =  document.getElementById("para");  
  21.          addListener(element,"click",test);  
  22.          addListener(element,"click",pig);  
  23. }  
  24. </script>  
XML/HTML代码
  1. <p id="para" title="cssrain demo!">test</p>  
  2. <script>  
  3. function test(){  
  4.   alert("test");  
  5. }  
  6.   
  7. function pig(){  
  8.   alert("pig");  
  9. }  
  10.   
  11. function addListener(element,e,fn){  
  12.      if(element.addEventListener){  
  13.           element.addEventListener(e,fn,false);  
  14.      } else {  
  15.           element.attachEvent("on" + e,fn);  
  16.      }  
  17. }  
  18.   
  19. window.onload = function(){  
  20.          var element =  document.getElementById("para");  
  21.          addListener(element,"click",test);  
  22.          addListener(element,"click",pig);  
  23. }  
  24. </script>  

 至此，作为一个程序员的工作就完了。
中间我们从一个最传统，最基本的写法 ， 然后实现Js和HTML的分离，然后又实现对同一个元素注册多个事件，期间，我们发现注册事件的兼容性问题。最后我们对注册事件的方法进行封装，方便以后使用。

———END——

浏览器这东西还是非常害人的。啥时候才能有统一的标准 ？？？

Tags: javascript, 注册

Javascript | 评论:0 | 阅读:22870

Records:306«‹51525354555657585960›»