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=" ...
随机推荐
- 正则表达式中的Quantifiers
?: Match an element zero or one time 例如: colou?r: color 或 colour 但不能是 colo2r *: Match an element zer ...
- JS中关于数组的操作
1.如何创建数组: var arr = []; //效率更高 var arr1 = new Array(); var arr2 = new Array(5); //数组的长度为5,当参数为一个时,将会 ...
- 图与例解读Async/Await
JavaScript ES7的async/await语法让异步promise操作起来更方便.如果你需要从多个数据库或者接口按顺序异步获取数据,你可能最终写出一坨纠缠不清的promise与回调.然而使用 ...
- speike
speike 题目描述 众所周知,Speike 狗是一条特别喜欢追着Tom 打的狗. 现在,Tom 又把Speike 惹生气了,现在Speike 需要跨越千山万水找Tom 报仇. Speike 所在的 ...
- 团队冲刺DAY1
团队冲刺DAY1 今天的内容是对未来6天的突击有一个大致的规划. 我们小组的选题是客户端-服务器安全信息传递系统,通过讨论,我们认为大概有四个难题. 第一个是服务器和客户端,我们打算用第二天来完成. ...
- 用maven搭建多模块项目
首先,前面几次学习已经学会了安装maven,如何创建maven项目等,最近的学习,终于有点进展了,搭建一下企业级多模块项目. 好了,废话不多说,具体如下: 首先新建一个maven项目,pom.xml的 ...
- selenium2-java 浏览器下进行登录
完整代码实现如下: package linear; import org.openqa.selenium.By;import org.openqa.selenium.WebDriver;import ...
- ActiveReports报表数据源：运行时数据源
ActiveReports 支持在设计时和运行时设置报表数据源,本文将重点介绍如何在运行时为区域报表和RDL/页面报表设置报表数据源. ·第一步: 在工程中创建一个名为 SectionReport_D ...
- ZwQueryDirectoryFile用法
1. 当返回值为STATUS_SUCCESS时,返回的字节数保存在IoStatusBlock.Information字段中: 2. 如果FileName字段被指定了,那么对于同时指定的FileHand ...
- USACO 5.5 章节
Picture 题目大意 IOI 1998 求n (<=5000)个矩形 覆盖的图形 的周长(包括洞), 坐标范围[-10000,10000] 题解 一眼离散化+2维线段树,但仔细一想 空间不太 ...