`
jiulingchen
  • 浏览: 45107 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JQuery网页换肤

阅读更多

现在介绍网页换肤 的例子已经数不胜数,自己也没有仔细研究过,刚搞遇到类似这个问题,网上查了资料解决了问题,感觉很有用,就记录了下来和大家分享一下。效果很简单,我就直接讲怎么使用的。

其中用到了jquery .cookie.js

首先是html代码:

XML/HTML代码
  1. < div   id = "header_demo" >   
  2.     < a   id = "logo"   href = "#" > Rainweb </ a >   
  3.         < ul   id = "skin" >   
  4.             < li   id = "skin_0"   title = "蓝色"   class = "selected" > 蓝色 </ li >   
  5.             < li   id = "skin_1"   title = "紫色" > 紫色 </ li >   
  6.             < li   id = "skin_2"   title = "红色" > 红色 </ li >   
  7.             < li   id = "skin_3"   title = "天蓝色" > 天蓝色 </ li >   
  8.             < li   id = "skin_4"   title = "橙色" > 橙色 </ li >   
  9.             < li   id = "skin_5"   title = "淡绿色" > 淡绿色 </ li >   
  10.         </ ul >   
  11. </ div >   

 

 

CSS代码:

CSS代码
  1. /*头部样式开始*/   
  2. #header _demo{  
  3.     width : 700px ;   
  4.     height : 80px ;   
  5.     border 1px   solid   #AAAAAA ;  
  6.     margin : 10px   auto ;   
  7.     /** background:#3B5998; **/   
  8. }  
  9. /*logo样式开始*/   
  10. #logo  {   
  11.     float : left ;   
  12.     margin :0 0 0  10px ;   
  13.     color : #FFF ;   
  14.     font-size :3em;   
  15.     font-weight :700;  
  16.     line-height : 80px ;  
  17. }  
  18. /*切换皮肤样式*/   
  19. #skin  {   
  20.     float : right right ;   
  21.     margin : 10px ;   
  22.     padding : 4px ;   
  23.     width : 120px ;   
  24.     list-style : none ;   
  25.     border 1px   solid   #CCCCCC ;   
  26.     background : #FFF ;  
  27. }  
  28. #skin  li {   
  29.     float : left ;   
  30.     margin-right : 4px ;   
  31.     width : 15px ;   
  32.     height : 15px ;   
  33.     text-indent :- 9999px ;   
  34.     overflow : hidden ;   
  35.     display : block ;   
  36.     cursor : pointer ;   
  37.     background-image : url (images/theme.gif);   
  38. }  
  39. #skin _0 {  background-position : 0px   0px ; }  
  40. #skin _1 {  background-position : 15px   0px ; }  
  41. #skin _2 {  background-position : 35px   0px ; }  
  42. #skin _3 {  background-position : 55px   0px ; }  
  43. #skin _4 {  background-position : 75px   0px ; }  
  44. #skin _5 {  background-position : 95px   0px ; }  
  45. #skin _0.selected {  background-position : 0px   15px ; }  
  46. #skin _1.selected {  background-position : 15px   15px ; }  
  47. #skin _2.selected {  background-position : 35px   15px ; }  
  48. #skin _3.selected {  background-position : 55px   15px ; }  
  49. #skin _4.selected {  background-position : 75px   15px ; }  
  50. #skin _5.selected {  background-position : 95px   15px ; }  

 

javascript代码:

JavaScript代码
  1. //网站换肤   
  2. $(function  () {  
  3.     var  $li = $( "#skin li" );   //查找到元素   
  4.     $li.click(function  () {    //给元素添加事件   
  5.         switchSkin(this .id); //调用函数   
  6.     });  
  7.     //保存Cookie完毕以后就可以通过Cookie来获取当前的皮肤了   
  8.     var  cookie_skin = $.cookie( "MyCssSkin" );      //获取Cookie的值   
  9.     if  (cookie_skin) {                           //如果确实存在Cookie   
  10.         switchSkin(cookie_skin);     //执行   
  11.     }  
  12. });  
  13. function  switchSkin(skinName) {     
  14.     $("#"  + skinName).addClass( "selected" )                 //当前<li>元素选中   
  15.                        .siblings().removeClass("selected" );   //去掉其他同辈<li>元素的选中   
  16.     $("#cssfile" ).attr( "href" "css/skin/"  + skinName +  ".css" );  //设置不同皮肤   
  17.     $.cookie("MyCssSkin" , skinName, { path:  '/' , expires: 10 });   //保存Cookie   
  18.     alert(skinName);  
  19. }  

 

最后就是一个link文件:

XML/HTML代码
  1. < link   id = "cssfile"   type = "text/css"   href = "css/skin/skin_5.css"   rel = "Stylesheet" >   

 

演示地址:http://www.wufangbo.com/demo/jquery/05/index.html

下载地址:http://www.wufangbo.com/demo/jquery/05/05.rar

转载至(http://www.wufangbo.com/jquery-page-peels)

分享到:
评论

相关推荐

    很简单的JQuery网页换肤

    【标题】"很简单的JQuery网页换肤"所涉及的知识点主要集中在JavaScript库JQuery上,特别是关于网页界面动态变换主题或皮肤的功能实现。在网页设计中,换肤功能允许用户根据个人喜好选择不同的视觉样式,提升用户体验...

    JQuery网页换肤实现

    ### JQuery网页换肤实现 #### 一、简介 在网页设计中,为了提供更好的用户体验以及增加网站的个性化程度,很多网站都提供了换肤功能。换肤功能允许用户根据自己的喜好选择不同的界面风格,从而增强用户的参与度和...

    jquery网页换肤

    通过jquery实现网页换肤 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;title&gt;Jacob Song的购物网站 ...

    jQuery实现网页换肤

    在网页换肤中,我们需要对这些元素的样式进行修改,因此理解并熟练运用jQuery的选择器至关重要。 接下来,我们关注如何改变元素的样式。jQuery提供了`.css()`方法,允许我们动态修改元素的CSS属性。例如,`$("#...

    jQuery换肤

    在网页设计中,用户体验往往受到视觉效果的影响,而“jQuery换肤”就是一种提升用户体验的常见技术。jQuery库因其简洁的API和强大的功能,成为实现动态换肤的首选工具。本项目由武方博开发,提供了多种颜色主题,...

    jquery实现网页换肤

    总结来说,使用jQuery实现网页换肤涉及的关键技术包括jQuery的DOM操作、事件处理和cookie管理,以及CSS样式表和图像资源的使用。通过这样的方式,我们可以为用户提供个性化的体验,增强他们对网站的满意度和黏性。

    jquery实现网页换肤效果

    记得以前腾讯网页上有个根据用户心情自定义换皮肤颜色,感觉这个用户体验蛮好的,给出几套样式,由用户自己选择渲染的样式.对腾讯的前端开发们很是赞叹.话说现在腾讯不知道咋的,去掉这个功能了,没事现在jquery博客给...

    jquery四色网页换肤代码

    jquery四色网页换肤代码

    jQuery实现换肤效果

    在网页设计中,换肤功能可以为用户提供个性化的体验,使他们可以根据个人喜好调整网站的外观。jQuery,作为一款广泛使用的JavaScript库,提供了强大的DOM操作和事件处理能力,非常适合用来实现这种动态换肤功能。本...

    jquery实现网页换肤效果.zip

    《jQuery实现网页换肤效果详解》 在网页设计中,为用户提供个性化的界面体验是提升网站吸引力的重要手段。本文将围绕“jQuery实现网页换肤效果”这一主题进行深入探讨,结合提供的压缩包文件,我们将了解到如何利用...

    jquery实现换肤带cookie

    标题“jquery实现换肤带cookie”涉及到的是网页前端开发中的一个常见功能——用户自定义界面皮肤,并结合了jQuery库和cookie技术。以下是对这个主题的详细讲解: 在Web开发中,用户界面的个性化是一个重要的用户...

    jQuery实现的网页换肤效果示例

    网页换肤功能是一种提高...总之,jQuery实现的网页换肤效果是一种实用的前端技术,能够提升用户在网站上的浏览体验。通过理解并实践本文中的方法,开发者可以为自己的项目增添更多个性化的元素,让网站更加生动活泼。

    JQuery换肤

    在网页设计中,用户体验往往受到视觉效果的影响,而“换肤”功能则为用户提供了一种个性化的选择,让他们可以根据自己的喜好调整网站的外观。JQuery作为一个强大的JavaScript库,提供了便捷的方式来实现这一功能。...

    jquery四色网页换肤代码.zip

    【jQuery四色网页换肤代码】是一个用于网页界面动态切换不同主题颜色的JavaScript实现,主要依赖于jQuery库。这个功能通常被用于提供用户自定义界面风格的选项,增强用户体验。在给定的压缩包文件中,包含了一些关键...

    js特效脚本含源码和说明jquery四色网页换肤代码

    js特效脚本含源码和说明jquery四色网页换肤代码本资源系百度网盘分享地址

    jQuery实现网站换肤功能

    在网页设计中,提供用户友好的交互体验是至关重要的,其中一种常见的功能就是网站换肤。本教程将探讨如何利用JavaScript库jQuery实现这一特性。jQuery以其简洁的API和丰富的插件,使得动态改变网站样式变得相对简单...

    js实现网页换肤

    在"jquery四色网页换肤代码"这个示例中,我们可以看到使用了jQuery库,这是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及动画效果。以下是实现网页换肤的关键步骤: 1. **定义皮肤**: 创建多个CSS...

Global site tag (gtag.js) - Google Analytics