React 滚动事件
代码：
<!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 滚动事件的更多相关文章
- js鼠标滑轮滚动事件绑定（兼容主流浏览器）
/** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if ...
- react.js 从零开始（五）React 中事件的用法
事件系统 虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 prevent ...
- 一次react滚动列表的实践---兼容ios安卓
一.背景 近期项目改版,对原有的h5页面进行了重新设计,数据呈现变成了瀑布流.希望新版兼容ios和安卓两端的情况下,无限制的刷新加载数据.大致效果如下: 整个页面分4部分: 顶部导航 步数状态卡片 用 ...
- 鼠标滚动事件兼容性 wheel、onwheel
wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // ...
- JavaScript----分层导航 滚动事件
分层导航 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- JS鼠标滚动事件
-----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...
- Jquery-Mobile滚动事件
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...
- javascript滚动栏响应鼠标滑轮的实现上下滚动事件
实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class=" ...
随机推荐
- BZOJ4269 再见xor
考前挣扎 线性基裸题 mx直接求 次大直接从低到高枚举第一个非0位 然后次大就是异或上就行了[显然贪心呐qwq 不到800b可还行 //Love and Freedom. #include<cs ...
- springBoot相关（一）
2.0新特性: 编程语言: Java8+.Kotlin 底层框架:Spring Framwork 5.0.x 全新特性: web Flux web Flux: 函数编程:java 8 Lambda 响 ...
- Python的list中的选取范围
a = [1,2,3,4,5,6,7,8,9,10] a[0:1] = [1] a[0:2] = [1,2] 包含开头,不包含结尾. a [:-1]: 从头一直到最后一个元素a[-1],但不包含最后一 ...
- NET Core+win10+Jenkins+Github持续集成
本篇和上一篇NET Core+win10+Jenkins+Gogs+open ssh持续集成没什么区别,只不过源码库换成github. 这里有两点不一样的是: 获取的代码的凭证不用用户名和密码用sec ...
- leetcode-15双周赛-1288-删除被覆盖区间
题目描述: 方法一:排序O(Nlogn) class Solution: def removeCoveredIntervals(self, intervals: List[List[int]]) -& ...
- 【JVM】吞吐量与延迟关系
堆内存增大,gc一次能处理的数量变大,吞吐量大:但是gc一次的时间会变长,导致后面排队的线程等待时间变长: 向反,如果堆内存小,gc一次时间短,排队等待的线程等待时间变短,延迟减少,但一次请求的数量变 ...
- JS中的一些遍历方法
1.遍历数组 以下遍历方法中for循环性能最好,而且优化版for循环性能最高.只有forEach不能跳出循环. 在循环数组时,如果在循环过程中对数组进行了增删改,那么在后面的每次循环中,进行操作的都是 ...
- nIce 不看会后悔的o!
今天小编来跟大家探讨关于“控件”.控件非常好玩,可以构建出不同的场景和不同风格的Windows画面.相信大家绝对狠感兴趣是吧~~~ 好了,下面小编就为大家来展示风采喽 下面先为大家展示一些比较基础 ...
- Visual Studio 2008 附加进程调试
关于附加进程调试的问题: 在项目当中经常使用“附加到进程”来调试项目,感觉挺方便的.我们做的项目通常都会发布到IIS(特别是B/S),一可以直接通过地址栏输入地址就可以运行项目,不必去使用开发工具来打 ...
- window安装activemq
原文: https://www.cnblogs.com/donsenChen/p/8656563.html ActiveMQ5.14.5下载地址 http://activemq.apache.org/ ...