码迷,mamicode.com
首页 > Web开发 > 详细

网页换肤

时间:2015-02-13 18:18:20      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:

1.网页换肤的实现,其实就是两个css的切换!本文用到的技术是cookie,不过,从个人的想法来说,我还是觉得直接用数据库挺好的,在用户后面加一个CSS的属性,然后,每次登陆后,直接通过js进行设置!先看一下效果图:

技术分享      技术分享

2.简单说明一下:

首先,写两个CSS。当点击橙色经典或者灰色畅想的时候,在js中对<link >的href进行设置!

其次,设置完CSS后,用户退出客户端后,下次再次浏览的时候,发现以前设置的肤色又不存在了,所以,把CSS的路径放入的cookie,当下次浏览页面的时候,直接从cookie中读取!

 

3.JavaScript实现

HTML页面:  

 1     <table id="TableLeft">
 2                 <tr>
 3                     <td>更换网页风格:<a  onclick="change(‘orange‘);return false">[橙色经典]</a><a  onclick="change(‘gray‘);return false">[灰色畅想]</a></td>
 4                 </tr>
 5                 <tr>
 6                     <table class="SaleTable">
 7                         <tr>
 8                             <td><a href="#" class="music">MP3-精选专辑(111首歌曲)</a></td>
 9                         </tr>
10                         <tr style="color: black">
11                             <td>市场价<font color="red">28</font>元 会员价:<font color="red">20</font>元 VIP价:<font color="red">10</font></td>
12                         </tr>
13                         <tr >
14                             <td><input type="button" value="收藏" class="button"><input type="button" value="购买" class="button"></td>
15                         </tr>
16                         <tr style="color: gray">
17                             <td>经典...</td>
18                         </tr>
19                     </table>
20                 </tr>
21                 <tr>
22                     <table class="SaleTable">
23                         <tr>
24                             <td><a href="#" class="music">MP3-精选专辑(111首歌曲)</a></td>
25                         </tr>
26                         <tr style="color: black">
27                             <td>市场价:<font color="red">28</font>元 会员价:<font color="red">20</font>元 VIP价:<font color="red">10</font></td>
28                         </tr>
29                         <tr>
30                             <td><input type="button" value="收藏" class="button"><input type="button" value="购买" class="button"></td>
31                         </tr>
32                         <tr style="color: gray">
33                             <td>经典...</td>
34                         </tr>
35                     </table>
36                 </tr>
37  </table>

  

      JavaScript效果:

 1     <link id="myCss" rel="stylesheet" type="text/css">
 2      <script type="text/javascript">
 3       
 4       //页面刚加载完成的时候,从cookie中读取cssPath(css的路径),如果没有,则往cookie中设置一个默认路径。
 5       window.onload=function(){
 6         if(readCookie("cssPath")==undefined){
 7         console.info(readCookie("cssPath"));
 8             writeCookie("CSS/Color/orange.css");
 9         }
10         document.getElementById("myCss").href=readCookie("cssPath");
11       }
12       
13       //往cookie中写路径
14       function writeCookie(csspath){
15           var today = new Date();
16           var expires = new Date();
17           expires.setTime(today.getTime()+1000*60*60*24*30);//有效期为30天
18           
19           //document.cookie=‘cssPath=路径;expires=过期时间‘<=> 设置cssPath的过期时间
20           var str ="cssPath="+encodeURI(csspath)+";expires="+encodeURI(expires.toUTCString());
21           document.cookie=str;
22       }
23       
24       //读取cookie
25       function readCookie(cookieName){
26           var search = cookieName +"=";
27           if(document.cookie.length>0){
28               //获得cookieName=出现的位置,本例是cssPath=,如果返回-1说明没有出现过,此时给他一个默认的CSS路径
29               offset=document.cookie.indexOf(search);
30               if(offset!=-1){
31                   //cssPath=值,因为我们要获取的是cssPath的值,也就是=以后的内容到‘;‘之间的值
32                   offset+=search.length;
33                   
34                   //indexOf(searchString, startPosition)从startPosition开始,搜寻searchString字符串,返回的是searchString第一次出现的位置
35                   //本例是获得从offset开始,第一次出现;的位置因为cssPath的值在  cssPath= 和 ; 之间
36                   end=document.cookie.indexOf(";",offset);
37                   
38                   //substring(offset,end) 截取从offset开始,到end结束的字符串。
39                   return decodeURI(document.cookie.substring(offset, end));
40               }else{
41                   return "CSS/Color/orange.css";
42               }
43           }
44       }
45       
46       
47       //点击事件
48       function change(type){
49           if(type=="orange"){
50               document.getElementById("myCss").href="CSS/Color/orange.css";
51               writeCookie("CSS/Color/orange.css")    
52           }
53           
54           if(type=="gray"){
55               document.getElementById("myCss").href="CSS/Color/gray.css";
56               writeCookie("CSS/Color/gray.css")    
57           }
58       }
59   </script>

 

 

4.JQueyr实现

 1 <table id="TableLeft">
 2     <tr>
 3         <td>更换网页风格:<a class="colorA">[橙色经典]</a><a  class="colorA">[灰色畅想]</a></td>
 4     </tr>
 5     <tr>
 6         <table class="SaleTable">
 7            <tr>
 8                <td><a href="#" class="music">MP3-精选专辑(111首歌曲)</a></td>
 9            </tr>
10            <tr style="color: black">
11                <td>市场价<font color="red">28</font>元 会员价:<font color="red">20</font>元 VIP价:<font color="red">10</font></td>
12            </tr>
13            <tr >
14                <td><input type="button" value="收藏" class="button"><input type="button" value="购买" class="button"></td>
15            </tr>
16            <tr style="color: gray">
17                <td>经典...</td>
18            </tr>
19         </table>
20     </tr>
21     <tr>
22         <table class="SaleTable">
23             <tr>
24                <td><a href="#" class="music">MP3-精选专辑(111首歌曲)</a></td>
25             </tr>
26             <tr style="color: black">
27                 <td>市场价:<font color="red">28</font>元 会员价:<font color="red">20</font>元 VIP价:<font color="red">10</font></td>
28             </tr>
29             <tr>
30                <td><input type="button" value="收藏" class="button"><input type="button" value="购买" class="button"></td>
31             </tr>
32             <tr style="color: gray">
33                 <td>经典...</td>
34             </tr>
35         </table>
36     </tr>
37</table>
 1  <link id="myCss" rel="stylesheet" type="text/css">
 2  <script type="text/javascript" src="JS/jquery-1.8.2.js"></script>
 3  <script type="text/javascript" src="JS/jquery.cookie.js"></script>
 4  <script type="text/javascript">
 5         $(function(){
 6             window.onload=function(){
 7                 var cssPathValue=$.cookie("cssPath");
 8                 if(cssPathValue==$.cookie("not_existing")){
 9                     $.cookie("cssPath","CSS/Color/orange.css",{expires:30});
10                 }
11                 $("#myCss").attr("href",$.cookie("cssPath"));
12             };
13             $(".colorA").click(function(){
14                 var value = $(this).text();
15                 if(value=="[橙色经典]"){
16                     $("#myCss").attr("href","CSS/Color/orange.css");
17                     $.cookie("cssPath","CSS/Color/orange.css",{expires:30});
18                 }else{
19                     $("#myCss").attr("href","CSS/Color/gray.css");
20                     $.cookie("cssPath","CSS/Color/gray.css",{expires:30});
21                 }
22                 return false;
23             });
24         });
25 </script>

  注意:

    JQueyr实现cookie,需要引入插件jquery.cookie.js!

 

 

参考:

《java web开发实战1200例 (第一卷)》

网页换肤

标签:

原文地址:http://www.cnblogs.com/robert-blue/p/4290198.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!