zoukankan      html  css  js  c++  java
  • Javacript实现颜色渐变的效果

    原文地址:Javascript实现颜色渐变效果 
    作者官网:胡旭个人博客 
    对于本站的导航栏,想做点什么。所以,选择了用js对导航栏的颜色做了梯度的变化处理。 
    起初,觉得用opacity属性(透明度)来改变颜色的梯度变化。不过,这样会出现一个问题。 
    每一个导航标签用的是[li],当鼠标浮动到标签上时,通过onmouseover()立即改变[li]的className,并用setInterval()来使其opacity(透明度)由0变到1.不过,当鼠标离开时,对于[li]标签的颜色恢复的处理貌似麻烦了许多。所以,很快就放弃了这个做法,换种思路。 
    到百度上一搜,看到了一篇很好的文章,地址为http://www.cnblogs.com/cloudgamer/archive/ 
    2009/03/11/color.html。随之,进行了简化,找到了解决的办法。 
    不如首先通过两个颜色值,比如"#FFFFFF"、"#CCCCCC",其中一个为起始颜色,另一个为终止颜色。通过处理,获取两种颜色在变化时的各种颜色字符串,并且字符串的个数,即获取的频率可以调节。返回给某个数组变量,代码如下:

    /**
     * @Desc 该文件是改变颜色梯度的库 - colorGrad.js
     * @Author GenialX
     * @Date 2013.05.30
     * @QQ 2252065614
     * @URL http://www.ihuxu.com
     */
    
    /** 
      * 改变颜色的入口函数 
      * beginColor/endColor均为形如#FFFFFF的十六进制的字符串,rate为渐变的速度
      * @return colorArray数组 形如#FFFFFF的字符串数组
      * 调用格式 changeColor("#FFFFFF","#000000",100);
      */
    function getColorArray(bColor,eColor,r){
            //过渡中的颜色值,比如#FFFFFF
        var curColor = new Object();
        var beginColor = new Object();
        var endColor = new Object();
        var rate = new Object();
            //得到每个rgb增长的方向。true代表增加,false代表减少
        var isTrue = new Object();
        var colorArray = new Array();
        var i = 0;//数组下标
    
        beginColor = getRGB(bColor);//改变成ogj类型
        endColor = getRGB(eColor);//改变成ogj类型
        curColor = getRGB(bColor);
        rate = getRate(beginColor,endColor,r);
        isTrue = getIsTrue(beginColor,endColor)

    全文地址:Javascript实现颜色渐变效果

  • 相关阅读:
    [转载]ASP.NET中IsPostBack详解
    [转载]论asp.net out、ref、return
    用CSS让字体在一行内显示不换行
    改变时间格式的方法
    JS方法的使用
    [转载] iframe嵌入网页的用法
    iphone6 inline-flex兼容问题
    ActionResult的其它返回值
    为什么java中只允许继承一个类?
    关于asp.net MVC3 ----@Html.Partial,@Html.Action,@Html.RenderPartial,@Html.RenderAction
  • 原文地址:https://www.cnblogs.com/wuniaoheart/p/3110160.html
Copyright © 2011-2022 走看看