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

offsetParent作用范围

Submitted by gouki on 2011, August 30, 10:23 PM

在看代码的时候看到了这个offsetParent也就顺便找了一下资料：

XML/HTML代码
  1. offsetParent从字面上理解，这是在查找元素的父亲．可实际应用中，根据浏览器他会返回不同的结果．在Opera较低版本中返回被引用元素的直接父元素，在IE中使用offsetParent有时会返回body元素，有时会返回被引用元素的父元素．为什么IE会这样．我会在下面的实例演示中解释清楚．而在FireFox中他总是返回body元素．  
  2. 注意：offsetLeft与offsetTop永远是根据offsetParent来返回值，如果offsetParent返回的是父元素，那么他们就返回与父元素的偏移结果，如果offsetParent返回的是body元素，那么他们就返回与body元素的偏移结果．请根据浏览器进行测试．  

然后找了一段代码进行测试：

XML/HTML代码
  1. <html>  
  2. <head>  
  3.     <title>Dom：offsetParent使用</title>  
  4. </head>  
  5. <body>  
  6.     <p>该网页中有4个div 他们的id值分别是a,a_1,b,b_1<br/> a包含了a_1．b包含了b_1<br/> a和b是相互独立的．．下面我们分别对a_1和b_1两个子元素使用offsetParent方法．  
  7.         你用IE浏览器测试，你会发现a1的运函数弹出body，而b1的运行函数返回了div，同样的两个子元素．同样的使用方法．为什么返回的结果不一样呢？ 原因就是我为b1的父元素b,增加了一个宽度属性以后．他就把offsetParent看做是元素的父元素．如果不为b元素指定任何属性样式，他则返回body  
  8.         而在火狐和谷歌浏览器中两次都会弹出body,不会受此影响．</p>  
  9.     <div id="a">  
  10.         <div id="a_1"></div>  
  11.     </div>  
  12.     <div id="b" style="width:200px;">  
  13.         <div id="b_1"></div>  
  14.     </div>  
  15.     <script type="text/javascript">  
  16.         function a1_offsetParent() { //测试b元素的offsetParent  
  17.             var a_1 = document.getElementById("a_1");  
  18.             alert(a_1.offsetParent.tagName);  
  19.         }  
  20.         a1_offsetParent();//运行a1测试函数  
  21.         function b1_offsetParent() {  
  22.             var b_1 = document.getElementById("b_1");  
  23.             alert(b_1.offsetParent.tagName);  
  24.         }  
  25.         b1_offsetParent();//运行b1测试函数  
  26.     </script>  
  27. </body>  
  28. </html>  

这个时候就象上面的说明所说的，在firefox和webkit核心下两者都返回了“body”，然而：

XML/HTML代码
  1. 网友hcp8706说：  
  2. 在FF中使用offsetParent时不一定总返回body元素，当父元素使用css设置了定位属性时，offsetParent就会返回父元素．   

于是我在div的id="b"的style里加入了position:absolute，然后再测试，果然就返回了DIV。

XML/HTML代码
  1. <div id="b" style="width:200px;position:absolute;">  
  2.     <div id="b_1"></div>  
  3. </div>  
  4. <script type="text/javascript">  
  5.     function b1_offsetParent() {  
  6.         var b_1 = document.getElementById("b_1");  
  7.         alert(b_1.offsetParent.tagName);  
  8.     }  
  9.     b1_offsetParent();//运行b1测试函数  
  10. </script>  


学习完毕，上述的信息来自：http://www.web666.net/dom/offsetParent.html

Tags: offsetparent

Javascript | 评论:0 | 阅读:18244

头发是干什么用的

Submitted by gouki on 2011, August 29, 10:46 AM

隔壁的外公问儿子，五官是用来干嘛 的。
儿子一一回答，唯有一个答案让大家都捧腹大笑
1、眼睛，是用来看东西的
2、鼻子，是用来闻东西的
3、嘴巴，是用来说话的
4、耳朵，是用来听声音的
5、头发，是用来摆造型的
第五个回答让所有听到的人都捧腹大笑。果然是个很意外的回答

小家伙现在稀奇古怪的想法很多了

Tags: 头发

Baby | 评论:2 | 阅读:17069

转：网站优化 更小的静态资源

Submitted by gouki on 2011, August 28, 9:04 PM

这是来自perfgeeks.com的一篇文章，介绍了一些常见的工具，还有一个脚本。
在用YII框架的时候，我用的是hightman写的一个cssmin的插件，可以直接把css和js进行合并到一个文件。对于图片，我都是把这个艰巨的任务交给前端，由他们完成，至于他们用什么样的png或者gif之类的优化软不不是我关心的了。OK，先上文章
来源网址是是：http://www.perfgeeks.com/?p=660
内容如下：

更小的静态资源(js、css、png、gif)，意味着更少的网络传送时间。构建的时候，可以把这些静态资源进行压缩优化(不像gzip/deflate压缩)，使之更小化。有很多相应的开源工具帮助你完成这项工作。

javascript

  • Google Closure Compiler
  • UglifyJS
  • YUI Compressor
  • ShrinkSafe
  • 其它,比如JSMIN

Node.js、jQuery1.5开始使用UglifyJS，UglifyJS压缩比YUI Compressor更小、比Google Closure Compiler更安全。尽管如此，但UglifyJS需要部署NodeJS环境，所以我们还是选择使用Google Closure Compiler

style(css)

  • CSSTidy
  • YUI Compressor
  • Yslow/Google Page Speed

CSSTidy和YUI Compressor都很棒，我们还是选择老牌的YUI Compressor，因为我们更熟悉它，它也能够满足我们的需求。

png8/gif图片

  • Optipng
  • AdvanceCOMP(advpng、advdef)
  • ImageMagic(mogrify、identify、convert)
  • Pngcrush
  • Pngout
  • gifsicle
  • jpegtran

任何大一点的网站页面都会使用到不少图片，压缩优化图片很有必要。选择什么样的图片格式，决定了怎么去压缩图片。一般而言，只要是非动画图片，我们 推荐png8，即便是颜色很少的小图片(尽管这样的图片gif有更高压缩性，但应该使用css sprites)。Pngout没有开放源码，仅能在Window NT平台使用，所以我们并不考滤使它。Pngcrush虽然很好用，但是optipng、advpng以及advdef结合使用能把图片压缩得更小，所以 我们选择optipng、advpng以及advdef压缩优化PNG图片。 Optipng压缩优化图片、而advdef则优化压缩算法。

构建脚本

发布产品的时候，我们希望构建前端资源，包括压缩优化、合并等等。构建应该尽量满足:
1.整个过程是自动的，不需要人工介入
2.所有的操作都是安全的
3.免费的命令行工具

我们这里应用bash写了一个简版的部署脚本，能够简单地应付中小型网站静态资源发布。

XML/HTML代码
  1. #!/bin/sh  
  2. #filename:build.sh  
  3. IN_FILE="/var/www.imgwell.com/themes/ocean/misc"  
  4. OUT_FILE="/var/www.imgwell.com/misc"  
  5. EXCLUDE_FILES="jquery.min.js LAB.min.js"  
  6. GOOGLE_COMPILER="/opt/build/bin/compiler.jar"  
  7. YUI_COMPRESSOR="/opt/build/bin/yuicompressor-2.4.6.jar"  
  8. OPTIPNG="/usr/local/bin/optipng -quiet -o3 "  
  9. ADVPNG="/usr/local/bin/advpng -q -z -4 "  
  10. ADVDEF="/usr/local/bin/advdef -q -z -4 "  
  11.    
  12.    
  13. function mt_ver_code() {  
  14.     local MATRIX="23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnpqrstuvwxyz"  
  15.     local LENGTH=12  
  16.     while [ "${n:=1}" -le "$LENGTH" ]; do  
  17.         local PASS="$PASS${MATRIX:$(($RANDOM%${#MATRIX})):1}"  
  18.         let n+=1  
  19.     done  
  20.     echo -n ${PASS}  
  21. }  
  22.    
  23. function mt_file_ext() {  
  24.     local FILE=`basename -- "$1"`  
  25.     echo -n "${FILE##*.}"  
  26. }  
  27.    
  28. function mt_file_size() {  
  29.     if [ -f "$1" ]; then  
  30.         echo -n `ls -l -- "$1" |awk '{print $5}'`  
  31.     else  
  32.         echo -n 0  
  33.     fi  
  34. }  
  35.    
  36. function mt_has_exclude() {  
  37.     if [ -z "$EXCLUDE_FILES" ]; then  
  38.         echo -n 0  
  39.         return 0  
  40.     fi  
  41.     echo "$EXCLUDE_FILES" |grep -q -w -- "${1}"  
  42.     if [ $? -eq 0 ]; then  
  43.         echo -n "1"  
  44.     else  
  45.         echo -n "0"  
  46.     fi  
  47. }  
  48.    
  49. function mt_google_compile() {  
  50.     java -jar "$GOOGLE_COMPILER" --js $1 --js_output_file $2  
  51. }  
  52.    
  53. function mt_yui_compressor() {  
  54.     java -jar "$YUI_COMPRESSOR" $1 -o $2 --charset utf-8  
  55. }  
  56.    
  57. function mt_png_opti() {  
  58.     [ -f "`echo ${OPTIPNG} |awk '{print $1}'`" ] && ${OPTIPNG} "${1}"  
  59.     [ -f "`echo ${ADVPNG} |awk '{print $1}'`" ] && ${ADVPNG} "${1}"  
  60.     [ -f "`echo ${ADVDEF} |awk '{print $1}'`" ] && ${ADVDEF} "${1}"  
  61. }  
  62.    
  63. function __main__() {  
  64.     [ -d "$IN_FILE" ] || exit 1  
  65.     local VER_CODE=`mt_ver_code`  
  66.     local FILE_STATUS="!"  
  67.     mkdir -p "${OUT_FILE}/${VER_CODE}"  
  68.    
  69.     for f in `ls -1 "$IN_FILE"`; do  
  70.         if [ -d "${IN_FILE}/${f}" ] ; then  
  71.             continue  
  72.         fi  
  73.    
  74.         local HAS_EXCLUDE=`mt_has_exclude "${f}"`  
  75.         local FILE_SRC_SIZE=`mt_file_size "${IN_FILE}/${f}"`  
  76.    
  77.         if [ "`mt_file_ext "${f}"`" = "js" -a "$HAS_EXCLUDE" = "0" ]; then  
  78.             mt_google_compile "${IN_FILE}/${f}" "${OUT_FILE}/${VER_CODE}/${f}"  
  79.             FILE_STATUS="G"  
  80.         elif [ "`mt_file_ext "${f}"`" = "css" -a "$HAS_EXCLUDE" = "0"  ]; then  
  81.             mt_yui_compressor "${IN_FILE}/${f}" "${OUT_FILE}/${VER_CODE}/${f}"  
  82.             FILE_STATUS="Y"  
  83.         elif [ "`mt_file_ext "${f}"`" = "png" -a "$HAS_EXCLUDE" = "0" ]; then  
  84.             cp "${IN_FILE}/${f}" "${OUT_FILE}/${VER_CODE}"  
  85.             [ -f "${OUT_FILE}/${VER_CODE}/${f}" ] && {  
  86.                 mt_png_opti "${OUT_FILE}/${VER_CODE}/${f}"  
  87.                 FILE_STATUS='O'  
  88.             }  
  89.         else  
  90.             cp "${IN_FILE}/${f}" "${OUT_FILE}/${VER_CODE}"  
  91.             if [ $? -eq 0 ]; then  
  92.                 FILE_STATUS="-"  
  93.             else  
  94.                 FILE_STATUS="D"  
  95.             fi  
  96.         fi  
  97.    
  98.         local FILE_DST_SIZE=`mt_file_size "${OUT_FILE}/${VER_CODE}/${f}"`  
  99.         echo "${FILE_STATUS} ${HAS_EXCLUDE} ${f} ${FILE_SRC_SIZE}/${FILE_DST_SIZE}"  
  100.     done  
  101.     echo "===========/" $VER_CODE "\=========="  
  102. }  
  103.    
  104. __main__  

执行结果如下

[root@www-avatar misc]# ./build.sh
O 0 6N9FQPpTHCy.png 820/258
Y 0 base.css 40171/35530
O 0 FSEB6oLTK3I.png 10362/10362
- 0 GsNJNwuI-UM.gif 522/522
O 0 heart.png 921/807
O 0 IJYgcESal33.png 5771/5771
O 0 _IKHHfAgFQe.png 2635/2302
G 0 jquery.elastic.js 4988/1665
- 1 jquery.min.js 85260/85260
G 0 jquery.ui.dialog.js 10074/5274
G 0 jquery.ui.pview.js 4565/2878
- 1 LAB.min.js 5537/5537
O 0 lFahQXTaTNO.png 90/90
G 0 mutfa.js 36958/21777
O 0 nCItFQafRu8.png 452/288
O 0 p13yZ069LVL.png 792/219
- 0 plupload.flash.swf 18537/18537
G 0 plupload.full.js 48277/46682
Y 0 position.css 7737/7440
O 0 star.png 3292/283
G 0 stars.js 6333/2622
Y 0 ui_plugin.css 12794/12079
G 0 up.js 6230/3991
- 0 uVR6w3wRHEJ.gif 54/54
O 0 WSQ2wnhSG-F.png 245/229
- 0 _ZWZupdaAgS.gif 827/827
===========/ LruQcmx4Zi84 \==========

总结

1.UglifyJS压缩比YUI Compressor更小，比Google Closure Compiler更安全。不想冒险，还是应该选择UglifyJS。若想最小化，可以选择Google Closure Compiler
2.YUI Compressor压缩css文件。但CSSTidy也很不错
3.optipng -o3 *.png |advpng -z -4 *.png |advdef -z -4 *.png 将最大化压缩优化png图片
4.网页尽量使用png格式图片，并且压缩优化它，使之最优

-------------------------------

纠结，原文中的代码是有配色的，但是COPY过来就没有配色了，而自带的配色没有bash的配色。所以。。。将就点看了，或者看原文吧：http://www.perfgeeks.com/?p=660

Tags: perfgeeks, hightman, cssmin

PHP | 评论:2 | 阅读:17962

10大最适合编程的字体推荐下载，让代码看起来更美更舒服！

Submitted by gouki on 2011, August 27, 11:51 AM


我是因为看了netbeans的字体配置后，才用上了Consolas字体。我现在用的是phpstorm，而他也是基于jre的啦。于是我现在把jre里的字体配置文件复制出来。然后更新一更新就复制过去。保证所有的IDE（用jre的）字体一样。当然也好看。。。
正如文中所说的，大家用的最多的都应该是Courier New啦。写PHP的大多会用editplus，默认字体就是这个，我用这个5、6年。直到換成netbeans后，才觉得果然consolas更圆滑，看起来更舒服，而且字体也可以稍放大一点不会感觉不适。
因为我在用editplus的时候，如果字体放大一点，会看的很不适（因为我用的是笔记本，屏幕小，字体大后看的不舒服。。。）
好吧，你们还是去看文章吧，说的十种字体是：
10. Courier
9. Andale Mono
8. Monaco
7. Profont
6. Monofur
5. Proggy
4. Droid Sans Mono
3. Deja Vu Sans Mono
2. Consolas + 中文雅黑混合版
1. Inconsolata
看上去那个Inconsolata不错，因为很细，不过，已经适合Consolas了，顺便说一下，其实netbeans默认的字体就是couriernew+宋体。因为它是基于jre的了啦。你看一下font.propeties文件就知道了

原文请看：http://www.iplaysoft.com/top10-programming-fonts.html

Misc | 评论:1 | 阅读:22167

郁闷，又在纠结swfupload的302问题了

Submitted by gouki on 2011, August 25, 11:33 PM

这是一个非常让人郁闷的问题。问题也知道根源在哪里，但TMD就是纠结。
因为是SWF，你懂的，有些包抓不到的。但不搞又不行，准备用smartsniff来抓数据看了。

其实就是一个session的问题，但还没有彻底搞定，真烦人。
yii框架中应用swfupload还是有点纠结的（其实以前都没有问题，不知道什么时候，突然间就开始有这个BUG了。。。）

仔细排查了一下，其实，大家都知道，session原本就是用来处理登录这种玩意的。果然排查后发现，新开的上传进程之所以是302，就是因为跳转到登录页面去了。晶啊。每次都是这个原因，我靠

PHP | 评论:2 | 阅读:25761

Records:3085«‹256257258259260261262263264265›»