pjblog加入js實現的圖片特效
作者:CHOME 日期:2012-06-26
一般來說，博客或網站都需要對插圖做一些效果，比如增加陰影、圖片圓角、倒映等等。這些效果一般可以用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
網路上熱門的有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 | 查看次數: -
發表評論