不少網友發E-mail問我:“怎么每次去你的主頁,看到的圖片都不一樣,難道你時時刻刻都在更換圖片嗎?”天啊,我哪有那么多錢支付電話費?我只不過用了JavaScript的小技巧做了個“隨機圖片”而已。其HTML源代碼為:
< !隨機圖片開始 >
< script language=″JavaScript″ >
< !--
imglink=new Date();
var thisimg=″1.jpg″;
if(imglink.getSeconds()< 54){var thisimg=″2.jpg″;}
if(imglink.getSeconds()< 46){var thisimg=″3.jpg″;}
if(imglink.getSeconds()< 39){var thisimg=″4.jpg″;}
if(imglink.getSeconds()< 32){var thisimg=″5.jpg″;}
if(imglink.getSeconds()< 24){var thisimg=″6.jpg″;}
if(imglink.getSeconds()< 17){var thisimg=″7.jpg″;}
if(imglink.getSeconds()< 9){var thisimg=″8.jpg″;}
document.write(″< img src=″+thisimg+″ border=0 alt=″每次打開本頁,看到的圖片都不同!″ >″);
//-- >
< /script >
< !隨機圖片結束 >
在這個例子中,設置了8張圖片,與網頁放置于同一目錄下。當瀏覽器打開此網頁時,立即從電腦里讀取時間,并根據秒數的不同選擇不同的圖片。
我們也常常埋怨在網頁里插入的圖片與網頁背景不能很好地融合在一起,如果圖片周圍有一圈朦朧的過渡色該多好!用Photoshop制作圖片當然能實現這個效果。其實還有更好的辦法:在網頁中用 CSS 濾鏡來實現!
< p style=″line-height:0pt;filter:Glow
(Color=#FFFFFF,Strength=36);height:auto;position:relative;padding:21pt″ >
< img src=″1.jpg″ border=0 >
< /p >
其中,“Color=#FFFFFF”是定義陰影的顏色,“Strength=36”是定義陰影寬度。怎么樣,圖片是不是有了“月朦朧,鳥朦朧”的感覺?
如果你不喜歡“溫馨浪漫”的主頁類型,這里還有一款“魔幻豪放”派的――
在< head >< /head >中加入以下內容:
< !開始定義變色函數 >
< script language=″JavaScript″ >
< !--hide
function RandomNumber(max) //定義隨機函數
{var today=new Date();
var num=Math.round((Math.abs(Math.sin(today.getTime()))*1000))%max+1;return num;}
function makearray(n)
{this.length=0;for(var i=1;i< n;i++)this[i]=0;return this;}function changecolor()
{clearTimeout();
linkarray=new makearray(10); //用linkarray數組定義十種常用顏色
linkarray[1]=″#ff0000″;
linkarray[2]=″#ffff00″;
linkarray[3]=″#00ff00″;
linkarray[4]=″#0000ff″;
linkarray[5]=″#8000ff″;
linkarray[6]=″#ff00ff″;
linkarray[7]=″#004000″;
linkarray[8]=″#808000″;
linkarray[9]=″#ff8000″;
linkarray[10]=″#ff0000″;
document.bgColor=(linkarray[RandomNumber(10)]); //利用隨機函數從十種顏色中任選一種作為網頁背景色
setTimeout(″changecolor()″,1000); //設置時鐘,讓背景色每秒變換一次
return;}
//-- >
< /script >
< !定義變色函數結束 >
然后在中調用changecolor()函數即可:< body OnLoad=″javascript:changecolor()″ >
網頁背景顏色每秒鐘變換一次,夠酷吧?
如果把“document.bgColor=(linkarray[RandomNumber(10)]);”一句中的“bgColor”換成“fgColor”,也能實現網頁文字不斷地變色。此外,你也可以自己定義變色的時間周期,改變“setTimeout(″changecolor()″,1000);”中的“1000”即可。