网站换肤

最新推荐文章于 2024-03-06 10:10:13 发布

花花最美腻

最新推荐文章于 2024-03-06 10:10:13 发布

阅读量600

点赞数

分类专栏： JQuery 文章标签：换肤 cookie jQuery JavaScript

本文链接：https://blog.csdn.net/qq_38912819/article/details/80542700

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

  效果图 

  可选框是一张背景图片，通过定位显示不同颜色和对号 

  1、js 

 
 var  
 color 
 =[ 
 "#9e9e9e" 
 , 
 '#b2d600' 
 , 
 '#f8b646' 
 , 
 '#08bece' 
 , 
 '#e3165c' 
 , 
 '#bb3bd9' 
 ]; 

 
 //把颜色按顺序存在数组里 

 
 $ 
 ( 
 '#skin-ul  
 li 
 ' 
 ). 
 on 
 ( 
 'click' 
 , 
 function  
 () { //点击li时 给当前li添加class（‘’active‘’） 兄弟移除class 

 
 //通过定位背景图片改变可选框颜色 

 
   
 $ 
 ( 
 this 
 ). 
 addClass 
 ( 
 'active' 
 ). 
 siblings 
 (). 
 removeClass 
 ( 
 'active' 
 ); 

 
   
 $ 
 ( 
 "#color" 
 ). 
 css 
 ( 
 'background' 
 , 
 color 
 [ 
 $ 
 ( 
 this 
 ). 
 index 
 ()]); //颜色为当前索引在颜色数组中的颜色 

 
   
 setCookie 
 ( 
 'skin' 
 , 
 $ 
 ( 
 this 
 ). 
 index 
 (), 
 7 
 ); //setCookie 存的是索引值 

 
 }). 
 eq 
 ( 
 getCookie 
 ( 
 'skin' 
 )). 
 trigger 
 ( 
 'click' 
 ); //取的是索引值 触发当前值的点击事件 

  2、cookie 

 
 function  
 removeCookie 
 (key) { 

 
   
 setCookie 
 (key, 
 '' 
 ,) //移除cookie value==“” 

}

 
 function  
 getCookie 
 (key) { //取cookie函数  

 
   
 var  
 aCookie  
 =  
 document 
 . 
 cookie 
 ; //获取cookie 

 
   
 var  
 arr  
 =  
 aCookie 
 . 
 split 
 ( 
 '; ' 
 ); //根据分号加空格（就是有空格）分割取到的cookie 存在arr数组 

 
   
 for  
 ( 
 i  
 =  
 0 
 ;  
 i  
 <  
 arr 
 . 
 length 
 ;  
 i 
 ++) { 
 // 
 再循环分割数组中每个 

 
   
 var  
 arr1  
 =  
 arr 
 [ 
 i 
 ]. 
 split 
 ( 
 '=' 
 ); //根据等号分割 存到数组arr1中 

 
   
 if  
 ( 
 arr1 
 [ 
 0 
 ] == key) { //如果第一个值等于传进来的参数 该数组中第二个值就为cookie的值 

 
   
 return  
 arr1 
 [ 
 1 
 ]; 

}

}

}

 
 function  
 setCookie 
 (key, val, day) { //设置cookie 

 
   
 var  
 str  
 = key +  
 "="  
 + val +  
 '; ' 
 ; //模仿cookie组成 

 
 if  
 (day) {

 
   
 var  
 d  
 =  
 new  
 Date(); //新建日期对象 

 
   
 d 
 . 
 setDate 
 ( 
 d 
 . 
 getDate 
 () + day); //设置过期日期=获取当前日期+day（缓存时间） 

 
   
 str  
 +=  
 "expires="  
 +  
 d 
 ; //拼接字符串 

}

 
   
 document 
 . 
 cookie  
 =  
 str 
 ; //存cookie 

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #skin-ul li{
            list-style: none;
            float: left;
            background: url('images/theme.gif');
            width: 15px;
            height: 15px;
            margin: 7px;
        }
        #skin{
            width: 200px;
            height: 30px;
            line-height: 40px;
            text-align: center;
            background: red;
        }
        #skin-ul li:nth-child(1){
            background-position: 0 0;
        }
        #skin-ul li:nth-child(1).active{
            background-position: 0 -15px;
        }
        #skin-ul li:nth-child(2){
            background-position: -20px 0;
        }
        #skin-ul li:nth-child(2).active{
            background-position: -20px -15px;
        }
        #skin-ul li:nth-child(3){
            background-position: -40px 0;
        }
        #skin-ul li:nth-child(3).active{
            background-position: -40px -15px;
        }
        #skin-ul li:nth-child(4){
            background-position: -60px 0;
        }
        #skin-ul li:nth-child(4).active{
            background-position: -60px -15px;
        }
        #skin-ul li:nth-child(5){
            background-position: -80px 0;
        }
        #skin-ul li:nth-child(5).active{
            background-position: -80px -15px;
        }
        #skin-ul li:nth-child(6){
            background-position: -100px 0;
        }
        #skin-ul li:nth-child(6).active{
            background-position: -100px -15px;
        }
        #color{
            width: 150px;
            height: 40px;
            margin: 5px;
            line-height: 40px;
            text-align: center;
            background: #9e9e9e;
        }
    </style>

</head>
<body>
<div id="skin">
    <ul id="skin-ul">
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<div id="color">
    你好啊 李银河
</div>
<script src="cookie.js"></script>
<script src="jquery-2.1.0.min.js"></script>
<script>

    var color=["#9e9e9e",'#b2d600','#f8b646','#08bece','#e3165c','#bb3bd9'];
$('#skin-ul li').on('click',function () {
    $(this).addClass('active').siblings().removeClass('active');
    $("#color").css('background',color[$(this).index()]);
    setCookie('skin',$(this).index(),7);
}).eq(getCookie('skin')).trigger('click');
    //    $('.news').attr('class','news skin'+$(this).index());

</script>
</body>
</html>

cookie.js

function removeCookie(key) {
    setCookie(key,'',)
}
function getCookie(key) {
    var aCookie = document.cookie;
    var arr = aCookie.split('; ');
    for (i = 0; i < arr.length; i++) {//再分割数组中每个
        var arr1 = arr[i].split('=');
        if (arr1[0] == key) {
            return arr1[1];
        }
    }
}
function setCookie(key, val, day) {
    var str = key + "=" + val + ';';
    if (day) {
        var d = new Date();
        d.setDate(d.getDate() + day);
        str += "expires=" + d;
    }
    document.cookie = str;
}

花花最美腻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网站换肤

效果图可选框是一张背景图片，通过定位显示不同颜色和对号1、jsvar color=["#9e9e9e",'#b2d600','#f8b646','#08bece','#e3165c','#bb3bd9'];//把颜色按顺序存在数组里$('#skin-ul li').on('click',function () { //点击li时给当前li添加class（‘’active‘’）兄弟移除c...
复制链接

扫一扫