<!DOCTYPE html>

<html lang="en">

<head>

 <script src="http://code.jquery.com/jquery-1.11.3.js"></script>

 <script src="jquery.cookie.js"></script>

 <link rel="stylesheet" href="css/default.css">

 <link rel="stylesheet" href="css/skin_01.css" id='cssfile'>

 <script type="text/javascript">

 $(function () {

$('#skin ul li').click(function () {

    // this.id=$(this).attr('id')

    $('#'+this.id).addClass('checked').siblings().removeClass('checked');

    //这个可以单做Input中的radio使用

    $('#cssfile').attr('href',"css/"+this.id+".css");

    //这里可以通过设置link的href属性来覆盖

    $.cookie('mycssskin',this.id,{path:'/',expires:10});

 });

var cookie_skin=$.cookie('mycssskin');

if(cookie_skin){

    $('#'+cookie_skin).addClass('checked')//当前li元素被选中

    .siblings().removeClass('checked');

    $('#cssfile').attr('href',"css/"+cookie_skin+".css");

    $.cookie('mycssskin',cookie_skin,{path:'/',expires:10});

}

 });

 </script>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

<div id="main">

    <div id="skin">

        <ul>

        <li title="紫色" id='skin_01' class='skin_01 checked'></li>

        <li title="红色" id='skin_02' class='skin_02 '></li>

        <li title="蓝色" id='skin_03' class='skin_03'></li>

        <li title="绿色" id='skin_04' class='skin_04'></li>

        <li title="黄色" id='skin_05' class='skin_05'></li>

        <li title="粉色" id='skin_06' class='skin_06'></li>

        </ul>

    </div>

    <div class="hello">

    <div class='item'><a href="javascript:;" class='title'>时事新闻</a></div>

    <div class='item'><a href="javascript:;" class='title'>娱乐新闻</a></div>

    </div>

</div>

</body>

</html>

<!-- 问题是下面2 个样式的位置不能调

用ul li 作为父布局  div中的a最为子布局定位，发现2个会重合

得用上面的div最为父布局 下面的div最为子布局才行

问题2打钩的时候发现有边距。

通过设置padding和图片大小怎么也去不掉，坑爹的是发现阿里的图片自身带有边距

问题3 ' "的问题

有要嵌入的话，最后直接用"

-->
*{margin:;padding:}

#main{position: absolute;left:50%;top:100px;width: 200px;margin-left: -100px;}

#skin{position: relative;}

#skin ul li{float: left; list-style: none;margin-right: 5px;}

.skin_01{ background:#13227a;}

.skin_02{  background:#d81e06;}

.skin_03{  background:#1296db;}

.skin_04{  background:#1afa29;}

.skin_05{  background:#f4ea2a;}

.skin_06{  background:#d4237a;}

/*通过给每一个li设置背景色*/

#main .hello{clear: both;position: absolute;top:50px;left:-10px;}

#main .item {display: inline;}

#main .item a{text-decoration: none;width: 100px;height: 40px;line-height: 40px;

border: 1px solid #ccc;text-align: center;padding: 10px;}

#skin li{width:20px; height: 20px;}
.checked{background:url(../image/skin_01.png);background-size:cover;}

/*这是选中后的样式*/

.hello .item a{background:#13227a;}

/*这是下面的标签的样式*/

jq页面换肤效果的更多相关文章

  1. javascript 入门之简单换肤效果

    大家好,我是小强老师,这里简单入门 做一个换肤效果 效果如图所示: 这个案例思路分为两部分: 获取元素对象. var pic1 = document.getElementById('pic1'); v ...

  2. 简单实现WPF界面控件换肤效果

    效果如下如图:选择皮肤颜色 1.首先新建一个如图界面: 选择匹夫下拉框Xaml代码如下:三种颜色选项,并触发SelectionChanged事件 <ComboBox Height="2 ...

  3. js实现换肤效果

    一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 ...

  4. 基于js的网页换肤（不需要刷新整个页面，只需替换css文件）

    1. [代码][JS]代码    <HTML><HEAD><link ID="skin" rel="stylesheet" typ ...

  5. hybird之web动态换肤实现

    前言 最近在重构个hybird(原生的壳包着Web页面)的UI框架,进行到了做换肤功能的阶段,所以这里是我思考的解决的方法. 预想 目前实现换肤的功能无非就两种做法. 1.写几个皮肤文件,然后切换使用 ...

  6. Android主题换肤 无缝切换

    2016年7月6日 更新:主题换肤库子项目地址:ThemeSkinning,让app集成换肤更加容易.欢迎star以及使用,提供改进意见. 更新日志: v1.3.0:增加一键切换切换字体(初版)v1. ...

  7. Android QMUI实战：实现APP换肤功能，并自动适配手机深色模式

    Android换肤功能已不是什么新鲜事了,市面上有很多第三方的换肤库和实现方案. 之所以选择腾讯的QMUI库来演示APP的换肤功能,主要原因: 1.换肤功能的实现过程较简单.容易理解: 2.能轻松适配 ...

  8. WPF换肤之五：创建漂亮的窗体

    原文:WPF换肤之五:创建漂亮的窗体 换肤效果 经过了前面四章的讲解,我们终于知道了如何拖拉窗体使之改变大小,也知道了如何处理鼠标事件,同时,也知道了如何利用更好的编写方式来编写一个方便实用和维护的换 ...

  9. antd在线换肤定制功能

    最近react项目,用的antd框架,然后看见他的antdPro例子里面有个定制功能很帅,老大说做,那就做吧,鼓捣了一晚终于实现了. 先看预览效果吧 css换肤 入行前端的时候经常看鱼哥(张鑫旭)的博 ...

随机推荐

  1. CSS：CSS 图像拼合技术

    ylbtech-CSS:CSS 图像拼合技术 1.返回顶部 1. CSS 图像拼合技术 图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图 ...

  2. Bootstrap-table 使用总结 转载https://www.cnblogs.com/laowangc/p/8875526.html

    一.什么是Bootstrap-table? 在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这 ...

  3. 序列化之 TLV

    目录 序列化之 TLV 1. 紧凑模式 2. 可扩展性 3. 更好的可扩展性 4. 自解释性 5. 跨语言特性 6. 代码自动化:IDL语言 7. 总结 序列化之 TLV 通信协议可以理解两个节点之间 ...

  4. squirrel sql client 连接phoenix

    1. 下载 squirrel sql client 客户端后 运行 2.复制必要的jar 包到 squirrel sql client 安装目录下 需要jar 包有: phoenix-core-4.6 ...

  5. Delphi(ObjectPascal)基础语法

      一个程序分为两个部分:1.程序首部:program 来标识这是一个pascal程序  后面的是可执行文件的名称程序名称2.程序体:说明部分:数据先定义后使用执行部分:以begin开始,以end结束 ...

  6. 如何解决 react-create-app 里面的 no-unused-vars ？

    如果每次启动都有一大串的no-unused-vars 是不是感觉特别烦,不用担心啦,有个配置可以解决它: 在Hbuild 里面可以新建一个 .eslintrc 其他文件(伤心的是我在webStorm ...

  7. 10_PAE_非PAE

    前置知识: 在 windows 中 保护模式 有两种模式: 段保护 和 页保护 段保护 主要体现在 段选择子上:但是数据段.代码段.栈段等采用的都是4GB平坦模式,段的特征并没有那样展现.所以具体的保 ...

  8. Bash 脚本 set 命令教程

    http://www.ruanyifeng.com/blog/2017/11/bash-set.html set命令是 Bash 脚本的重要环节,却常常被忽视,导致脚本的安全性和可维护性出问题.本文介 ...

  9. context:component-scan报错

    文件头补上 xmlns:context=”http://www.springframework.org/schema/context” xsi:schemaLocation=”http://www.s ...

  10. [模板]PAM

    模板\([luogu5496]\) 题目 #include<bits/stdc++.h> using namespace std; const int N = 5e5 + 10; char ...