图片动态缩放PHP与JS算法

作者 : admin 于 2009年07月20日, 08:19:05
2009
07-20

这个算法写好多次了，虽然简单，但每次都得想一次，这里做个备份。

因为GD函数进行缩放，必须有宽和高，而在浏览器中，会自动按照比率调整宽高，所以两个函数稍有区别。

  1. #PHP版
  2. # $s_width  原图宽
  3. # $s_height 原图高
  4. # $t_width  目标文件最大宽
  5. # $t_height 目标文件最大高
  6. function ReSizePic( $s_width , $s_height , $t_width , $t_height)
  7. {
  8. if( $s_width / $s_height > $t_width / $t_height && $s_width > $t_width)
  9. {
  10. $t_height = $s_height * $t_width / $s_width;
  11. $t_width = $t_width;
  12. }
  13. else if( $s_width / $s_height > $t_width / $t_height && $s_width < = $t_width)
  14. {
  15. $t_height = $s_height;
  16. $t_width  = $s_width;
  17. }
  18. else if( $s_width / $s_height < $t_width / $t_height && $s_height > $t_height)
  19. {
  20. $t_width = $s_width*$t_height/$s_height;
  21. $t_height = $t_height;
  22. }
  23. else if( $s_width / $s_height < $t_width / $t_height && $s_height <= $t_height)
  24. {
  25. $t_height = $s_height;
  26. $t_width  = $s_width;
  27. }
  28. return array( "width" => $t_width , "height" => $t_height );
  29. }
  30. #JS版
  31. # obj 图片对象
  32. # maxWidth 显示最大宽
  33. # maxHeight 显示最大高
  34. function ReSizePic( obj , maxWidth , maxHeight )
  35. {
  36. if( ( obj.width/obj.height >= maxWidth/maxHeight ) && obj.width > maxWidth )
  37. {
  38. obj.width = maxWidth;
  39. }
  40. else if( ( obj.width/obj.height < maxWidth/maxHeight ) && obj.height > maxHeight )
  41. {
  42. obj.height = maxHeight;
  43. }
  44. }

JS:setAttribute() getAttribute() 使用总结

作者 : admin 于 2008年10月07日, 23:53:38
2008
10-7

setAttribute() getAttribute() 两个函数分别是设置DOM节点属性设置和修改的函数，比如

var a=document.getElementById(’link’);

a.setAttribute(’class’) = ‘mylinkstyle’;

可以设置一个元素的属性

同样，我们可以自定义元素的属性，比如 <a href=”#” tips=”tipscontet” title=”testtitle”>test</a>

如此，给a标签增加一个新的属性，tips。而tips的值可以用getAttribute()获取。

简单的div页面拖动效果

作者 : admin 于 2008年08月07日, 23:33:26
2008
08-7

这里主要是一些元素坐标的计算，不过我写这个东西不很兼容firefox，正在查找原因。
index

兼容ie，firefox的页面事件监听函数

作者 : admin 于 2008年08月07日, 22:01:14
2008
08-7

listenerevent

  1. //for ff
  2. if(document.addEventListener)
  3. {
  4.     function __Eventadd ( element , eventType , handle )
  5. {
  6.     element.addEventListener( eventType , handle , false );
  7. }
  8. function __Eventremove ( element , eventType , handle )
  9. {
  10.     element.removeEventListener( eventType , handle , false );
  11. }
  12. }
  13. //for ie
  14. else if(document.attachEvent)
  15. {
  16.     function __Eventadd ( element , eventType , handle )
  17. {
  18.     element.attachEvent( 'on'+eventType , handle );
  19. }
  20. function __Eventremove ( element , eventType , handle )
  21. {
  22.     element.detachEvent( 'on'+eventType , handle );
  23. }
  24. }

实际上，真正完全兼容还要很复杂的一个过程，这里也是简化到了只是能用的程度。具体请查看《JavaScript权威指南》第五版 414页

几个JS函数，自家用，共享之

作者 : admin 于 2008年08月04日, 18:45:12
2008
08-4

检测浏览器类型，主要根据 userAgent关键字来确定

  1. function __navigator()
  2. {
  3.     this.value = false;   //返回值  ie 0 firefox 1 other 2
  4. this.useragent =  navigator['userAgent'];
  5. if(this.useragent.indexOf('MSIE')>0)
  6. {
  7.     this.value = 0;
  8. }
  9. else if(this.useragent.indexOf('Firefox')>0)
  10. {
  11.     this.value = 1;
  12. }
  13. else
  14. {
  15.     this.value = 2;
  16. }
  17. }

获得浏览器相关信息

  1. function __window()
  2. {
  3.     this.innerwidth = 0;   //document width
  4. this.innerheight = 0; //document height
  5.  
  6. this.outerwidth = 0;   //browser width
  7. this.outerwidth = 0;   //browser height
  8.  
  9. this.screenx = 0;     //browser position x
  10. this.screeny = 0;   //browser position y
  11.  
  12.     /*@cc_on
  13.   @if(@_jscript)
  14.  
  15.   this.innerwidth = document.body.clientWidth;
  16.   this.innerheight = document.body.clientHeight;
  17.  
  18.   this.outerwidth = document.documentElement.clientWidth;
  19.   this.outerheight = document.documentElement.clientHeight;
  20.  
  21.   this.screenx = window.screenLeft;
  22.   this.screeny = window.screenTop;
  23.  
  24.   @else*/
  25.  
  26.   this.innerwidth = window.innerWidth;
  27.   this.innerheight = window.innerHeight;
  28.  
  29.   this.outerwidth = window.outerWidth;
  30.   this.outerheight = window.outerHeight;
  31.  
  32.   this.screenx = window.screenX;
  33.   this.screeny = window.screenY;
  34. /*@end
  35.   @*/
  36. }

JavaScript跨浏览器兼容代码

作者 : admin 于 2008年08月03日, 22:58:07
2008
08-3

方法1：检测浏览器关键字

  1. function __navigator()
  2. {
  3.     this.value = false;   //返回值  ie 0 firefox 1 other 2
  4. this.useragent =  navigator['userAgent'];
  5. if(this.useragent.indexOf('MSIE')>0)
  6. {
  7.     this.value = 0;
  8. }
  9. else if(this.useragent.indexOf('Firefox')>0)
  10. {
  11.     this.value = 1;
  12. }
  13. else
  14. {
  15.     this.value = 2;
  16. }
  17. }

方法2：

  1. if(document.all)
  2.   ie
  3. else
  4.   other

方法3：

  1. <!--[if IE]>
  2.     js for ie
  3. <![endif]-->
  4. <!--[if !IE]>
  5.     js for !ie
  6. <![endif]-->

方法4:

  1. /*@cc_on
  2.   @if(@_jscript)
  3.   is for ie
  4.   @else*/
  5.   js for !ie
  6. /*@end
  7.   @*/

一个操作Cookie的小程序

作者 : admin 于 2008年07月30日, 22:57:24
2008
07-30

simplecookie

  1. <br />
  2. /*<br />
  3.     一个简单的cookie操作函数，自家用<br />
  4. */<br />
  5. function SetCookie()<br />
  6. {<br />
  7.     var name = arguments[0];<br />
  8. var value = arguments[1];<br />
  9. //初始化默认存储时间<br />
  10. var time = 3600;<br />
  11. if(arguments[2]!=undefined)<br />
  12. {<br />
  13.     time = arguments[2]<br />
  14. }<br />
  15. if(arguments[0]==undefined||arguments[0]==undefined)<br />
  16. {<br />
  17.     alert("SetCookie Has ERROR Agruments");<br />
  18. }<br />
  19. document.cookie = name+"="+escape(value)+" ; expires="+GetTime(time);<br />
  20. }<br />
  21. function GetCookie( name )<br />
  22. {<br />
  23.     var arr = document.cookie.match(new RegExp("(^|)"+name+"=([^;]*)(;|$)"));<br />
  24. if(arr!=null)<br />
  25. {<br />
  26.     return unescape(arr[2]);<br />
  27. }<br />
  28. else<br />
  29. {<br />
  30.     return null;<br />
  31. }<br />
  32. }<br />
  33. function DelCookie( name )<br />
  34. {<br />
  35.     var value = GetCookie( name );<br />
  36. if(value!=null)<br />
  37. {<br />
  38.     document.cookie = name+"="+escape(value)+" ; expires="+GetTime( 0 );<br />
  39. }<br />
  40. }<br />
  41. function GetTime( time )<br />
  42. {<br />
  43.     var exp = new Date();<br />
  44. exp.setTime( exp.getTime()+time*1000 );<br />
  45. return exp.toGMTString();<br />
  46. }<br />

用户行为状态的持久化

作者 : admin 于 2008年07月30日, 12:41:12
2008
07-30

用持久化这个词，有点拽文的意思，但必须找出一个形象的词汇来描述，暂且这么用。

用户行为持久，主要指保留用户行为状态，比如保存用户的登录信息，可以让用户不必每次输入密码。保留用户当前打开的页面，当前对客户端的操作等。

用户登录状态，主要应用cookie的方式把一些认证信息保存在本地，而其他信息的保留，同样可以使用cookie保存，比如框架的一些状态。

http://openoa.sunboyu.cn   这个网站中，可以看一下对用户行为持久的一些操作。首先是框架左侧菜单显示的控制。这个控制可以在刷新的时候保持用户的折叠状态，而不用每次刷新，都去折叠菜单。这个控制用cookie保存数据。

还有个操作，就是曾经另我很头疼的，大框架每刷新一次，主框架都会恢复默认的链接，也就是中间打开的页面会丢失。最近用js解决了这个问题，每次点击左侧菜单链接的时候，使用锚点标记的方式把链接写在url中，再次刷新的时候，根据url中的锚点确认主框架的链接。

这两个功能都完成了，用着还不错。

死苛正则表达式

作者 : admin 于 2008年06月27日, 12:57:06
2008
06-27

犀牛书买来后，先看的正则。

正则就是一堆逻辑规则的集合，没啥难的，类似语句中的if else foreach等，只是把语句换乘符号了。

首先得会拆解逻辑，而后用那些乱七八糟的符号去描述这些逻辑。

规则是人家定的，没办法，只好用这些东西。

进步很快，希望能称谓正则高手。