zoukankan      html  css  js  c++  java
  • 标题栏背景色随背景图片自适应

    <!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" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Document</title>
        <style>
            .box { width: 600px; height: 600px; box-shadow: inset 0 60px rgba(255,255,255,.2), inset 0 0 300px rgba(255,255,255,.1), inset 50px -20px 0 rgba(255,255,255,.1), inset -300px 120px rgba(255,255,255,.06); -webkit-transition: background-color .25s; transition: background-color .25s; overflow: hidden; position: relative;}
            #title{position: absolute;width: 100%;height: 40px;line-height: 40px;z-index: 9000;text-align: center;color:#fff;
    box-shadow: 2px 2px 2px rgba(0,0,0,.2);-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.2);-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.2);-o-box-shadow: 2px 2px 2px rgba(0,0,0,.2);-ms-box-shadow: 2px 2px 2px rgba(0,0,0,.2);
            }
            .list { width: 600px; height: 600px; position: absolute; text-align: center; }
            .list > img { vertical-align: middle; box-shadow: 0 0 10px rgba(0,0,0,.35) }
            .list::after { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; }
            .index { width: 600px; margin-top: 20px; text-align: center; }
            a { display: inline-block; margin: 0 2px; width: 16px; height: 16px; line-height: 16px; border-radius: 14px; background-color: #ddd; text-align: center; color: #333; font-family: 'microsoft yahei'; font-size: 12px; }
            a:hover { text-decoration: none; }
            .active { background-color: #cd0000; color: #fff; }
            #show{width: 20px;height: 20px;border: 1px solid #ddd;}
        </style>
    </head>
    <body>
        <div id="box" class="box">
            <div id="title">这是一个测试</div>
            <div id="list1" class="list"><img src="imgs/1.jpg"></div>
            <div id="list2" class="list"><img src="imgs/2.jpg"></div>
            <div id="list3" class="list"><img src="imgs/3.jpg"></div>
            <div id="list4" class="list"><img src="imgs/4.jpg"></div>
        </div>
        <div id="index" class="index">
            <a>1</a>
            <a>2</a>
            <a>3</a>
            <a>4</a>
        </div>
        <div id="show"></div>
    </body>
    </html>
    <script src="jquery-1.10.2.js"></script>
    <script src="rgbaster.js"></script>
    <script>
        $(function(){
            $("#index").find("a").click(function(){
                var index=$(this).index()+1;
                var list=$("#list"+index);
                list.show();
                list.siblings(".list").hide();
                var src=list.find("img").attr("src");
                RGBaster.colors(src, {
                    paletteSize: 30, // 调色板大小
                      exclude: [ 'rgb(255,255,255)','rgb(0,0,0)' ],  // 为了使取色更合理,排除白色,黑色
                    success: function(payload) {
                        // payload.dominant是主色,RGB形式表示
                        // payload.secondary是次色,RGB形式表示
                        // payload.palette是调色板,含多个主要颜色,数组    
                        var color1=MixColor1(payload.secondary,0.8);
                        var color2=MixColor3(payload.secondary,payload.dominant,0.7);
                        console.log(payload.dominant);
                        $("#title").css("background-color",color2);
                        $("#show").css("background-color",color2);
                    }
                });            
            })    
        })
    
        //与白色按比例进行混合
        function MixColor1(rgb,rate){
            var regexp = /[0-9]{0,3}/g;  
               var re = rgb.match(regexp);
               var color1 = [];
               var color2 = [255,255,255];
               var rate1=rate,rate2=1-rate1;
    
            for (var i = 0; i < re.length; i++) {
                   var t = re[i];
                   if(t!==""){
                       color1.push(parseInt(t));
                   }
           }
    
           var r=parseInt(color1[0]*rate1+color2[0]*rate2);
           var g=parseInt(color1[1]*rate1+color2[1]*rate2);
           var b=parseInt(color1[2]*rate1+color2[2]*rate2);
               return "rgb("+r+","+g+","+b+")";
        }
    
        //主色和次色按比例进行混合
        function MixColor2(rgb1,rgb2,rate){
            var regexp = /[0-9]{0,3}/g;  
               var re1 = rgb1.match(regexp);
               var re2 = rgb2.match(regexp);
               var color1 = [];
               var color2 = [];
               var rate1=rate,rate2=1-rate1;
    
            for (var i = 0; i < re1.length; i++) {
                   var t1 = re1[i];
                   var t2 = re2[i];
                   if(t1!==""){
                       color1.push(parseInt(t1));
                       color2.push(parseInt(t2));
                   }
           }
    
           var r=parseInt(color1[0]*rate1+color2[0]*rate2);
           var g=parseInt(color1[1]*rate1+color2[1]*rate2);
           var b=parseInt(color1[2]*rate1+color2[2]*rate2);
               return "rgb("+r+","+g+","+b+")";
        }
    
        //主色、次色和白色按比例进行混合,白色占比20%
        function MixColor3(rgb1,rgb2,rate){
            var regexp = /[0-9]{0,3}/g;  
               var re1 = rgb1.match(regexp);
               var re2 = rgb2.match(regexp);
               var color1 = [];
               var color2 = [];
               var color3 = [255,255,255];
               var rate1=rate*0.8,rate2=(1-rate)*0.8,rate3=0.2;
    
            for (var i = 0; i < re1.length; i++) {
                   var t1 = re1[i];
                   var t2 = re2[i];
                   if(t1!==""){
                       color1.push(parseInt(t1));
                       color2.push(parseInt(t2));
                   }
           }
    
           var r=parseInt(color1[0]*rate1+color2[0]*rate2+color3[0]*rate3);
           var g=parseInt(color1[1]*rate1+color2[1]*rate2+color3[1]*rate3);
           var b=parseInt(color1[2]*rate1+color2[2]*rate2+color3[2]*rate3);
               return "rgb("+r+","+g+","+b+")";
        }
    </script>

    注:提供三种颜色混合方式,主次混合颜色偏暗,与白色混合颜色偏淡,建议主次白3色混合

    Github项目地址是:https://github.com/briangonzalez/rgbaster.js

    核心script地址:<script src="http://rawgit.com/briangonzalez/rgbaster.js/master/rgbaster.js"></script>

  • 相关阅读:
    JDBC 复习4 批量执行SQL
    JDBC 复习3 存取Oracle大数据 clob blob
    Oracle复习
    Linux命令(1)grep
    JDBC 复习2 存取mysql 大数据
    JDBC 复习1 DBUtil
    php 环境搭建问题
    Windows 批处理 bat 开启 WiFi 菜单选项 设置ID PWD
    Bat 批处理启动和停止Oracle 服务
    docker 学习1 WSL docker ,Windows docker
  • 原文地址:https://www.cnblogs.com/xuhang/p/4764145.html
Copyright © 2011-2022 走看看