var g_styleID = "ruizhi"; var g_logID = "232"; var g_comDesc = "Desc"; document.write ('

pjblog加入js實現的圖片特效

一般來說,博客或網站都需要對插圖做一些效果,比如增加陰影、圖片圓角、倒映等等。這些效果一般可以用3個方法實現,一是用PS實現對圖片進行修改,二是使用CSS,三是使用Javascript。使用PS會破壞原圖,而且要花費一定的時間。Netzgesta上有很多實現圖片特效的Javascript提供下載,很多效果都是相當漂亮的。

網路上熱門的有10個,我選了2個在pjblog上使用,

1.水倒映(reflex.js)




2.圓角+陰影(corner.js)




先把從網下載回來的二個js放在common目錄(位置隨便你放,只要找得到就行)
簽入後台管理-介面與插件-編輯靜態頁面模版(因為我是使用全靜態模式)
把二個js插入,如下圖



打開common/ubbcode.asp,作一些修改
復制內容到剪貼板程序代碼 歌詞或引言或程序代碼

        If Not DisUBB = 1 Then
            If Not DisIMG = 1 Then

後面插入
復制內容到剪貼板程序代碼 歌詞或引言或程序代碼

                re.Pattern = "(\[corner\])(.[^\]]*)\[\/corner\]"
                Set strMatchs = re.Execute(strContent)
                For Each strMatch in strMatchs
                    tmpStr1 = (strMatch.SubMatches(1))
                    strContent = Replace(strContent, strMatch.Value, "<img class=""corner iradius16 ishadow33"" src="""&tmpStr1&""" border=""0"" alt=""""/>", 1, -1, 0)
                Next

圖檔上傳後,若要用圓角及陰影,就用corner和/corner取代img和/img
也保留img../img讓不方便使用圓角及陰影的圖檔使用(譬如已加像框的圖檔).........

復制內容到剪貼板程序代碼 歌詞或引言或程序代碼

                re.Pattern = "\[img=(\d*|),(\d*|)\](.[^\]]*)\[\/img\]"
                Set strMatchs = re.Execute(strContent)
                For Each strMatch in strMatchs
                    tmpStr1 = strMatch.SubMatches(0)
                    tmpStr2 = strMatch.SubMatches(1)
                    tmpStr3 = checkURL(strMatch.SubMatches(2))
                    strContent = Replace(strContent, strMatch.Value, "<img class=""reflex itiltright iopacity75 iborder0 iheight17 idistance0 icolorffffff"" width="""&tmpStr1&""" height="""&tmpStr2&""" src="""&tmpStr3&""" border=""0"" alt=""""/>", 1, -1, 0)
                Next

我加入了水倒影的class__因為img=width,height,我根本就不用....

其它的八個js特效,請連結底下網址(網址裡有取得js的連結)...

http://www.kenengba.com/post/432.html



[本日志由 CHOME 於 2013-06-29 10:32 PM 更新]
上一篇: 左手香的進化記錄
下一篇: 閒閒無事弄個百花圖鑑
文章來自: 本站原創
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相關日志:
評論: 0 | 引用: 0 | 查看次數: -
發表評論
暱 稱:
密 碼: 游客發言不需要密碼.
郵 箱: 郵件地址支持Gravatar頭像,郵箱地址不會公開.
網 址: 輸入網址便於回訪.
內 容:
驗證碼:
選 項:
雖然發表評論不用注冊,但是為了保護您的發言權,建議您注冊帳號.
字數限制 1000 字 | UBB代碼 開啟 | [img]標簽 開啟