文档章节

网页换肤功能

Winnie007
 Winnie007
发布于 2015/11/24 18:42
字数 469
阅读 284
收藏 11
点赞 0
评论 0

一、网页换肤效果

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 ⋅ 10

artDialog v6 发布,JavaScript 对话框组件

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

oschina ⋅ 2013/12/08 ⋅ 23

Android更换皮肤(主题)

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

恰同学少年 ⋅ 2015/08/03 ⋅ 0

Android换肤原理和Android-Skin-Loader框架解析

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

静默加载 ⋅ 2017/11/27 ⋅ 0

LayIM v2.x 正式开源,Web 即时通讯前端解决方案

作为一款16年就已经正式推出的商业组件,过去的一年多时间里LayIM都并没有开放下载。为了给更多的开发者带来一些社交想象,LayIM于6月9号正式开源V2版本,你可以自由下载和使用。LayIM是网页...

贤心 ⋅ 2017/06/13 ⋅ 23

Android 打造自己的个性化应用(一):应用程序换肤主流方式的分析与概述

Android平台api没有特意为换肤提供一套简便的机制,这可能是外国的软件更注重功能和易用,不流行换肤。系统不提供直接支持,只能自行研究。 换肤,可以认为是动态替换资源(文字、颜色、字体...

长平狐 ⋅ 2012/09/03 ⋅ 0

PKResManager

iOS换肤功能。提供UIImage、UIColor、UIFont的Category扩展方式。 实现协议即可换肤。 [Code4App.com]

红薯 ⋅ 2013/07/10 ⋅ 0

webpack构建下换肤功能的实现思路

最近项目中要实现一个换肤的功能,大体想了下,记录一下思路 要实现换肤功能,目标就是打包生成多份皮肤文件,需要哪个就用哪个 打包生成多份皮肤文件 因为项目是使用webpack构建的,要想生成...

xiyuyizhi ⋅ 2017/11/27 ⋅ 0

易语言换肤支持库--SkinLib.fne

使用Delphi开发的基于VCLSkin的易语言换肤支持库,作者liigo。 本库是对Delphi换肤控件 VclSkin(版本3.02CN)的封装,深受启发于xwxyh的无限扩展支持库,在此对作者xwxyh表示由衷的感谢和敬...

匿名 ⋅ 2010/03/02 ⋅ 0

wordpress更换主题原理?

最近在写一个网站,想实现换肤功能,感觉wordpre上传主题文件就能实现换肤共能,请问wordpress更换主题是怎样实现的?请详细说说,谢谢各位!

cc12 ⋅ 2014/08/27 ⋅ 4

没有更多内容

加载失败,请刷新页面

加载更多

下一页

笔试题之Java基础部分【简】【一】

基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语法,集合的语法,io 的语法,虚拟机方面的语法,其他 1.length、length()和size() length针对...

anlve ⋅ 18分钟前 ⋅ 1

table eg

user_id user_name full_name 1 zhangsan 张三 2 lisi 李四 `` ™ [========] 2018-06-18 09:42:06 星期一½ gdsgagagagdsgasgagadsgdasgagsa...

qwfys ⋅ 42分钟前 ⋅ 0

一个有趣的Java问题

先来看看源码: public class TestDemo { public static void main(String[] args) { Integer a = 10; Integer b = 20; swap(a, b); System.out......

linxyz ⋅ 46分钟前 ⋅ 0

十五周二次课

十五周二次课 17.1mysql主从介绍 17.2准备工作 17.3配置主 17.4配置从 17.5测试主从同步 17.1mysql主从介绍 MySQL主从介绍 MySQL主从又叫做Replication、AB复制。简单讲就是A和B两台机器做主...

河图再现 ⋅ 今天 ⋅ 0

docker安装snmp rrdtool环境

以Ubuntu16:04作为基础版本 docker pull ubuntu:16.04 启动一个容器 docker run -d -i -t --name flow_mete ubuntu:16.04 bash 进入容器 docker exec -it flow_mete bash cd ~ 安装基本软件 ......

messud4312 ⋅ 今天 ⋅ 0

OSChina 周一乱弹 —— 快别开心了,你还没有女友呢。

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @莱布妮子 :分享吴彤的单曲《好春光》 《好春光》- 吴彤 手机党少年们想听歌,请使劲儿戳(这里) @clouddyy :小萝莉街上乱跑,误把我认错成...

小小编辑 ⋅ 今天 ⋅ 8

Java 开发者不容错过的 12 种高效工具

Java 开发者常常都会想办法如何更快地编写 Java 代码,让编程变得更加轻松。目前,市面上涌现出越来越多的高效编程工具。所以,以下总结了一系列工具列表,其中包含了大多数开发人员已经使用...

jason_kiss ⋅ 昨天 ⋅ 0

Linux下php访问远程ms sqlserver

1、安装freetds(略,安装在/opt/local/freetds 下) 2、cd /path/to/php-5.6.36/ 进入PHP源码目录 3、cd ext/mssql进入MSSQL模块源码目录 4、/opt/php/bin/phpize生成编译配置文件 5、 . ./...

wangxuwei ⋅ 昨天 ⋅ 0

如何成为技术专家

文章来源于 -- 时间的朋友 拥有良好的心态。首先要有空杯心态,用欣赏的眼光发现并学习别人的长处,包括但不限于工具的使用,工作方法,解决问题以及规划未来的能力等。向别人学习的同时要注...

长安一梦 ⋅ 昨天 ⋅ 0

Linux vmstat命令实战详解

vmstat命令是最常见的Linux/Unix监控工具,可以展现给定时间间隔的服务器的状态值,包括服务器的CPU使用率,内存使用,虚拟内存交换情况,IO读写情况。这个命令是我查看Linux/Unix最喜爱的命令...

刘祖鹏 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部