专栏首页lonelydawn的前端猿区一键换肤的简单实现

一键换肤的简单实现

以前看到一键换肤的效果很炫酷,其实想一想,实现很简单,于是乎也写一个吧。

上代码:

oneBtnChangeSkin.html ( 引入bootstrap.min.css 和 jquery.js )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <title>one button to change skin</title>
    <link rel="stylesheet" href="dist/bootstrap/css/bootstrap.min.css">
</head>
<body>
<header id="header" class="row navbar-fixed-top" style="border-bottom:1px solid #eee;">
    <div class="col-md-1"></div>
    <div class="navbar-brand">One Piece</div>
    <div class="text-center col-md-9">
        <div class="col-md-4"></div>
        <div class="col-md-4" style="margin-top:10px;">
            <input type="text" class="form-control col-md-12" placeholder="search..." style="padding-right:34px;"/>
            <span class="glyphicon glyphicon-search" style="position: absolute;right:25px;top:10px;"></span>
        </div>
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a href="##" title="Click to change skin" onclick="listShow();" onmouseleave="listHide();">
                    Skin&nbsp;<span class="glyphicon glyphicon-triangle-bottom"></span>
                    <div id="SkinList" class="row" style="display:none;position:absolute;width:360px;height:400px;overflow:auto;margin-top:16px;">
                        
                    </div>
                </a>
            </li>
            <li><a href="##">Home</a></li>
            <li><a href="##">About</a></li>
            <li><a href="##">Contact</a></li>
        </ul>
    </div>
</header>
<div class="row" style="margin-top:50px;height:540px;">
    <div id="left-box" class="col-md-3" style="height:540px;"></div>
    <div id="right-box" class="col-md-9" style="height:540px;"></div>
</div>
<script src="dist/jquery/jquery-3.1.1.min.js"></script>
<script src="javascript/oneBtnChangeSkin.js"></script>
</body>
</html>

oneBtnChangeSkin.js

/**
 * Created by lonely.dawn on 2017-02-06.
 * 一键换肤的简单实现
 */

//模拟后台返回的数据 , 记录各个需要切换样式的点 (这里是简单实现 , 只给出三个 经典ERP布局模块点的变换)
var skins= [{
        top:'resources/images/gray-top.jpg',
        left:'resources/images/gray-left.jpg',
        right:'resources/images/gray-right.jpg',
        thumbnail:'resources/images/gray-thumbnail.jpg',
        title:'经典雅致灰',
        des:'灰色穿插于黑白之间,代表着幽暗、典雅、寂寞与空灵。'
    }, {
        top:'resources/images/blue-top.jpg',
        left:'resources/images/blue-left.jpg',
        right:'resources/images/blue-right.jpg',
        thumbnail:'resources/images/blue-thumbnail.jpg',
        title:'宁静幽雅蓝',
        des:'蓝是一种纯净的颜色,代表着宁静、理智、淡泊、广阔与忧郁。'
    }];

//页面加载完毕,为skin list添加项
$(function(){
    for(var i=0;i<skins.length;i++) {
        $("#SkinList").append(
            "<div class='media' onclick='skinToggle("+i+")'>" +
            "<a href='#' class='pull-left'>" +
            "<img src='" + skins[i].thumbnail + "' title='Toggle to change skin.'/>" +
            "</a>" +
            "<div class='media-body'>" +
            "<h3 class='media-heading'>" + skins[i].title + "</h3>" +
            "<p class='text-left'>" + skins[i].des + "</p>" +
            "</div>" +
            "</div>"+
            "<hr/>"
        );
    }
    //默认使用下标为0的皮肤
    skinToggle(0);
});

//skin list 下拉框显示控制
var listShow=function(){
    $("#SkinList").css("display","block");
};

var listHide=function(){
    $("#SkinList").css("display","none");
};

//皮肤切换控制
var skinToggle=function(index){
    var item=skins[index];
    console.log(index);
    $("#header").css("background","url("+item.top+")");
    $("#header").css("background-size","cover");

    $("#left-box").css("background","url("+item.left+")");
    $("#left-box").css("background-size","cover");

    $("#right-box").css("background","url("+item.right+")");
    $("#right-box").css("background-size","contain");
};

很简单的代码,然后来体验一下这酷炫的感觉

在线演示 (1月后 17-03-10 腾讯云服务器到期,不一定续)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ReactJS的简单介绍和使用

    一、React的家世背景 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一...

    lonelydawn
  • NoSQL——非关系型数据库简述

    关系型数据库是以行和列的形式存储数据,并以表的形式组成了数据库,其数据查询是用query来检索的。 NoSQL(Not Only SQL),非关系数据库,顾名...

    lonelydawn
  • lambda+reduce的一句艰深代码

    一句话一脸懵逼 某天晚上看到一句lambda+reduce 组合的代码,看的头都炸了,愣是没看懂,不过也可能因为稀疏的脑神经经过一天的摧残已经运转不动了,这两天...

    lonelydawn
  • Larave-vue-crud-laravel-和vue-增删改查

    看到successfully代表laravel安装成功,如果没有成功请换淘宝镜像重写安装.

    胡哥有话说
  • 基于 Go 语言开发在线论坛(三):访问论坛首页

    前面两篇教程学院君分别给大家介绍了基于 Go 语言构建在线论坛的整体设计以及数据表的创建、模型类的编写,今天我们来看看如何在服务端处理用户请求。

    学院君
  • 给你的博客文章加入”展开/收缩功能‘’

    Youngxj
  • 多栏布局与JS实现瀑布流

    css3属性之多栏布局与JS实现瀑布流    背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的...

    okaychen
  • js实现底部带圆点的左右滑动效果

    在一些商品展示和微信开发中经常会用到图片的展示和页面的滑动效果,前面我介绍了一种手机端上下滑动效果,今天我来给大家介绍一种手机端左右滑动并且底部有圆点,实心的圆...

    无邪Z
  • 实现H5中Skeleton Screen骨架屏预加载动态效果

    现在很多web和客户端都已经放弃了以前的那种菊花的加载方式,转而使用Skeleton Screen Loading,比如Facebook、国内的淘宝等都使用了骨...

    程fay
  • monaco-editor做自己的代码测试工具

    本文说的是如何通过monaco-editor实现一个类似于codepen一样的在线代码测试工具。

    lzugis

扫码关注云+社区

领取腾讯云代金券