代码：

<!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. html/css 实现下拉菜单效果
			
    demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
    
			
    2. 
						
  2. C++ KMP文本匹配
			
    代码如下: 环境为VC #include <iostream> #include <algorithm> #include <string> #include &l ...
    
			
    3. 
						
  3. python读文件的4种方式
			
    1.直接打开就读 with open('filepath','r') as f: for line in f: print(line) print('一行数据') 虽然f是一个文件实例,但可以通过以上 ...
    
			
    4. 
						
  4. MySQL执行计划示例
			
    以上示例来自尚硅谷!
    
			
    5. 
						
  5. C#_winform登陆框验证码的实现
			
    验证码技术已愈来愈成熟,从最初的数字.字母.字符.汉字已经到目前的语言,其应用也甚广,之前大多数只有在网站上可以看到,现在在一些客户端软件也经常可见(比如证券相关软件).之前做的一个基于 C# 客户端 ...
    
			
    6. 
						
  6. ArcMap如何撤销配准
			
    ArcMap地理配准时,更新地理配准后,就没法撤销了. 如何解决呢,更新地理配准后,会在源文件夹中自动生成配准文件(文件格式为.over  .jgwx  .xml),可以通过删除这些文件来清除配准.
    
			
    7. 
						
  7. mysql中or和in，in和exists的效率问题
			
     mysql中or和in的效率问题      在网上一直看到的是or和in的效率没啥区别,一直也感觉是这样,前几天刚好在看<mysql数据库开发的36条军规>的文章,里面提到了or和in的 ...
    
			
    8. 
						
  8. LCA 总结
			
    代码: //RMQ求LCA struct node { int v, w; }; class LCA { private: vector<int>dep, pos, olx, dis; v ...
    
			
    9. 
						
  9. spark sql correlated scalar subqueries must be aggregated 错误解决
			
    最近在客户中使用spark sql 做一些表报处理,但是在做数据关联时,老是遇到 “correlated scalar subqueries must be aggregated” 错误 举一个例子, ...
    
			
    10. 
						
  10. 【SpringBoot】 理解Spirng中的IOC原理
			
    前言 前文已经介绍了Spring Bean的生命周期,在这个周期内有一个重要的概念就是: IOC容器 大家也知道IOC是Sping 的重要核心之一,那么如何理解它呢,它又是产生什么作用呢?本文就IOC ...
    
			
    11.