当前位置: 主页 > 平面设计 > 网站风格切换效果的实现

网站风格切换效果的实现

  • 2022-01-31
  • 来源/作者: onegreen.org    / 佚名    
  • 10 次浏览

这个网站风格切换除了带记忆功能外,还可设定保持时间,比如5天或者180天,过了时间就自动恢复到默认样式表。

样式表连接


程序代码
<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" />


调用


程序代码
<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天。

脚本作者:dynamicdrive.com

//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)
}
}

function indicateSelected(element){ //Optional function that shows which style sheet is currently selected within group of radio buttons or select menu
var i
if (selectedtitle!=null && (element.type==undefined || element.type=="select-one")){ //if element is a radio button or select menu
var element=(element.type=="select-one") ? element.options : element
for (i=0; i<element.length; i++){
if (element[i].value==selectedtitle){ //if match found between form element value and cookie value
if (element[i].tagName=="OPTION") //if this is a select menu
element[i].selected=true
else //else if it"s a radio button
element[i].checked=true
break
}
}
}
}

var selectedtitle=getCookie("mysheet")
if (document.getElementById && selectedtitle!=null) //load user chosen style sheet if there is one stored
setStylesheet(selectedtitle)

function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
 }
}
window.onload = externalLinks;

<!--
document.writeln("<!--[if lte IE 6]>");
document.writeln("<style type="text/css">");
document.writeln(" a { behavior:url("/focus.htc"); }");
document.writeln("</style>");
document.writeln("<![endif]-->");

 

注意里面的onload 要放在合适的位置~~~