主题风格切换

最新推荐文章于 2024-08-27 20:05:46 发布

置顶 weixin_41959763

最新推荐文章于 2024-08-27 20:05:46 发布

阅读量1.2k

点赞数

分类专栏：前端文章标签：主题风格切换

本文链接：https://blog.csdn.net/weixin_41959763/article/details/79998615

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>test</title>
<link type="text/css" rel="stylesheet" href="theme/css/style_01.css" id="themestyle" />
<script language="javascript" type="text/javascript" src="theme/js/jquery-1.7.1.js"></script>



<style>
@charset "utf-8";
/* CSS Document 本样式为公共样式*/
html{overflow-x:hidden; overflow-y:auto;}
body,html {margin: 0px;padding: 0px; width: 100%;}
body, td, th {font-size:12px;font-family:"宋体"}
div, ul, li, h1, h2, h3, h4, h5, h6, dl, dt, dd, p, img, input {margin: 0px;padding: 0px;list-style-type: none;}
img {border: 0px;margin: 0px;padding: 0px;}
h1 {font-size: 24px;color: #fff;}
h2 {font-size: 18px;color: #fff;}
h3 {font-size: 15px;color: #fff;}
h4 {/*font-size: 13px;*/color: #fff;}
h5 {font-size: 12px;color: #fff;}
a {text-decoration: none;}
a:HOVER{text-decoration: none;}
a:focus{ outline:none; -moz-outline-style: none; /* FF */ } 

.bs{ width:100%; height:300px;  float: left;}
.bs ul{float:right;right:50%;position:relative;}
.bs ul li{ float:left;left:50%; margin:0 20px;position:relative;}
.bs ul li img{ width:180px; height:130px;}

.mainBg{ position:fixed; z-index:1; width:100%; height:100%; left:0; top:0px; margin: 0px; padding: 0px;}
.mainBg img{ width:100%; height:100%;}
/* .mainBg{ position:fixed; z-index:1; width:1220px; height:95px; bottom:0px; margin: 0px; padding: 0px;left:50%;margin-left:-610px;} */
/* .mainBg img{ width:100%; height:;} */
.mainWrap{ width:1220px; margin:0; left:50%;margin-left:-610px;position:absolute; z-index:2; top:0px;}
.mainWrap ul.padding35{ width:1366px; padding:20px 30px 0px 30px;}
.skin{ position:fixed; width:100%; height:400px; z-index:100; left:0; top:-400px; background: url(../images/black60.png);overflow:hidden;}
.bsTitle{width:100%; height:50px; margin:50px auto 0 auto;}
.bsTitle h2{line-height: 50px; font-size: 16px; color: #fff; float: left; margin-left: 135px;}

</style>
</head>
<body id="mainBody">
<!--换肤模块开始-->
    <div class="skin">
        <div class="bsTitle">
            <h2>请选择您喜欢的风格:</h2>
        </div>
        <div class="bs">
            <ul>
                <li><a href="#" id="1"><img src="theme/images/bg01_xiao.jpg"/></a>
                    <div class="bsFoet">风格1</div></li>

                <li><a href="#" id="2"><img src="theme/images/bg02_xiao.jpg"/></a>
                    <div class="bsFoet">风格2</div></li>

                <li><a href="#" id="3"><img src="theme/images/bg03_xiao.jpg"/></a>
                    <div class="bsFoet">风格3</div></li>
            </ul>
        </div>
    </div>
 <!-- <div class="skin">
     <div class="bsTitle">
      <h2>请选择您喜欢的风格:</h2>
     </div>
        <div class="bs">
            <ul>
                <li><a href="#" id="1"><img src="theme/images/bg01_xiao.jpg"></a><div class="bsFoet">风格1</div></li>                 
                <li><a href="#" id="2"><img src="theme/images/bg02_xiao.jpg"></a><div class="bsFoet">风格2</div></li>
                <li><a href="#" id="3"><img src="theme/images/bg03_xiao.jpg"></a><div class="bsFoet">风格3</div></li>
            </ul>
        </div>
    </div> -->
    
    <!--换肤模块结束-->

<!--背景图片-->
<div class="mainBg">
        <img src="theme/images/bg01.jpg" width="100%" height="100%" id="mainBg">
</div>

<div class="mainWrap">
主界面部分
</div>

<script language="javascript" type=text/javascript>
//换肤
$(function() {
    $(".topNav a.set").click(function() {
        $(".skin").animate( {
            top : '0px'
        }, "slow");
        $(".mainWrap").animate( {
            top : '0px'
        }, "slow");
    });
    /*$(".tupic a.set").click(function() {
        $(".skin").animate( {
            top : '0px'
        }, "slow");
        $(".mainWrap").animate( {
            top : '0px'
        }, "slow");
    });*/
    
});
$(function() {
    //changed background
    $('.bs ul li a').click(function() {
        var num = $(this).attr('id');
        changeSkinStyle(num);
        curtheme = "theme/css/style_0" + num + ".css";//整体样式
        curbg = "theme/images/bg0" + num + ".jpg";//背景图片
        document.getElementById("themestyle").href = curtheme;
        $("#mainBg").attr("src", curbg);
        //window.frames["iframepage"].document.getElementById("themestyle").href = curtheme;           
    });
    
});

function changeSkinStyle(num){
    document.getElementById('themestyle').href = "zh_CN/theme/css/style_0"+num+".css";
}
</script>

</body>
</html>