`
fuhao200866
  • 浏览: 78126 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

一个自定义背景色渐变对象,弥补jQuery的animate函数不足

阅读更多
一个自定义对象fadeColor,来看下底层代码:

window.Sys = function (ua){
    var b = {
        ie: /msie/.test(ua) && !/opera/.test(ua),
        opera: /opera/.test(ua),
        safari: /webkit/.test(ua) && !/chrome/.test(ua),
        firefox: /firefox/.test(ua),
        chrome: /chrome/.test(ua)
    },vMark = "";
    for (var i in b) {
        if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
    }
    b.version = vMark && RegExp("(?:" + vMark + ")[\\/: ]([\\d.]+)").test(ua) ? RegExp.$1 : "0";
    b.ie6 = b.ie && parseInt(b.version, 10) == 6;
    b.ie7 = b.ie && parseInt(b.version, 10) == 7;
    b.ie8 = b.ie && parseInt(b.version, 10) == 8;   
    return b;
}(window.navigator.userAgent.toLowerCase());
function toHex(num){
    var str = "0"+num.toString(16);
    return str.substring(str.length-2);
}
function fadeColor(obj){
    this.obj = obj;
    this.bgTimer = null;
    this.foreTimer = null;
    this.FPS = 20;
};
fadeColor.prototype = {
    getSrcColor:function(flag){
        var srcColor,sR,sG,sB;
        if(flag){   //bgColor
            if(window.Sys.ie){
                srcColor = this.obj.currentStyle.backgroundColor
            }
            else{
                var myComputedStyle = document.defaultView.getComputedStyle(this.obj, null);
                srcColor = myComputedStyle.backgroundColor
            }
        }
        else{   //foreColor
            if(window.Sys.ie){
                srcColor = this.obj.currentStyle.color
            }
            else{
                var myComputedStyle = document.defaultView.getComputedStyle(this.obj, null);
                srcColor = myComputedStyle.color
            }
        }
        if(window.Sys.ie){
            sR = parseInt(srcColor.substring(1,3),16);
            sG = parseInt(srcColor.substring(3,5),16);
            sB = parseInt(srcColor.substring(5),16);
        }
        else{
            sR = srcColor.match(/\d+/ig)[0];
            sG = srcColor.match(/\d+/ig)[1];
            sB = srcColor.match(/\d+/ig)[2];
        }
        return (eval("({sR:"+sR+",sG:"+sG+",sB:"+sB+"})"));
    },
    startTimer:function(destColor,duration,flag){
        var sR,sG,sB,dR,dG,dB,offR,offG,offB,stepR,stepG,stepB,srcColor,maxOffset,step;
        var _self = this;
        srcColor = _self.getSrcColor(flag);
        sR = srcColor.sR;
        sG = srcColor.sG;
        sB = srcColor.sB;    
        dR = parseInt(destColor.substring(1,3),16);
        dG = parseInt(destColor.substring(3,5),16);
        dB = parseInt(destColor.substring(5),16);    
        offR = dR - sR;
        offG = dG - sG;
        offB = dB - sB;
        maxOffset = Math.max(Math.abs(offR),Math.abs(offG));
        maxOffset = Math.max(maxOffset,Math.abs(offB));
        step = Math.ceil(maxOffset/Math.round(_self.FPS/1000*duration));
        stepR = (offR == 0 ? 0 : step * (offR / Math.abs(offR)));
        stepG = (offG == 0 ? 0 : step * (offG / Math.abs(offG)));
        stepB = (offB == 0 ? 0 : step * (offB / Math.abs(offB)));
        if(flag){  //bgColor
            _self.bgTimer = setInterval(function(){
                sR += stepR;
                sG += stepG;
                sB += stepB;
                sR = (offR > 0 ? Math.min(sR ,dR) : Math.max(sR,dR));
                sG = (offG > 0 ? Math.min(sG ,dG) : Math.max(sG,dG));
                sB = (offB > 0 ? Math.min(sB ,dB) : Math.max(sB,dB));
                if(sR == dR && sG == dG && sB == dB){
                    clearInterval(_self.bgTimer);
                }
                _self.obj.style.backgroundColor = "#"+toHex(sR)+toHex(sG)+toHex(sB);
            },_self.FPS);
        }
        else{  //foreColor
            _self.foreTimer = setInterval(function(){
                sR += stepR;
                sG += stepG;
                sB += stepB;
                sR = (offR > 0 ? Math.min(sR ,dR) : Math.max(sR,dR));
                sG = (offG > 0 ? Math.min(sG ,dG) : Math.max(sG,dG));
                sB = (offB > 0 ? Math.min(sB ,dB) : Math.max(sB,dB));
                if(sR == dR && sG == dG && sB == dB){
                    clearInterval(_self.foreTimer);
                }
                _self.obj.style.color = "#"+toHex(sR)+toHex(sG)+toHex(sB);
            },_self.FPS);
        }
    },
    fadeBgColor:function(destColor , duration){
        this.stopTimer(1);
        this.startTimer(destColor , duration ,1);
    },
    fadeForeColor:function(destColor , duration){
        this.stopTimer(0);
        this.startTimer(destColor , duration ,0);
    },
    stopTimer:function(flag){
        if(flag){
            clearInterval(this.bgTimer);
            this.bgTimer = null;
        }
        else{
            clearInterval(this.foreTimer);
            this.foreTimer = null;
        }
    },
    setFPS:function(fps){
        this.FPS = fps;
    }
};


调用方法:
window.onload = function(){
    var test = document.getElementById("test");  //test为页面中的一个DOM元素。
    var fadeObj;
    fadeObj = new fadeColor(test);
    test.onmouseover = function(){
       fadeObj.fadeBgColor("#FFFFFF",1000);
       fadeObj.fadeForeColor("#000000",1000);
    };
    test.onmouseout = function(){
       fadeObj.fadeBgColor("#5d5c5c",1000);
       fadeObj.fadeForeColor("#FFFFFF",1000);
    };
}
分享到:
评论

相关推荐

    jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】

    jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 核心代码: $(function(){  $("#cdiv").animate(  { backgroundColor:'#FF0000' },1000  ) }) 完整代码如下: <!DOCTYPE html> <...

    jquery color插件鼠标悬停文字背景彩色渐变动画导航条.rar

    首先,`jquery color插件`是jQuery的一个扩展,它为jQuery对象添加了对颜色操作的支持。这个插件允许开发者方便地进行颜色转换、动画和过渡效果,如颜色淡入淡出、颜色滑动等。在"jquery color animations"中,我们...

    jquery背景颜色悬停渐变.rar

    《jQuery实现背景颜色悬停渐变技术详解》 在网页设计中,动态效果常常能提升用户体验,其中背景颜色的渐变变化就是一种常见的交互手段。本文将深入探讨如何使用jQuery库来实现元素背景颜色在鼠标悬停时的渐变效果,...

    jquery自动缩放渐变全屏背景图片代码下载.zip

    在这个“jquery自动缩放渐变全屏背景图片代码下载.zip”压缩包中,我们关注的是一个利用jQuery实现的特殊效果,即全屏背景图片的自动缩放和渐变效果。这个功能通常用于提升网站的视觉吸引力,尤其是在设计现代、简洁...

    jQuery网页背景渐变色切换特效.zip

    jQuery网页背景渐变色切换特效是一种利用JavaScript库jQuery实现的动态视觉效果,它允许开发者创建出引人注目的网页背景。这种特效的核心在于利用CSS3的渐变特性,结合jQuery的事件处理和动画功能,来实现背景颜色的...

    jquery鼠标滑过菜单颜色渐变显示.rar

    在实际应用中,我们可能需要对菜单项进行更多的定制,例如添加背景色渐变、动态边框等。这可以通过扩展上述CSS和jQuery代码来实现。同时,为确保兼容性,需注意检查用户的浏览器是否支持CSS3的`transition`和`color`...

    jQuery+CSS3可自定义设置数值圆形温度计代码

    【jQuery+CSS3可自定义设置数值圆形温度计代码】是一种使用JavaScript库jQuery和CSS3技术实现的交互式用户界面元素。这个温度计允许开发者根据需求动态设置显示的温度值,为用户提供直观的视觉反馈。在本文中,我们...

    jQuery渐变切换Banner焦点图.zip

    "jQuery渐变切换Banner焦点图.zip"是一个包含jQuery实现的动态图片展示效果,通常用于网站的首页或者产品展示区域,以吸引用户的注意力并提供视觉上的吸引力。 该jQuery插件的核心特性是其渐变切换效果。渐变效果是...

    jQuery网页背景渐变色切换特效特效代码

    【jQuery网页背景渐变色切换特效】是一种利用JavaScript库jQuery实现的动态效果,它使得网页的背景颜色能够平滑地从一种渐变色过渡到另一种,从而为用户带来视觉上的吸引力和互动体验。这种特效在现代网页设计中颇为...

    jquery color颜色变化插件设置背景颜色变化透明图片变色

    jQuery Color插件是jQuery库的一个扩展,用于处理和动画化颜色属性。这个插件使得在JavaScript中实现颜色变换效果变得更加简单。在这个特定的场景中,我们关注的是如何使用jQuery Color来改变元素的背景颜色,同时...

    jquery.color.js

    2. **颜色动画**:提供`animate()`方法,可以实现颜色属性的平滑过渡,例如改变元素的背景色、边框色等。开发者可以设置动画的时长、延迟、完成回调函数等参数,实现个性化的动画效果。 3. **颜色操作**:除了动画...

    jQuery TAB 带动画滚动切换.rar

    在本文中,我们将深入探讨如何使用jQuery实现一个带有动画效果的TAB切换功能,如同"jQuery TAB 带动画滚动切换.rar"所描述的那样。这个功能允许用户在不同的内容区域之间进行平滑的滚动切换,同时伴随着吸引人的视觉...

    Jquery如何使用animation动画效果改变背景色

    这是一个巧妙的方法,避免了引入额外的插件,并利用了jQuery和CSS的特性来实现背景色的动画效果。需要注意的是,如果`removeClass`和`addClass`紧挨着执行,由于它们之间的执行时间间隔太短,可能会导致动画无法正确...

    jQuery彩色进度条动画代码.zip

    /* 默认背景色 */ } .progress { height: 100%; background-image: linear-gradient(to right, #ff0000, #00ff00, #0000ff); /* 彩虹色渐变 */ } ``` 3. **jQuery 动画**: 使用jQuery的`.animate()`方法来...

    jquery 进度条

    3. **CSS样式**:为了视觉上呈现进度条,我们需要为容器和进度元素设置合适的CSS样式,如宽度、背景色、边框等。可以使用渐变背景或者伪元素来实现动画效果。 4. **jQuery操作**:使用jQuery,我们可以监听事件(如...

    jQuery经过图片高亮手风琴代码.zip

    2. 动画效果:jQuery的`.animate()`函数可以用于平滑地改变CSS属性,如渐变颜色,实现更自然的高亮过渡。 三、手风琴效果 1. 手风琴效果是一种常见的UI组件,其特点是一组可折叠的面板,每次只能打开一个。在本...

    26、Jqueryhtml5悬浮圆圈背景动画特效

    4. **可重复性和自适应**:为了使动画更加流畅,我们可以将其封装成一个自定义函数,并在页面不同区域或多个元素上重复使用。同时,确保动画在不同设备和屏幕尺寸下都能良好工作,可能需要使用响应式设计和媒体查询...

    jquery变色动画下拉菜单.rar

    此外,还可以通过调整CSS和jQuery代码来添加更多自定义效果,如渐变色、阴影、过渡动画等,以满足不同的设计需求。 总的来说,“jQuery变色动画下拉菜单”结合了HTML、CSS和JavaScript的精华,为用户提供了直观且...

    jQuery全屏视差滚动效果

    9. **自定义效果**:除了基本的视差滚动外,还可以结合其他jQuery特效,如淡入淡出、渐变色变化等,进一步丰富页面动态表现。 10. **兼容性测试**:由于涉及到CSS3和jQuery,需要测试在主流浏览器(Chrome、Firefox...

Global site tag (gtag.js) - Google Analytics