2分六合

  • JS特效 http://hkcren.com/js/
  • 关于JS特效代码如何设置应用动态颜色背景

    发布日期:2019-01-29 08:37:00


      今天小编我和大家一起进入到了新的栏目js特效代码专栏组,本篇文章是有关于关于JS特效代码如何设置应用动态颜色背景,小编我告诉大家我们在学习的过程中要循环渐进从基础理论开始学习再一点一滴的积少成多,然后再慢慢的进入到学习的状态更加努力的学习才能有所收获。

    <!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>Color</title>
    <style type="text/css">
    body{ background:#CCCCCC;}
    .color{ background-color:#ffffff; color:#000000; height:200px; width:300px;}
    </style>
     
    </head>
     
    <body>
    <div class="color" id="box"></div>
    <form name="form">
    <input type="text" name="input1"/>
    <input type="button" value="变色" onclick="color()"/>
    </form>
    <script language="javascript">
    function $(id){
    return document.getElementByIdx_x_x_x_x (id);
    }
     
    function gs(obj,name){
    return (obj.currentStyle)?obj.currentStyle[name]:window.getComputedStyle(obj,null)[name];
    }
     
    function h2rgb(h){
        var string="0123456789abcdef";
        var array=new Array(3);
        for(var x=0;x<3;x++){
        array[x]=h.slice(x*2,x*2+2);
        var i=array[x].slice(0,1);
        var j=array[x].slice(1);
        array[x+3]=string.indexOf(i)*16+string.indexOf(j);
        }
        return array.slice(3,6);
    }
     
    function rgb2h(array){
        var string="0123456789abcdef";
        var h="";
        for(var x=0;x<3;x++){
        h+=string.substr(Math.floor(array[x]/16),1)+string.substr(array[x] ,1);
        }
        return h;
    }
    背景
    function change(array,array2){
        var key=5;
         var step=new Array(3);
        for(var x=0;x<3;x++){
            //step[x]=array[x]+Math.ceil((array2[x]-array[x])/5);
            if(array2[x]-array[x]>0&&array[x]+key<array2[x])
            step[x]=array[x]+key;
            else if(array2[x]-array[x]<0&&array[x]-key>array2[x])
            step[x]=array[x]-key;
            else
            step[x]=array2[x];
        }
        return step;
    }
     
    function color(){
        var timer;
        if(!$("box").currentStyle){
        var array=gs($("box"),"backgroundColor").slice(4,-1).split(",");//split后字符数组
        array=h2rgb(rgb2h(array));
        }
        else{
        var array=h2rgb(gs($("box"),"backgroundColor").slice(1));
        }
        var array2=h2rgb(document.form.input1.value);
        if((array[0]!=array2[0])||(array[1]!=array2[1])||(array[2]!=array2[2])){
        $("box").style.backgroundColor="#"+rgb2h(change(array,array2));
        clearTimeout(timer);
        timer=setTimeout(color,100);
        }
        else{
        clearTimeout(timer);
        $("box").style.backgroundColor="#"+rgb2h(array2);
        }
    }
    </script>
    </body>
    </html>
     

      我把里面主要功能都用函数来分割:

      $(id)用id获取元素;

      gs(obj,name)根据对象获取元素样式;

      h2rgb(h)16进制颜色值转换成rgb颜色值用数字型数组返回;

      rgb2h(array)rgb颜色值转换成16进制颜色值用字符串形式返回;

      change(array,array2)将原颜色值array转换到目标颜色array2,key可以动画变换速度;

    2分六合  color()获取当前颜色以及目标颜色后调用change(array,array2)同时递归产生动画。

      兼容FF,IE6/7/8,其中兼容点有:

      1、FF跟IE获取样式表

      2、FF得到的颜色值为RGB,而IE得到的却是十六进制字符串

      是不是在学习的海洋里面又忘记了时间,本文里面有很多重要的知识和技能,你可以拿出你的小本子把核心部分写下来,不仅可以加深记忆最重要的事还可以长久的保存以便在不时之需时可以拿出来看一看。
    • 专题推荐

    次元立方 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
    本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规