使你的首頁千變萬化

來源:互聯網
上載者:User
  不少網友發E-mail問我:“怎麼每次去你的首頁,看到的圖片都不一樣,難道你時時刻刻都在更換圖片嗎?”天啊,我哪有那麼多錢支付電話費?我只不過用了JavaScript的小技巧做了個“隨機圖片”而已。其HTML原始碼為:

  < !隨機圖片開始 >

  < script language=″JavaScript″ >

  < !--

  imglink=new Date();

  var thisimg=http://www.webjx.com/htmldata/2005-02-24/″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=http://www.webjx.com/htmldata/2005-02-24/″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”即可。 

 (河北 漠鷹)

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。