代码：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>React中的事件</title>

</head>

<body>

    <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>

    <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>

    <script type="text/jsx">

        var HelloWorld = React.createClass({

            getInitialState: function () {

                return {

                    backgroundColor: '#FFFFFF'

                }

            },

            handleWheel: function (event) {

                var newColor = (parseInt(this.state.backgroundColor.substr(1), 16) + event.deltaY * 997).toString(16);

                newColor = '#' + newColor.substr(newColor.length - 6).toUpperCase();

                this.setState({

                    backgroundColor: newColor

                })

            },

            render: function () {

                console.log(this.state)

                return <div onWheel={this.handleWheel} style={this.state}>

                <p>Hello, World</p>

                </div>;

            },

        });

        React.render(<HelloWorld></HelloWorld>, document.body);

    </script>

</body>

</html>

　　1.

(parseInt(this.state.backgroundColor.substr(1), 16)    去掉#，将16 进制的颜色转化为10进制
2.
event.deltaY * 997
颜色进行变化
3.
 (parseInt(this.state.backgroundColor.substr(1), 16) + event.deltaY * 997).toString(16);
将10进制的颜色转化为16进制


　　效果：


												


											
React 滚动事件的更多相关文章
	

    
								
  1. js鼠标滑轮滚动事件绑定（兼容主流浏览器）
		
    /** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if  ...
    
		
    2. 
						
  2. react.js 从零开始（五）React 中事件的用法
		
    事件系统   虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 prevent ...
    
		
    3. 
						
  3. 一次react滚动列表的实践---兼容ios安卓
		
    一.背景 近期项目改版,对原有的h5页面进行了重新设计,数据呈现变成了瀑布流.希望新版兼容ios和安卓两端的情况下,无限制的刷新加载数据.大致效果如下: 整个页面分4部分: 顶部导航 步数状态卡片 用 ...
    
		
    4. 
						
  4. 鼠标滚动事件兼容性 wheel、onwheel
		
    wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // ...
    
		
    5. 
						
  5. JavaScript----分层导航  滚动事件
		
    分层导航 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
    
		
    6. 
						
  6. js网页滚动条滚动事件实例分析
		
    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
    
		
    7. 
						
  7. JS鼠标滚动事件
		
    -----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...
    
		
    8. 
						
  8. Jquery-Mobile滚动事件
		
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...
    
		
    9. 
						
  9. javascript滚动栏响应鼠标滑轮的实现上下滚动事件
		
    实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class=" ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MyCat（1.2）Mycat的安装
			
    [0]基本环境 OS:CentOS7.5 Software envireonment:JDK1.7.0 Master Software:Mycat1.6.5 Linux Client:CRT 8.0  ...
    
			
    2. 
						
  2. LOJ149 0/1分数规划
			
    竟然没有写过分数规划的题解 考前挣扎一发板子( 二分答案k 然后0/1分数规划的方法就是 分母乘过去然后贪心解决 注意实数二分的精度 一般估计一个次数比较好不然容易出现精度比较误差[惨痛教训 就做完了 ...
    
			
    3. 
						
  3. spring Boot 简单的登录功能，利用了jdbcTemplate.class完成sql语句的执行，无需service层、dao层和.xml文件
			
    1.搭建SpringBoot项目首先我们先在IDEA上创建一个SpringBoot的Web项目(1)file ——> new ——> project——> Spring Initia ...
    
			
    4. 
						
  4. Vue.js----更换头像不实时更新问题
			
    原因 导致问题的原因是缓存造成的,因为你图片变了但是读取头像的地址还会没有变化的 解决思路 所以解决的思路就是上传之后让图片地址改变,那么我们就可以在上传的时候给地址加上一个时间戳那么久可一达到目的了 ...
    
			
    5. 
						
  5. MaxCompute studio FAQ
			
    1. 官方文档地址 https://help.aliyun.com/document_detail/50889.html 2. Show Table Detail 中文乱码 原因是Intellij A ...
    
			
    6. 
						
  6. DOS基础使用专题（强烈推荐）
			
    DOS基础使用专题(强烈推荐) 美丽的DOS时代 DOS是世界上使用人数最多的操作系统,包括上面的Win3.x/9x等GUI操作平台的用户.尽管许多人由于种种原因而使用了其它非DOS的操作系统或操作环 ...
    
			
    7. 
						
  7. LDD3 第13章 USB驱动程序
			
    通用串行总线(USB)是主机和外围设备之间的一种连接.最新USB规范修订增加了理论上高达480Mbps的高速连接. 从拓扑上看,USB子系统并不是以总线的方式来布置的,它是一颗由几个点对点的连接构建而 ...
    
			
    8. 
						
  8. Security基础(四)：OpenSSL及证书服务常用系统监控命令、搭建nagios监控服务器、配置文件及插件使用、监控远程主机的公有数据、监控远程主机的私有数据
			
    一.OpenSSL及证书服务常用系统监控命令 目标: 本案例要求练习常用的系统监控命令完成以下任务: 使用vmstat命令监控内存及磁盘I/O信息 使用iostat命令监控CPU处理器及磁盘的I/O信 ...
    
			
    9. 
						
  9. Fraction Comparision
			
    题目链接 题意:输入x,a,y,b求x/a和y/b的大小,范围long long int 思路:因为不想用精度,嫌麻烦,所以用了个巧方法.先求x/a和y/b整形的大小,如果相等,再求(x%a)*b和( ...
    
			
    10. 
						
  10. SQL案例
			
    1.字符串去掉空格 原因:(1)空格 (2)制表符 )); ); ); INSERT INTO #temp SELECT '明天我就结婚了 '; DROP TABLE #temp; --1.2 采用A ...
    
			
    11.