一键换肤的简单实现

lonelydawn

发布于 2018-02-09 11:58:59

1.1K0

发布于 2018-02-09 11:58:59

文章被收录于专栏：lonelydawn的前端猿区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");
};

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