網頁設計公司
您現在的位置:首頁  >  新聞中心
  • 軟體設計
    Software Development
  • 品牌及LOGO設計
    Brand and LOGO Design
  • 網站設計及建制
    Web Design
  • 多媒體動畫制作
    Multimedia Presentations
  • 聯絡我們
    Contact US
  • 新聞中心
    網頁設計公司必讀的文章 ( 146 ) JS版網站風格切換
    這個網站風格切換除了帶記憶功能外,還可設定保持時間,比如5天-180天,過了時間就自動恢復到默認樣式表。

    樣式表連接,設3種風格,把你要改變的圖片背景等寫入樣式表。
    程序代碼 程序代碼
    <link media="screen" href="/css/default.css" rel="stylesheet" type="text/css" title="default" />
    <link media="screen" href="/css/blue.css" rel="alternate stylesheet" type="text/css" title="blue" />
    <link media="screen" href="/css/orange.css" rel="alternate stylesheet" type="text/css" title="orange" />

    第一個是默認樣式表。

    JS腳本:
    程序代碼 程序代碼
    //Style Sheet Switcher version 1.0 Nov 9th, 2005
    //Author: Dynamic Drive: http://www.dynamicdrive.com
    //Usage terms: http://www.dynamicdrive.com/notice.htm
    function getCookie(Name) {
    var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
    if (document.cookie.match(re)) //if cookie found
    return document.cookie.match(re)[0].split("=")[1] //return its value
    return null
    }
    function setCookie(name, value, days) {
    var expireDate = new Date()
    //set "expstring" to either future or past date, to set or delete cookie, respectively
    var expstring=(typeof days!="undefined")? expireDate.setDate(expireDate.getDate()+parseInt(days)) : expireDate.setDate(expireDate.getDate()-5)
    document.cookie = name+"="+value+"; expires="+expireDate.toGMTString()+"; path=/";
    }
    function deleteCookie(name){
    setCookie(name, "moot")
    }
    function setStylesheet(title) {
    var i, cacheobj
    for(i=0; (cacheobj=document.getElementsByTagName("link")[i]); i++) {
    if(cacheobj.getAttribute("rel").indexOf("style") != -1 && cacheobj.getAttribute("title")) {
    cacheobj.disabled = true
    if(cacheobj.getAttribute("title") == title)
    cacheobj.disabled = false //enable chosen style sheet
    }
    }
    }
    function chooseStyle(styletitle, days){
    if (document.getElementById){
    setStylesheet(styletitle)
    setCookie("mysheet", styletitle, days)
    }
    }
    var selectedtitle=getCookie("mysheet")
    if (document.getElementById && selectedtitle!=null) //load user chosen style sheet if there is one stored
    setStylesheet(selectedtitle)

    調用:這部份放到需要指定切換的地方。
    程序代碼 程序代碼
    <a title="默認風格" href="javascript:chooseStyle('default',5)">默認風格</a>
    <a title="橙色風格" href="javascript:chooseStyle('orange',5)">橙色風格</a>
    <a title="藍色風格" href="javascript:chooseStyle('blue',5)">藍色風格</a>

    注意:title內容改成你樣式表的名字,這裡是設定為5天。
    首頁 | 關於我們 | 新闻中心 | 聯絡我們 | 加入最愛
    Bay Stars Design 網頁設計公司 Copyright © 2005-2008 Bay Stars Design Web Design Company All risghts reserved.