一键换肤的简单实现

2019独角兽企业重金招聘Python工程师标准>>>

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

上代码：

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

    
    
    
    



    

    
One Piece
    

        

        

            
            
        
        

            

                
                    Skin 
                    

                        
                    
                
            
            
Home
            
About
            
Contact
        
    


    

    

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[i].title + "
" +
            "
" + skins[i].des + "
" +
            "
" +
            "

"+ "

---

" ); } //默认使用下标为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 腾讯云服务器到期，不一定续）

转载于:https://my.oschina.net/lonelydawn/blog/837738