JQuery特效之七----换肤功能

最新推荐文章于 2024-05-16 10:00:15 发布

Eric010101

最新推荐文章于 2024-05-16 10:00:15 发布

阅读量596

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/oneil2016/article/details/84658994

版权

JavaWeb 专栏收录该内容

85 篇文章 2 订阅

订阅专栏

前端三大组成

html构建内容，css美化，js控制交互，jquery是一个常用js库。

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="static/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="static/css/baidu.css"/>
</head>
<body>

   <div id="header">
       <div id="header-con">
          <div class="dbg">
              <a href="javascript:;" onclick="showImgBox();">换肤</a>
          </div>
           <div class="login">
               <a href="javascript:;" id="blogin" onclick="showLoginBox();">登录</a>
           </div>
<!--
           <div>
               <a href="javascript:;" id="breg">注册</a>
           </div>
-->
       </div>
   </div>
   <div id="loginbox">
       <div class="login-item"><input type="text" id="username" placeholder="input username"></div>
       <div class="login-item"><input type="password" id="password" placeholder="input password"></div>
       <div class="login-item" onclick="doLogin();"><a href="javascript:;">登录</a></div>
   </div>
   
   <div id="dimgbox">
       <div id="dimgtitle">
           <div id="imgtitle-con">
               <div id="title1">
                   <a href="javascript:;">热门</a>
               </div>
               <div id="title2">
                   <a href="javascript:;" onclick="hideImgBox();">收起</a>
               </div>
           </div>
           <div id="imglist">
               <div class="imgitem"><img src="/static/imgs/01.jpg" alt=""></div>
               <div class="imgitem"><img src="/static/imgs/02.jpg" alt=""></div>
               <div class="imgitem"><img src="/static/imgs/03.jpg" alt=""></div>
               <div class="imgitem"><img src="/static/imgs/04.jpg" alt=""></div>
           </div>
       </div>
       
   </div>
    
            
    <script src="static/lib/jquery/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="static/lib/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="static/lib/layer-v3.1.1/layer/layer.js"></script>
    
    <script src="static/lib/jquery/jquery.cookie.js" type="text/javascript"></script>
    <script src="static/js/baidu.js"></script>
</body>
</html>

css：

*{
    padding: 0px;
    margin: 0px;
    font-family: cursive;
}

#header{
    width: 100%;
    height: 40px;
    background-color: #000;
}
#header-con{
    width: 900px;
    height: 40px;
    margin: 0px auto;
}

a{
    text-decoration: none;
}
#header-con .login {
    float: right;
    line-height: 40px;
}
#header-con .dbg{
float: left;
    line-height: 40px;
}


#header-con div a{
    color: azure;
    font-size: 20px;
}
.login-item input{
    width: 350px;
    height: 40px;
    
}
.login-item a{
    width: 350px;
    height:40px;
    background-color:cadetblue;
    display: block;
    text-align: center;
    line-height: 40px;
    color: aliceblue;
    font-size: 30px;
}
.login-item{
    margin-top: 30px;
    margin-left: 20px;
}
#loginbox{
    display: none;
}


#dimgbox{
width: 100%;
    height: 140px;
    background-color: #fff;
    position: absolute;
    top:0px;
    left:0px;
  display: none;
}
#dimgtitle{
    height:40px;
    width: 100%;
    border-bottom: solid 1px #ccc;
}
#imgtitle-con{
    width: 900px;
    height: 40px;
    margin: 0px auto;
    line-height: 40px;
}
#title1 {
float: left;
    color: #fff;
    text-align: center;
}
#title2{
float:right;
}
#imglist{

    width: 900px;
    height: 65px;
    margin: 0px auto;
    margin-top: 15px;
}
#imglist img{
    width: 100px;
}
.imgitem{
float: left;
    margin-right: 5px;
}

js：

function showLoginBox(){

    layer.open({
        type:1,
        title:"登录",
        area:["395px","300px"],
        content:$("#loginbox")
    });

}

function doLogin(){
    var username = $.trim($("#username").val());
    var password = $.trim($("#password").val());
    if(username==""||password==""){
        layer.alert(
        "用户名或密码不能为空",{
        title:"提示",
            icon:5
        });
    }else{
        //使用ajax提交到后台
    //$.ajax("/controller/login",{"username":username,"password":password},function(responseresult){});
    layer.alert(
        "登录成功",{
        title:"提示",
            icon:6
        });
    }
}


function showImgBox(){
$("#dimgbox").slideDown();
}

function hideImgBox(){
$("#dimgbox").slideUp();
}

$(function(){
    if($.cookie("bg-pic")==""||$.cookie("bg-pic")==null){
        $("body").css({"background-image":"url(/static/imgs/01.jpg)","background-repeat":"no-repeat"});
    }else{
    $("body").css({"background-image":"url('"+$.cookie("bg-pic")+"')","background-repeat":"no-repeat"});}
 $(".imgitem img").click(function(){
    var src = $(this).attr("src");
     $("body").css({"background-image":"url('"+src+"')","background-repeat":"no-repeat"});
     $.cookie("bg-pic",src);
 });
});

要注意引入jquery.cookie插件

Eric010101

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery特效之七----换肤功能

前端三大组成html构建内容，css美化，js控制交互，jquery是一个常用js库。html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;
复制链接

扫一扫