实用网页换肤实例代码

2个月前 (02-27 18:17)阅读49回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值4189
  • 级别管理员
  • 主题837
  • 回复2
楼主

网页换肤其实很简单,就是通过js判断,然后调用不同的css文件即可,各大网址导航网站都常用到网页肤色切换特效。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>实用网页换肤实例代码_武鸣人</title>
<style> 
body,ul,li{margin:0;padding:0;}
html,body{height:100%;}
body{font:12px/1.5 Tahoma;}
li{list-style-type:none;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:underline;}
#outer{width:500px;margin:0 auto;overflow:hidden;zoom:1;}
#skin,#nav{overflow:hidden;zoom:1;}
#skin{margin:10px 0;}
#skin li{float:left;width:6px;height:6px;cursor:pointer;overflow:hidden;margin-right:10px;text-indent:-9999px;border-width:4px;border-style:solid;}
#skin li.current{background:#fff!important;}
#red{border-color:red;background:red;}
#green{border-color:green;background:green;}
#black{border-color:black;background:black;}
#nav{border:1px solid #fff;}
#nav li{float:left;width:82px;line-height:25px;text-align:center;border-right:1px solid #fff;}
#nav li.last{width:83px;border-right-width:0;}
#nav li a{color:#fff;}
</style>
<link href="/img/green20240227_www_wuming_ren.css" rel="stylesheet" type="text/css" />
<script> 
window.onload = function ()
{
var oLink = document.getElementsByTagName("link")[0];
var oSkin = document.getElementById("skin").getElementsByTagName("li");
for(var i = 0; i< oSkin.length; i++)
{
oSkin[i].onclick = function ()
{
for(var p in oSkin) oSkin[p].className = "";
this.className = "current";
oLink['href'] = "/img/"+ this.id + ".css";
}
}
//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
};
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="outer">
    <ul id="skin">
        <li id="red20240227_www_wuming_ren" title="红色">红</li><li id="green20240227_www_wuming_ren" class="current" title="绿色">绿</li><li id="black20240227_www_wuming_ren" title="黑色">黑</li>
    </ul>
    <ul id="nav">
        <li><a href="javascript:;">新闻</a></li>
        <li><a href="javascript:;">娱乐</a></li>
        <li><a href="javascript:;">体育</a></li>
        <li><a href="javascript:;">电影</a></li>
        <li><a href="javascript:;">音乐</a></li>
        <li class="last"><a href="javascript:;">旅游</a></li>
    </ul>
</div>
</body>
</html>


0
0
收藏0
回帖

实用网页换肤实例代码 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息