打渔樵夫 » JavaScript

让IE6支持first-child和last-child伪类选择符

乔夫 — Sun, 22 Nov 2009 08:17:06 +0000

关于 first-child 和 last-child 的用途我想就不用多说了吧，做导航、列表类的东东时，想让第一个或最后一个样式区别于其它中间的各个元素，比如字体、间距、背景……这时自然就会想到这两个伪类选择符。

在这里我是想做一个图片展示，一行三张图片，各图片间距 55px，就版式需要而言，第一个图片这个 margin-left:55px; 是肯定不行的，实际需要它零距离抵边。以往的话，就是直接在第一个图片的容器标签上直接加个　margin-left:0; 的样式。但假使这里不是一行，而是多行的话，是不是就太繁琐了？后台程序写循环时又得多做一次无谓的判断。所以，就要用到 first-child 了。

a { margin-left: 55px; }　/*我的图片是放在A标签里的*/
a:first-child { margin-left: 0; }

效果实现。但问题也接着来了，IE6 是不支持 first-child 标签的。怎么办呢？为了不给后台添麻烦，那就得前台麻烦了。搜索一下，看网友 Realazy 是用 JS 来判断，加上选择符判断后，单为 IE6 遍历出所有标签，然后在第一个标签上加样式。不过，他是用的 ul 标签遍历出其中的 li，可我这里是把 a 放在了一个 div 里，形如：

="pics">
="#">="a.jpg" alt="" />>
="#">="b.jpg" alt="" />>
="#">="c.jpg" alt="" />>
>

所以，在加上样式

a.first-child { margin-left: 0; }

后，还不得不改动一下 JS 代码：

OK搞定，效果实现！

但是，后来细想，就为这么一个效果，写出这么多代码也太费油了吧？再由 JS 联想到 CSS 的 expression。略一搜索，果真有办法。单为 IE6 弄个样式：

a { * margin-left: expression(this.previousSibling==null?'0':'55px'); }

一句话搞定！如果这里不是 first-child 而是 last-child，想改变最后一个标签的样式怎么呢？简单，将样式中的 previousSibling 替换成 nextSibling 就得了。

呵呵，和上面代码种种同为 JS 原理各一，但后者就一句话而已，是不是超简单呢？

本例效果可浏览这里 >>

PS：关于 CSS 中的 Expression

IE5 及其以后版本支持在 CSS 中使用 expression，用来把 CSS 属性和 Javas cript 表达式关联起来，这里的 CSS 属性可以是元素固有的属性，也可以是自定义属性。就是说 CSS 属性后面可以是一段Javas cript表达式，CSS属性的值等于 Javas cript 表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。更多……

再谈PNG背景透明

乔夫 — Wed, 25 Mar 2009 15:14:57 +0000

都说起老茧了，但一不注意还是会出问题。以往的透明都只是在样式表现的方法和方式上折中，说到底背景始终都是背景。这次突然想在页面中插入PNG图片并做链接时，才发现要做这个透明还真麻烦。试了N多种方法，但单纯用样式来解决各浏览器差异的话，效果是完全可以出来，但总有这样那样的问题，比如链接触发范围或者焦点，很是诡异。就像我遇到鼠标手移到实体图形上时链接正常，一移到透明背景区域就没了链接。乖乖个隆得咚，链接原来也可以做镂空效果的，哈哈……不过，最后搜索一番问题最终还是解决，就是加一段js代码做个判断，办法很简单，代码一眼就懂，所以就不做辍述了，有需要的朋友可以自己测试一下。

// JavaScript Document
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var j=0; j<document.images.length; j++)
{
var img = document.images[j]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
j = j-1
}
}
}
}
window.attachEvent("onload", correctPNG);

汉字简繁转换和调整网页字体大小

乔夫 — Mon, 18 Aug 2008 19:24:51 +0000

磨洋工也终于还是磨出一张皮儿，好孬还是把“上邪·莫邪”的 theme 给弄了一个出来了。满意不满意再说了，空了再来考虑。我还想着给“追风岁月”换名换标哩，但是一想到我的计划永远是赶不上变化的，不说也罢，不说也罢！

不过，Viviti 有别于 Blogger 的就是它的支持很好很强大，页面所有元素都可以像 Widgets 一样的自由摆放。制作 theme 的时候，js 什么的都可以加，最后打成一 zip 包上传就行。但强大只是总体而言，其实还是有着不便的时候。比如，它把侧边和内容区整体划成两块。结构什么的是无法自定义的，最多只能改一下相关样式。这样其实很痛苦，也很难操作。也就是说关于版式的创意被大体局限在了无关紧要的侧边和内容之外。所以，在这一前提下，想要弄个好的 theme 真的很难！不过，比起其它 BSP 来说，已经算是难能可贵了，还是得赞一个！

虽然，“上邪·莫邪”默认是采用繁体（正体）来着，但我还是给加了繁简转换，方便不喜欢或者不识繁体字的朋友。

分享我的两段代码：

简繁转换代码，字库不定时更新，有需要的朋友随时关注。

// JavaScript Document

//模仿语言包式的简繁转换功能插件！
var StranIt_Delay = 1000; //翻译延时毫秒（设这个的目的是让网页先流畅的显现出来）

//转换文本
function StranText(txt,toFT,chgTxt){
if(txt==""||txt==null)
return "";
toFT=toFT==null?BodyIsFt:toFT;

if(chgTxt)
txt=txt.replace((toFT?"简":"繁"),(toFT?"繁":"简"));
if(toFT){
return Traditionalized(txt);
}else{
return Simplized(txt);
}
}
//转换对象，使用递归，逐层剥到文本
function StranBody(fobj){
if(typeof(fobj)=="object"){
var obj=fobj.childNodes;
}else{
var tmptxt=StranLink_Obj.innerHTML.toString()
var StranLink="";
if(tmptxt.indexOf("简")<0){
BodyIsFt=1;
StranLink_Obj.innerHTML=StranText(tmptxt,0,1);
StranLink.title=StranText(StranLink.title,0,1);
}else{
BodyIsFt=0;
StranLink_Obj.innerHTML=StranText(tmptxt,1,1);
StranLink.title=StranText(StranLink.title,1,1);
}
setCookie(JF_cn,BodyIsFt,7);
var obj=document.body.childNodes;
}

for(var i=0;i<obj.length;i++){
var OO=obj.item(i);
if("||BR|HR|TEXTAREA|".indexOf("|"+OO.tagName+"|")>0||OO==StranLink_Obj)continue;
if(OO.title!=""&&OO.title!=null)
OO.title=StranText(OO.title);
if(OO.alt!=""&&OO.alt!=null)
OO.alt=StranText(OO.alt);
if(OO.tagName=="INPUT"&&OO.value!=""&&OO.type!="text"&&OO.type!="hidden")
OO.value=StranText(OO.value);
if(OO.nodeType==3){OO.data=StranText(OO.data);}
else
StranBody(OO);
}
}

function JTPYStr(){
return ' 皑蔼碍爱翱袄奥坝罢摆败颁办绊帮绑镑谤剥饱宝报鲍辈贝钡狈备惫绷笔毕毙闭边编贬变辩辫鳖瘪濒滨宾摈饼拨钵铂驳卜补参蚕残惭惨灿苍舱仓沧厕侧册测层诧搀掺蝉馋谗缠铲产阐颤场尝长偿肠厂畅钞车彻尘陈衬撑称惩诚骋痴迟驰耻齿炽冲虫宠畴踌筹绸丑橱厨锄雏础储触处传疮闯创锤纯绰辞词赐聪葱囱从丛凑窜错达带贷担单郸掸胆惮诞弹当挡党荡档捣岛祷导盗灯邓敌涤递缔点垫电淀钓调迭谍叠钉顶锭订东动栋冻斗犊独读赌镀锻断缎兑队对吨顿钝夺鹅额讹恶饿儿尔饵贰发罚阀珐矾钒烦范贩饭访纺飞废费纷坟奋愤粪丰枫锋风疯冯缝讽凤肤辐抚辅赋复负讣妇缚该钙盖干赶秆赣冈刚钢纲岗皋镐搁鸽阁铬个给龚宫巩贡钩沟构购够蛊顾剐关观馆惯贯广规硅归龟闺轨诡柜贵刽辊滚锅国过骇韩汉阂鹤贺横轰鸿红后壶护沪户哗华画划话怀坏欢环还缓换唤痪焕涣黄谎挥辉毁贿秽会烩汇讳诲绘荤浑伙获货祸击机积饥讥鸡绩缉极辑级挤几蓟剂济计记际继纪夹荚颊贾钾价驾歼监坚笺间艰缄茧检碱硷拣捡简俭减荐槛鉴践贱见键舰剑饯渐溅涧浆蒋桨奖讲酱胶浇骄娇搅铰矫侥脚饺缴绞轿较秸阶节茎惊经颈静镜径痉竞净纠厩旧驹举据锯惧剧鹃绢杰洁结诫届紧锦仅谨进晋烬尽劲荆觉决诀绝钧军骏开凯颗壳课垦恳抠库裤夸块侩宽矿旷况亏岿窥馈溃扩阔蜡腊莱来赖蓝栏拦篮阑兰澜谰揽览懒缆烂滥捞劳涝乐镭垒类泪篱离里鲤礼丽厉励砾历沥隶俩联莲连镰怜涟帘敛脸链恋炼练粮凉两辆谅疗辽镣猎临邻鳞凛赁龄铃凌灵岭领馏刘龙聋咙笼垄拢陇楼娄搂篓芦卢颅庐炉掳卤虏鲁赂禄录陆驴吕铝侣屡缕虑滤绿峦挛孪滦乱抡轮伦仑沦纶论萝罗逻锣箩骡骆络妈玛码蚂马骂吗买麦卖迈脉瞒馒蛮满谩猫锚铆贸么霉没镁门闷们锰梦谜弥觅绵缅庙灭悯闽鸣铭谬谋亩钠纳难挠脑恼闹馁腻撵捻酿鸟聂啮镊镍柠狞宁拧泞钮纽脓浓农疟诺欧鸥殴呕沤盘庞国爱赔喷鹏骗飘频贫苹凭评泼颇扑铺朴谱脐齐骑岂启气弃讫牵扦钎铅迁签谦钱钳潜浅谴堑枪呛墙蔷强抢锹桥乔侨翘窍窃钦亲轻氢倾顷请庆琼穷趋区躯驱龋颧权劝却鹊让饶扰绕热韧认纫荣绒软锐闰润洒萨鳃赛伞丧骚扫涩杀纱筛晒闪陕赡缮伤赏烧绍赊摄慑设绅审婶肾渗声绳胜圣师狮湿诗尸时蚀实识驶势释饰视试寿兽枢输书赎属术树竖数帅双谁税顺说硕烁丝饲耸怂颂讼诵擞苏诉肃虽绥岁孙损笋缩琐锁獭挞抬摊贪瘫滩坛谭谈叹汤烫涛绦腾誊锑题体屉条贴铁厅听烃铜统头图涂团颓蜕脱鸵驮驼椭洼袜弯湾顽万网韦违围为潍维苇伟伪纬谓卫温闻纹稳问瓮挝蜗涡窝呜钨乌诬无芜吴坞雾务误锡牺袭习铣戏细虾辖峡侠狭厦锨鲜纤咸贤衔闲显险现献县馅羡宪线厢镶乡详响项萧销晓啸蝎协挟携胁谐写泻谢锌衅兴汹锈绣虚嘘须许绪续轩悬选癣绚学勋询寻驯训讯逊压鸦鸭哑亚讶阉烟盐严颜阎艳厌砚彦谚验鸯杨扬疡阳痒养样瑶摇尧遥窑谣药爷页业叶医铱颐遗仪彝蚁艺亿忆义诣议谊译异绎荫阴银饮樱婴鹰应缨莹萤营荧蝇颖哟拥佣痈踊咏涌优忧邮铀犹游诱舆鱼渔娱与屿语吁御狱誉预驭鸳渊辕园员圆缘远愿约跃钥岳粤悦阅云郧匀陨运蕴酝晕韵杂灾载攒暂赞赃脏凿枣灶责择则泽贼赠扎札轧铡闸诈斋债毡盏斩辗崭栈战绽张涨帐账胀赵蛰辙锗这贞针侦诊镇阵挣睁狰帧郑证织职执纸挚掷帜质钟终种肿众诌轴皱昼骤猪诸诛烛瞩嘱贮铸筑驻专砖转赚桩庄装妆壮状锥赘坠缀谆浊兹资渍踪综总纵邹诅组钻致钟么为只凶准启板里雳余链泄标确号';
}
function FTPYStr(){
return ' 皚藹礙愛翺襖奧壩罷擺敗頒辦絆幫綁鎊謗剝飽寶報鮑輩貝鋇狽備憊繃筆畢斃閉邊編貶變辯辮鼈癟瀕濱賓擯餅撥缽鉑駁蔔補參蠶殘慚慘燦蒼艙倉滄廁側冊測層詫攙摻蟬饞讒纏鏟産闡顫場嘗長償腸廠暢鈔車徹塵陳襯撐稱懲誠騁癡遲馳恥齒熾沖蟲寵疇躊籌綢醜櫥廚鋤雛礎儲觸處傳瘡闖創錘純綽辭詞賜聰蔥囪從叢湊竄錯達帶貸擔單鄲撣膽憚誕彈當擋黨蕩檔搗島禱導盜燈鄧敵滌遞締點墊電澱釣調叠諜疊釘頂錠訂東動棟凍鬥犢獨讀賭鍍鍛斷緞兌隊對噸頓鈍奪鵝額訛惡餓兒爾餌貳發罰閥琺礬釩煩範販飯訪紡飛廢費紛墳奮憤糞豐楓鋒風瘋馮縫諷鳳膚輻撫輔賦複負訃婦縛該鈣蓋幹趕稈贛岡剛鋼綱崗臯鎬擱鴿閣鉻個給龔宮鞏貢鈎溝構購夠蠱顧剮關觀館慣貫廣規矽歸龜閨軌詭櫃貴劊輥滾鍋國過駭韓漢閡鶴賀橫轟鴻紅後壺護滬戶嘩華畫劃話懷壞歡環還緩換喚瘓煥渙黃謊揮輝毀賄穢會燴彙諱誨繪葷渾夥獲貨禍擊機積饑譏雞績緝極輯級擠幾薊劑濟計記際繼紀夾莢頰賈鉀價駕殲監堅箋間艱緘繭檢堿鹼揀撿簡儉減薦檻鑒踐賤見鍵艦劍餞漸濺澗漿蔣槳獎講醬膠澆驕嬌攪鉸矯僥腳餃繳絞轎較稭階節莖驚經頸靜鏡徑痙競淨糾廄舊駒舉據鋸懼劇鵑絹傑潔結誡屆緊錦僅謹進晉燼盡勁荊覺決訣絕鈞軍駿開凱顆殼課墾懇摳庫褲誇塊儈寬礦曠況虧巋窺饋潰擴闊蠟臘萊來賴藍欄攔籃闌蘭瀾讕攬覽懶纜爛濫撈勞澇樂鐳壘類淚籬離裏鯉禮麗厲勵礫曆瀝隸倆聯蓮連鐮憐漣簾斂臉鏈戀煉練糧涼兩輛諒療遼鐐獵臨鄰鱗凜賃齡鈴淩靈嶺領餾劉龍聾嚨籠壟攏隴樓婁摟簍蘆盧顱廬爐擄鹵虜魯賂祿錄陸驢呂鋁侶屢縷慮濾綠巒攣孿灤亂掄輪倫侖淪綸論蘿羅邏鑼籮騾駱絡媽瑪碼螞馬罵嗎買麥賣邁脈瞞饅蠻滿謾貓錨鉚貿麽黴沒鎂門悶們錳夢謎彌覓綿緬廟滅憫閩鳴銘謬謀畝鈉納難撓腦惱鬧餒膩攆撚釀鳥聶齧鑷鎳檸獰甯擰濘鈕紐膿濃農瘧諾歐鷗毆嘔漚盤龐國愛賠噴鵬騙飄頻貧蘋憑評潑頗撲鋪樸譜臍齊騎豈啓氣棄訖牽扡釺鉛遷簽謙錢鉗潛淺譴塹槍嗆牆薔強搶鍬橋喬僑翹竅竊欽親輕氫傾頃請慶瓊窮趨區軀驅齲顴權勸卻鵲讓饒擾繞熱韌認紉榮絨軟銳閏潤灑薩鰓賽傘喪騷掃澀殺紗篩曬閃陝贍繕傷賞燒紹賒攝懾設紳審嬸腎滲聲繩勝聖師獅濕詩屍時蝕實識駛勢釋飾視試壽獸樞輸書贖屬術樹豎數帥雙誰稅順說碩爍絲飼聳慫頌訟誦擻蘇訴肅雖綏歲孫損筍縮瑣鎖獺撻擡攤貪癱灘壇譚談歎湯燙濤縧騰謄銻題體屜條貼鐵廳聽烴銅統頭圖塗團頹蛻脫鴕馱駝橢窪襪彎灣頑萬網韋違圍爲濰維葦偉僞緯謂衛溫聞紋穩問甕撾蝸渦窩嗚鎢烏誣無蕪吳塢霧務誤錫犧襲習銑戲細蝦轄峽俠狹廈鍁鮮纖鹹賢銜閑顯險現獻縣餡羨憲線廂鑲鄉詳響項蕭銷曉嘯蠍協挾攜脅諧寫瀉謝鋅釁興洶鏽繡虛噓須許緒續軒懸選癬絢學勳詢尋馴訓訊遜壓鴉鴨啞亞訝閹煙鹽嚴顔閻豔厭硯彥諺驗鴦楊揚瘍陽癢養樣瑤搖堯遙窯謠藥爺頁業葉醫銥頤遺儀彜蟻藝億憶義詣議誼譯異繹蔭陰銀飲櫻嬰鷹應纓瑩螢營熒蠅穎喲擁傭癰踴詠湧優憂郵鈾猶遊誘輿魚漁娛與嶼語籲禦獄譽預馭鴛淵轅園員圓緣遠願約躍鑰嶽粵悅閱雲鄖勻隕運蘊醞暈韻雜災載攢暫贊贓髒鑿棗竈責擇則澤賊贈紮劄軋鍘閘詐齋債氈盞斬輾嶄棧戰綻張漲帳賬脹趙蟄轍鍺這貞針偵診鎮陣掙睜猙幀鄭證織職執紙摯擲幟質鍾終種腫衆謅軸皺晝驟豬諸誅燭矚囑貯鑄築駐專磚轉賺樁莊裝妝壯狀錐贅墜綴諄濁茲資漬蹤綜總縱鄒詛組鑽緻鐘麼為隻兇準啟闆裡靂餘鍊洩標確號';
}

function Traditionalized(cc){
var str='';
var ss=JTPYStr();
var tt=FTPYStr();
for(var i=0;i<cc.length;i++){
if(cc.charCodeAt(i)>10000&&ss.indexOf(cc.charAt(i))!=-1)
str+=tt.charAt(ss.indexOf(cc.charAt(i)));
else
str+=cc.charAt(i);
}
return str;
}

function Simplized(cc){
var str='';
var ss=JTPYStr();
var tt=FTPYStr();

for(var i=0;i<cc.length;i++){
if(cc.charCodeAt(i)>10000&&tt.indexOf(cc.charAt(i))!=-1)
str+=ss.charAt(tt.indexOf(cc.charAt(i)));
else
str+=cc.charAt(i);
}
return str;
}

function setCookie(name, value){ //cookies设置
var argv = setCookie.arguments;
var argc = setCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
if(expires!=null){
var LargeExpDate = new Date ();
LargeExpDate.setTime(LargeExpDate.getTime() + (expires*1000*3600*24));
}
document.cookie = name + "=" + escape (value)+((expires == null) ? "" : ("; expires=" +LargeExpDate.toGMTString()));
}

function getCookie(name){ //cookies读取
var search = name + "=";
if(document.cookie.length > 0){
offset = document.cookie.indexOf(search);
if(offset != -1){
offset += search.length;
end = document.cookie.indexOf(";", offset);
if(end == -1)
end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
else
return "";
}
}

var StranLink_Obj=document.getElementById("StranLink");
if (StranLink_Obj){
var JF_cn="ft"+self.location.hostname.toString().replace(/\./g,"");
var BodyIsFt=getCookie(JF_cn);
if(BodyIsFt!="0")
BodyIsFt=Default_isFT;
with(StranLink_Obj){
if(typeof(document.all)!="object"){ //非IE浏览器
href="javascript:StranBody()";
}else{
href="#";
onclick= new Function("StranBody();return false");
}
//title=StranText("点击以繁体中文方式浏览",0,1);
//innerHTML=StranText(innerHTML,0,1);
}

if(BodyIsFt=="1"){
setTimeout("StranBody()",StranIt_Delay);
}
}

以上代码存为chinese.js，以下为调用代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>简繁体转换</title>
<script type="text/javascript" language="javascript">
var Default_isFT = 1 //默认是否繁体，0-简体，1-繁体
</script>
</head>

<body>
文字测试编码设为utf-8
<a id="StranLink">简体</a> |
<script type="text/javascript" src="chinese.js" charset="utf-8"></script>
</body>
</html>

再附一个字体大小调整代码。和上面繁简转换代码一样，网上可以搜出 N 多种来。但有一个不得不重视的问题：如果你的大小只是针对调整内容页面好说。假如你想在 list 页面里，所有内容字体大小皆可控制（效果见“上邪·莫邪”）那就一定会遇到一个问题。一般而言，JS 代码都是针对 ID 来执行的，而事实上不管是 BSP 还是独立博客程序，list 页的内容部份，那肯定都是套用的 class，即便有用 ID，那也是根据数据 ID 生成，要想遍历多少不大现实。所以，只能在样式的 class 上面想办法。

getElementsByID 肯定是不能用了，JS 中的 getElementsByClass 其实也是不好用的。因为就算取出来也只是这个 object，实际你是没法像 ID 那样（*.style.fontSize=”*”）可以定义具体样式的。所以，想到一个折衷的办法。先用 class 遍历出所有的内容 div，然后再用 ID 在各个 div 上调整样式，从而达到效果。代码如下：

大小总得有个度，所以我给限制了字体的最大和最小值，如果不需要直接删除就是了。

调用直接在链接功行为上加“onClick=”SetFont(0);”或“onClick=”SetFont(1);”即可。

PS:简繁转换的 Cookie 有点小问题，字体大小我就根本没加 cookie，但执行效果是没有问题的，无伤大雅。等心情好了，考虑 theme 换“肤色”的时候，一并解决……

手上有 10 个 Viviti 邀请，有需要的欢迎索取。

如此勤奋地追风

乔夫 — Mon, 03 Mar 2008 22:10:41 +0000

因为下一版追风岁月要采用wordpress程序，所以，这两天疯狂学习php。经常是通宵达旦。还好，收效不错，诚如人们所说，程序语言总是相通的。所以，新版theme，因为版式效果需要程序支持的，全部自己手写且业已完成，而相应插件也改动不少。感觉最拉风的是，之前从未写过一句php代码呵。而这次，不但写出来了，而且还按照科学的方法，没去动wordpress的源码，而是把追风的代码全写成了一个插件。也参考别人方法，把整站所有的css和js文件全部include进一个页面，以期减少页面载入时的链接请求，而且还对代码进行了压缩，体积大为改观，差不多减少一半。当然，这也是不得已而为之，因为过于注重版式，所以页面体积大得有点吓人，呵呵……

不过，不管怎么说，看来我的新年计划还是可行的嘛！想想，也有些搞笑。就一个theme而已，php,javascript,flash as什么都用到了，会不会是都把简单的问题复杂化了呢？思索ing……

的确有点疯狂！通宵之后，睡得太早，搞得四点多就起来了。此刻，凌晨六点，大多的人们还在沉睡，而我已经开始写第二篇博文了，够勤奋吧？哈哈……

当博客网页遇到JavaScript…

乔夫 — Sun, 02 Sep 2007 11:12:10 +0000

在博客网站中经常需要各类JavaScript应用，以实现特定的功能，事实上，打开任何一个博客网页，几乎都可以看到相应的JavaScript 代码，比如说访问跟踪与统计、广告代码、博客附加功能如各类插件以及近来日趋流行的Widgets等，为标准的Html网页提供了有益的扩展与支持。不过，有时候，这些JavaScript代码也会在某种程度上大大降低网页的加载速度，影响用户体验，特别当网页中附加了过多的JavaScript的应用时。

从技术角度讲，JavaScript最大的问题在于其执行时不能并行处理(不涉及Ajax应用)，简单地说，当某段JavaScript代码被加载与执行时，页面的其他部分只能等待其运行完毕才能顺序执行，这也意味着如果网页中某段JavaScript代码因种种原因执行效率降低时，网页的加载与显示速度便会直接受到影响，用户不得不等上很长时间才能看到浏览器渲染完成整个页面。

避免JavaScript代码对网页显示速度的影响

需要说明的是，对JavaScript的这一问题，并没有放之四海而皆准的解决方案，这取决于很多方面。我们下面给出的也只是最基本的思路：

将JavaScript外置以提高代码复用

严格说来，这并不会真正提高JavaScript代码的执行效率。不过，通过将JavaScript代码外置到单独的文件，而不是将相同的 JavaScript代码“冗余”地分布在多个单独的网页中，可以避免用户浏览每个页面时都得重新下载相应的内容，有效地提高代码的复用率。也即是说，用户浏览多个网页时，相同的代码只需要下载一次，这会在极大程度上减轻对服务器带宽及Web Server的压力。

当然，这只针对位于自己服务器端的代码，而对于象访问跟踪如Google Analytics代码、广告如Google AdSense代码等则无法如此处理。不过，对于某些并不需第三方服务器支持同时又存在读取效率低下的部分应用，则可考虑将相应的JavaScript转移到自己的服务器或其他带宽更有保证的服务器上来。

另外，对于外置的JavaScript文件，究竟应合并为一个统一的文件还是分为多个小文件，则需要根据网站的具体应用情况及服务器能力，进行详细的测试后找出最佳的方式。

合理布局JavaScript代码在html文件中的位置

很多博客在网页中加入JavaScript代码时采用的是简单的方法，即将其插入到网页html文件的head部分，或者让插件自动将其插入到网页中比较靠前的位置，这当然是没有错的。不过，客观地说来，除了部分需要在网页中输出内容、调整显示的JavaScript外，也存在很多完全没必要让其先于html代码执行的JavaScript，比如说Google Analytics统计，将其置于html文件比较靠前的位置存在的最大问题便是，如果这类代码所要连接的服务器出现问题——相信很多朋友都还记得去年 Google部分域被屏蔽的事件——便必然带来网页半天显示不出的情况。

理想的解决方案是将相应代码移到html文件末尾，当然，须置于之前，这样，首先以最快的速度将网页显示出来，相应的代码则在用户查看网页时“暗暗”地执行，这样，即使其运行出错也会在最大程度上保证用户体验。

延迟执行部分JavaScript代码

不过，某些JavaScript代码，可能要求必须置于html的head部分，而不能象上文所言置于body结束符之前，否则便无法正常运作或可靠地运作。对于这类代码，如果其并不修改网页显示并的确存在拖慢网页渲染速度的迹象，可考虑强制其在网页渲染完成后再予以执行。具体方法是通过 “defer”指令：

这样，浏览器即会在执行相应代码前首先完成网页内容的渲染。

白冰提醒：请慎用！defer属性是告诉浏览器Script中包含了无需立即执行的代码，并且与SRC属性联合使用，它还可以使这些脚本在后台被下载，前台的内容则正常显示给用户。等到文档加载完毕，再执行脚本。请注意是无需立即执行脚本，如果你的function中包含事件、行为，或是有document输出时会造成异想不到的结果的。小则版式错位，大则网页无法显示。所以，一定慎用！另，此属性FF似乎不睬它，只针对IE有效。

去除不必要的JavaScript代码

其实，这一点应该是最重要的。在网页中加入JavaScript代码前，应考虑清楚相应的功能是不是必需的，而对于某些本即是可有可无或没有太大意义的功能，是不是应该考虑将其拒之门外。

另外，如果有条件，或有能力，:P 最好也应具体查看一下相应的代码，检查一下其编程水平，对于某些编程能力低下、执行笨重的JavaScript代码，即使其功能可能有一定的可取之处，也应仔细权衡是否应将其加入到您的博客网页。

来源：博客学堂

scrollovers滚动链接样式

乔夫 — Fri, 10 Aug 2007 06:06:18 +0000

“Scrollovers”不错的滚动链接样式效果，结合 JS 和 CSS 可以简单、迅速地改变显示效果，一定会让你的网站用户获得出乎意料的新奇体验。

Demo: scrollovers.html

步骤：

1.插入 scrollovers.js 代码到页面；

2.给链接添加特效：

[YOUR TEXT HERE]

3.定义链接样式：

4.ok!效果不错吧？

来源：Scrollovers.com

简单的JS浏览器兼容问题

乔夫 — Mon, 09 Jul 2007 20:20:10 +0000

Firefox 和 IE 之间的兼容性问题实在太烦人，不只是 CSS 样式，还有 Javascript 之间种种的差异，着实让人头疼。这两天就遇到了不少小问题，诸如：“submit()”、“execCommand(“Copy”)”之类的。如果不去考究一番的话，往往会觉得太麻烦了。而事实上，只要作些细微的改动就可以轻松实现兼容了。当然，像“execCommand(“Copy”)”这种要去改动配置的话就没必要了，如此麻烦地去实现一个小小的功能也太过鸡肋不是？

这里来说说最简单的，比如：

document.content.innerHTML = '
';

这样的代码在 IE 下是没问题的，而 FF 下只要加上“getElementById”也不会有问题。

document.getElementById('content').innerHTML = '
';

再比如“submit()”的问题：

删除文章

这段代码，在 FF 下是没法赋值并提交表单的。和上面的同理也需要做些修改：

删除文章

这样就没啥问题了。

不过，接着再来，又遇到另一个问题。因为这里是删除，所以操作之前要有个确认提示才行。但是这里，如果直接在“onclick”上加“confirm”的话是有问题的：

删除文章

不管位置前后怎么调整，要么是取消了却依然提交，要么就纯粹无反应。所以，不得不再改：

删除文章

OK，功能实现！

后记：这是些很简单的问题，笔录过程于此是因为自己记性差，老犯低级错误，哪怕是同一个问题，再次遇到也常常头大。着重于思路，以致后续，呵呵。。。

JavaScript的密码强度检测

乔夫 — Sat, 12 Aug 2006 04:01:32 +0000

有时候，有需要这个功能的，自动对输入的密码强弱程度做出判断，收藏。

调用就行了，很方便，可以看看样例：

<table width="100%" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="100" align="right">强度显示：</td>
<td>

<script language="javascript">

var ps = new PasswordStrength();

//设置显示大小；

ps.setSize("200","20");

//设置最少检测字符长度；

ps.setMinLength(5);

</script>

</td>

</tr>

<tr>

<td align="right">密码检测：</td>

<td><input name="pwd" type="password" id="pwd" style="width:200px" onKeyUp="ps.update(this.value);"/></td>

</tr>

</table>

小问题大学问超郁闷（PNG格式透明问题）

乔夫 — Thu, 03 Aug 2006 12:32:55 +0000

最近做公司网站，代码写得差不多了，开始美化后台界面。因为是用 DIV+CSS 所以遇到了很多以往用表格打版所不曾遇到的小问题，却很是郁闷。

就像这个登陆页，因为版式有两分“异”，实在不知如何切片的好，因为这里的关键就是那个小水晶按钮。如果还按常规切的话，定义多个 DIV ，就没啥意义了，还不如直接用表格来得好。所以，想了想，把图片尽可能的优化后，做成了一个大背景，只把那按钮提出来。因为有一圈外发光，所以不能用 GIF，只好做成 PNG，于是问题就出来了：

首先：IE6 是不支持透明 PNG 的，需要调用 AlphaImageLoader() 滤镜。

filter :progid:DXImageTransform.Microsoft.AlphaImageLoader(src='button.png',sizingMethod='image');"

其次，发现还是不正常，图片并没有真正透明，或者像 GIF 一样，有毛边。同事小包说是 PS 输出的 PNG 格式有问题，并用 Illustrator 又重新给绘了一个按钮。果不其然，这次再调用时，真正透明了。

后来，又有问题了。因为这里是要做按钮的，想不出如何在按钮的 SRC 上去加调样式。郁闷得紧！小陈同志又想到了办法，同层的原理一样，换成一个 1 象素的图片，用调用滤镜样式后的 PNG 按钮图片填充象素图片，解决问题。

正欢呼中，又发现了问题！样式调用之后，本是支持 PNG 透明的 FireFoX 里边又不正常了，因为不认这调用也就不见了按钮，狂晕！唉，绕了半天，又回到最初，只有用最原始的方法，判断浏览器类型了，效果最终实现！

唉，为了一个按钮透明，我容易么？一度都想放弃了，就像急着上厕所一样，自已漫无目的地找，还有很多人指路，可七绕八拐真到了里间时，内急早就给憋没影了。甚至有想过就用 DIV 算了，直接在上面加 Onclick ；或者直接插个 SWF 进来直接调用 PNG。哞，只有苦笑，就算 IE7 又怎么样？要我说啊，最好还是各种浏览器全都集合起来，统一标准，再无区别才是王道啊！可惜，这是讲不完的《一千零一夜》，真真切切的天方夜谭啊！！！

用弹出窗口代替“Confirm”确认操作

乔夫 — Tue, 25 Apr 2006 02:20:39 +0000

在以往的写法中，删除之前会用：

OnClick="javascript:return confirm('**********')"

来确认操作。

今天自己在写一段代码的时候，因为需要，要把提交表单的按钮换成了链接，用：

document.formname.submit();

来提交。所以，就发现了一个问题：如果在这句代码上加确认，不管“Return”的位置如何移动，表单也无法提交。当然，要是把确认信息放到最后，那也能提交，不过这样的话，这里的确认岂不就成了摆设了？因为自己也是菜鸟一个，想不通 JAVA 到底应该如何处理。后来想到用层，就像新浪删除邮件那样，不过个人喜好不同，我一向都不大喜欢用层。所以，想来想去，笨人也自有笨人的办法，想到了用弹出窗口，这里记下来供以后参阅：

大致思路：删除前无须提交表单，直接弹出确认窗口，同时在调用 JAVA 代码时加个参数用来分别提示确认信息，然后在确认操作后，在关闭子窗口前先提交父窗口的表单就 OK 了。

具体代码如下：

JavaScript: