文档章节

网页换肤功能

Winnie007
 Winnie007
发布于 2015/11/24 18:42
字数 469
阅读 286
收藏 11

一、网页换肤效果

1、使用工具

jquery-1.7.2.min.js(下载地址:http://pan.baidu.com/s/1dDobJhR) jquery.cookie.js(下载地址:http://pan.baidu.com/s/1bnlycbl)

2、源码实现:

html代码:

<!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=utf-8" />
<title>网页换肤特效</title>
<link type="text/css" rel="stylesheet" href="skin_0.css" id="cssfile"/> 
<script type="text/javascript" src="../../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.cookie.js"></script>
<style type="text/css">
 *{margin:0px; padding:0px;}
 ul{margin:10px;}
 ul li{list-style:none; float:left; background:url(../%E8%B4%AD%E7%89%A9%E7%BD%91%E7%AB%99/images/theme.gif); width:15px; height:15px;      text-indent:-999px; margin-right:4px;}
    #skin_0{background-position:0px 0px;}
 #skin_1{background-position:15px 0px;}
 #skin_2{background-position:35px 0px;}
 #skin_3{background-position:55px 0px;}
 #skin_4{background-positioin:75px 0px;}
 #skin_0.selected{background-position:0px 15px;}
 #skin_1.selected{background-position:15px 15px;}
 #skin_2.selected{background-position:35px 15px;}
 #skin_3.selected{background-position:55px 15px;}
 #skin_4.selected{background-position:75px 15px;}
</style>
<script type="text/javascript">
 $(function(){
    //获取li元素
   var $li=$("ul li");
   console.info($li);
   //给li元素添加单击事件
   $li.click(function(){
    //执行换肤
    switchSkin(this.id);
    });
     //获取cookie中的皮肤
    var cookie_skin=$.cookie("mySkin");
     if(cookie_skin){
     //如果cookie中如缓存皮肤,默认使用这个皮肤
      switchSkin(cookie_skin);
     
     }
    
   //换肤操作
   function switchSkin(skinName){
    //设置选中状态,之前设置li的id和皮肤的css文件名相同
    $("#"+skinName).addClass("selected").siblings().removeClass("selected");
    //通过<link>元素的href属性设置换肤样式
    $("#cssfile").attr("href",skinName+".css");
    //吧当前皮肤加入cookie里
   // $.cookie("mySkin",skinName,{ path:"/",expires: 10});
    $.cookie( "mySkin" ,  skinName  , { path: '/', expires: 10 });
    }
  });
</script>
</head>
<body>
<!--
 网页换肤原理:根据 当单击li时,<style>元素的href属性引用 对应的css文件
-->
 <ul>
     <li id="skin_0" class="selected">灰色</li>
        <li id="skin_1">紫色</li>
        <li id="skin_2">红色</li>
        <li id="skin_3">天蓝色</li>
        <li id="skin_4">橙色</li>
        <li id="skin_5">淡绿色</li>
    </ul>
    <div id="news">
     <div id="news1">
     时事新闻
    </div>
    <div id="news2">
     娱乐新闻
    </div>
    </div>
</body>
</html>

© 著作权归作者所有

共有 人打赏支持
Winnie007
粉丝 5
博文 36
码字总数 62847
作品 0
青岛
JS对话框组件--artDialog

art.Dialog 是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验。 功能: 支持锁定屏幕(遮罩)、模拟alert和confirm、多窗口弹出、静止定位、支持Ese键关...

糖饼
2010/07/24
70K
10
Android UI换皮肤或 白天黑夜模式

> 白天夜间模式场景,换肤框架 -- 关于三种『应用内主题切换』开源项目的一点思考- https://www.jianshu.com/p/2164fa5803b9 1.Theme的方案,在style文件中定义不同的主题即可 2.遍历View,对...

desaco
08/27
0
0
artDialog v6 发布,JavaScript 对话框组件

artDialog v6 发布,官方没有提及改进内容。 art.Dialog 是一个轻巧且高度兼容的javascript对话框组件,可让你的网页交互拥有桌面软件般的用户体验。 功能: 支持锁定屏幕(遮罩)、模拟alert...

oschina
2013/12/08
14.7K
23
Android更换皮肤(主题)

目前很多app都具有换肤功能,可以根据用户自己的喜好定制自己的界面,比如新浪微博,网易新闻等等。今天这里我就是要介绍一种机制实现app换肤。 我找了几款app换肤的应用,换肤基本都是更换了...

恰同学少年
2015/08/03
0
0
Android换肤原理和Android-Skin-Loader框架解析

换皮肤啦 前言 Android换肤技术已经是很久之前就已经被成熟使用的技术了,然而我最近才在学习和接触热修复的时候才看到。在看了一些换肤的方法之后,并且对市面上比较认可的Android-Skin-Lo...

静默加载
2017/11/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

如何通过 J2Cache 实现分布式 session 存储

做 Java Web 开发的人多数都会需要使用到 session (会话),我们使用 session 来保存一些需要在两个不同的请求之间共享数据。一般 Java 的 Web 容器像 Tomcat、Resin、Jetty 等等,它们会在...

红薯
今天
1
0
C++ std::thread

C++11提供了std::thread类来表示一个多线程对象。 1,首先介绍一下std::this_thread命名空间: (1)std::this_thread::get_id():返回当前线程id (2)std::this_thread::yield():用户接口...

yepanl
今天
2
0
Nignx缓存文件与动态文件自动均衡的配置

下面这段nginx的配置脚本的作用是,自动判断是否存在缓存文件,如果有优先输出缓存文件,不经过php,如果没有,则回到php去处理,同时生成缓存文件。 PHP框架是ThinkPHP,最后一个rewrite有关...

swingcoder
今天
1
0
20180920 usermod命令与用户密码管理

命令 usermod usermod 命令的选项和 useradd 差不多。 一个用户可以属于多个组,但是gid只有一个;除了gid,其他的组(groups)叫做扩展组。 usermod -u 1010 username # 更改用户idusermod ...

野雪球
今天
1
0
Java网络编程基础

1. 简单了解网络通信协议TCP/IP网络模型相关名词 应用层(HTTP,FTP,DNS等) 传输层(TCP,UDP) 网络层(IP,ICMP等) 链路层(驱动程序,接口等) 链路层:用于定义物理传输通道,通常是对...

江左煤郎
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部