JavaScript实现的鼠标响应颜色渐变效果完整实例-js教程-PHP中文网

首页

web前端

js教程

JavaScript实现的鼠标响应颜色渐变效果完整实例

高洛峰

Feb 20, 2017 pm 04:43 PM

这篇文章主要介绍了JavaScript实现的鼠标响应颜色渐变效果,涉及javascript面向对象及事件监听、响应机制相关操作技巧,需要的朋友可以参考下

本文实例讲述了JavaScript实现的鼠标响应颜色渐变效果。分享给大家供大家参考，具体如下：

运行效果图如下：

JavaScript实现的鼠标响应颜色渐变效果完整实例

完整代码如下：

<!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>颜色渐变实例</title>
<script type="text/javascript">
//--------------------------------------------------------------------
//基础类库:
//1.获取对象：
function $(id){
  return typeof id==&#39;string&#39;?document.getElementById(id):id;
  }
//2.添加事件监听：
function addEventHandler(oTarget,sEventType,fnHandler){
    if(oTarget.addEventListener){
        oTarget.addEventListener(sEventType,fnHandler,false);
      }else if(oTarget.attachEvent){
        oTarget.attachEvent("on"+sEventType,fnHandler);
      }else{
        oTarget["on"+sEventType]=fnHandler;
      }
  }
//3.自定"义产生对象"类：
var Class={
    Create:function(){
        return function(){
            this.initialize.apply(this,arguments);
          }
      }
  }
//4.对象属性合并：
Object.extend=function(destination,source){
    for(var property in source){
      destination[property]=source[property];
    }
    return destination;
  }
//--------------------------------------------------------------------
var colorFade=Class.Create();
colorFade.prototype={
    //1.类的初始化：
    initialize:function(obj,options){
        this._obj=$(obj);//当前要改变颜色的对象。
        this._timer=null;//计时器。
        this.SetOptions(options);//传入的数组参数。
        this.Steps=Math.abs(this.options.Steps);
        this.Speed=Math.abs(this.options.Speed);
        //this._colorArr:用来寄存当前颜色的r.g.b信息。
        this.StartColorArr=this._colorArr=this.getColorArr(this.options.StartColor);
        this.EndColorArr=this.getColorArr(this.options.EndColor);
        this.Background=this.options.Background;
        //从开始到结束，r.g.b三种原色渐变的梯度值（即，每次渐变要增加/减少的值）。
        this._stepAddValueArr=[this.getColorAddValue(this.StartColorArr[0],this.EndColorArr[0]),this.getColorAddValue(this.StartColorArr[1],this.EndColorArr[1]),this.getColorAddValue(this.StartColorArr[2],this.EndColorArr[2])];
        //设置对象颜色：
        this._setObjColor=this.Background?function(sColor){
            this._obj.style.backgroundColor=sColor;
          }:function(sColor){
            this._obj.style.color=sColor;
          };
        this._setObjColor(this.options.StartColor);
        //为对象添加事件：
        var oThis=this;
        addEventHandler(this._obj,"mouseover",
          function(){
              oThis.Fade(oThis.EndColorArr);
            }
        );
        addEventHandler(this._obj,"mouseout",function(){
            oThis.Fade(oThis.StartColorArr);
          });
      },
    /*
      2.对象属性初始化：
    */
    SetOptions:function(options){
        this.options={
          StartColor:  "#000000",
          EndColor:  "#ffffff",
          Steps:    20,//渐变次数
          Speed:    20,//渐变速度，即每隔多少（Speed）毫秒渐变一次。
          Background: true//是否为对象背景渐变。
        }
        //合并属性：
        Object.extend(this.options,options||{});
      },
    /*
      3.得到某个颜色的"r.g.b"信息数组：
      sColor：被计算的颜色值，格式为"#ccc000"。
      返回的一个数组。
    */
    getColorArr:function(sColor){
        var curColor=sColor.replace("#","");
        var r,g,b;
        if(curColor.length>3){//六位值
          r=curColor.substr(0,2);
          g=curColor.substr(2,2);
          b=curColor.substr(4,2);
        }else{
          r=curColor.substr(0,1);
          g=curColor.substr(1,1);
          b=curColor.substr(2,1);
          r+=r;
          g+=g;
          b+=b;
        }
        //返回“十六进制”数据的“十进制”值：
        return [parseInt(r,16),parseInt(g,16),parseInt(b,16)];
      },
    /*
      4.得到当前原色值（r.g.b）渐变的梯度值。
      sRGB：开始颜色值（十进制）
      eRGB：结束的颜色值（十进制）
    */
    getColorAddValue:function(sRGB,eRGB){
      var stepValue=Math.abs((eRGB-sRGB)/this.Steps);
      if(stepValue>0&&stepValue<1){
        stepValue=1;
      }
      return parseInt(stepValue);
    },
    /*
      5.得到当前渐变颜色的"r.g.b"信息数组。
      startColor:开始的颜色，格式为"#ccc000"；
      iStep:当前渐变的级数（即当前渐变的次数）。
      返回颜色值，如 #fff000。
    */
    getStepColor:function(sColor,eColor,addValue){
         if(sColor==eColor){
          return sColor;
        }else if(sColor<eColor){
          return (sColor+addValue)>eColor?eColor:(sColor+addValue);
        }else if(sColor>eColor){
          return (sColor-addValue)<eColor?eColor:(sColor-addValue);
        }
      },
    /*
      6.开始渐变：
      endColorArr:目标颜色，为r.g.b信息数组。
    */
    Fade:function(endColorArr){
         clearTimeout(this._timer);
        var er=endColorArr[0],
        eg=endColorArr[1],
        eb=endColorArr[2],
        r=this.getStepColor(this._colorArr[0],er,this._stepAddValueArr[0]),
        g=this.getStepColor(this._colorArr[1],eg,this._stepAddValueArr[1]),
        b=this.getStepColor(this._colorArr[2],eb,this._stepAddValueArr[2]);
        this._colorArr=[r,g,b];
        this._setObjColor("#"+Hex(r) + Hex(g) + Hex(b));
        if(r!=er||g!=eg||b!=eb){
          var oThis=this;
          oThis._timer=setTimeout(function(){oThis.Fade(endColorArr)},oThis.Speed);
        }
      }
  }
//返回16进制数
function Hex(i) {
  if (i < 0) return "00";
  else if (i > 255) return "ff";
  else {
    //十进制 转成 十六进制：
    var str = "0" + i.toString(16);
    return str.substring(str.length - 2);
  }
}
</script>
</head>
<body>
<p id="test" style="height:40px;width:200px;border:1px solid red;">
  嘻嘻!
</p>
<p id="test1" style="height:40px;width:200px;border:1px solid red;">
  呵呵!
</p>
<p id="test2" style="height:40px;width:200px;border:1px solid red;">
  哈哈!
</p>
</body>
<script type="text/javascript">
var colorFade01=new colorFade("test",{StartColor:&#39;#000000&#39;,EndColor:&#39;#8AD4FF&#39;,Background:true});
var colorFade02=new colorFade("test",{StartColor:&#39;#8AD4FF&#39;,EndColor:&#39;#000000&#39;,Background:false});
var colorFade03=new colorFade("test1",{StartColor:&#39;#000000&#39;,EndColor:&#39;#8AD4FF&#39;,Background:true});
var colorFade04=new colorFade("test1",{StartColor:&#39;#8AD4FF&#39;,EndColor:&#39;#000000&#39;,Background:false});
var colorFade05=new colorFade("test2",{StartColor:&#39;#000000&#39;,EndColor:&#39;#8AD4FF&#39;,Background:true});
var colorFade06=new colorFade("test2",{StartColor:&#39;#8AD4FF&#39;,EndColor:&#39;#000000&#39;,Background:false});
</script>
</html>

登录后复制

更多JavaScript实现的鼠标响应颜色渐变效果完整实例相关文章请关注PHP中文网！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7488

CakePHP 教程

1377

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

如何创建和发布自己的JavaScript库？ Mar 18, 2025 pm 03:12 PM

文章讨论了创建，发布和维护JavaScript库，专注于计划，开发，测试，文档和促销策略。

如何在浏览器中优化JavaScript代码以进行性能？ Mar 18, 2025 pm 03:14 PM

本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

如何使用浏览器开发人员工具有效调试JavaScript代码？ Mar 18, 2025 pm 03:16 PM

本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。

如何有效地使用Java的收藏框架？ Mar 13, 2025 pm 12:28 PM

本文探讨了Java收藏框架的有效使用。它强调根据数据结构，性能需求和线程安全选择适当的收集（列表，设置，地图，队列）。通过高效优化收集用法

如何使用源地图调试缩小JavaScript代码？ Mar 18, 2025 pm 03:17 PM

本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。

开始使用Chart.js：PIE，DONUT和BUBBLE图表 Mar 15, 2025 am 09:19 AM

本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前，我们已学习了 Chart.js 的四种图表类型：折线图和条形图（教程二），以及雷达图和极地区域图（教程三）。创建饼图和环形图饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如，可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比，或不同候选人在选举中获得的投票百分比。饼图仅适用于比较单个参数或数据集。需要注意的是，饼图无法绘制值为零的实体，因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体

谁得到更多的Python或JavaScript？ Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

See all articles

JavaScript实现的鼠标响应颜色渐变效果完整实例

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题