css3编写浏览器背景渐变背景色的方法_HTML5_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • HTML5

    当前位置:主页 > 网页制作 > HTML5 >

    css3编写浏览器背景渐变背景色的方法

    时间:2019-07-21|栏目:HTML5|点击:
  • css3编写浏览器背景渐变背景色的方法

    知识点:rgb全色循环算法,HEX与RGB颜色转换算法、CSS3颜色渐变,CSS3渐变色兼容ie方法,定时器与循环,函数封装,数组应用等。

    css代码:

    <style>

    *{margin:0;padding:0;}

    body#wrap{width:100%;height:500px;

    }

    </style>

    javascript代码:

    <script>

    (function(){

    var oWrap=document.getElementById('wrap');

    var max=220;/*存储封值*/

    var min=180;/*存储谷值*/

    var color=[max,min,min];/*根据初始值红色来初始化数组*/

    var timer=null;

    var length=color.length;

    var colorL,colorR timer=setInterval(change,20);

    /*不容许在机组运行中直接修改代码*/

    function change(){

    /*在定时器中每过20毫秒 执行一次代码*/

    /*检测一次数组*/

    for(var i=0;i<length;i++){

    i%=length;

    var arrX=(i+1)%length;

    var arrY=(i+2)%length;

    if(color[i]==max&&color[arrX]==min){

    color[arrY]++;

    }

    if(color[i]== min&&color[arrX]==max){

    color[arrY]--;

    }

    colorL='#'+convert(color[0])+''+convert(color[1])+''+convert(color[2])+'';

    colorR='#'+convert(color[2])+''+convert(color[0])+''+convert(color[1])+'';

    }

    gColor(colorL,colorR);

    }

    function convert(sRgb){/*rgb转换成HEX*/

    var sRgb=sRgb;

    var sHex=sRgb.toString(16);

    sHex=sHex.length<2?'0'+sHex:sHex

    /* 三目判断 判断条件 ? 符合条件 :不符合条件*/

    return sHex;

    }

    function gColor(colorL,colorR){

    if(navigator.userAgent.match(/Trident/i)&&navigator.userAgent.match(/MSIE [7|8|9].0/i)){

    //通过正则检测浏览器信息是否是ie 并且 ie版本是不是 7或者8或者9 之一

    oWrap.style.filter = "progid:DXImageTransform.Microsoft.gradient( startColorstr=" + colorL + ", endColorstr=" + colorR + ",GradientType=0 )";

    }else{

    oWrap.style.background='-webkit-linear-gradient(left,'+colorL+','+colorR+')' //谷歌

    oWrap.style.background='-ms-linear-gradient(left,'+colorL+','+colorR+')' //ie 10 11

    上一篇:html2canvas把div保存图片高清图的方法示例

    栏    目:HTML5

    下一篇:html5开发三八女王节表白神器

    本文标题:css3编写浏览器背景渐变背景色的方法

    本文地址:http://www.jh-floor.com/wangyezhizuo/HTML5/8272.html

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号