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=" ...
随机推荐
- Halo（十三）
Spring Boot Actuator 请求跟踪 Spring Boot Actuator 的关键特性是在应用程序里提供众多 Web 接口, 通过它们了解应用程序运行时的内部状况,且能监控和度量 S ...
- Java自定义注解学习
1.定义一个枚举类,后面自定义注解时使用 package cn.tx.annotation.enums; /** * 定义枚举类型 * @author Administrator * */ publi ...
- Python3解leetcode Binary Tree Paths
问题描述: Given a binary tree, return all root-to-leaf paths. Note: A leaf is a node with no children. E ...
- Git 中的一些其他常用命令
1.查看提交的历史版本(git log) 我们可以使用 git log 命令来查看提交的历史版本. 默认不用任何参数的话,git log 会按提交时间列出所有的更新,最近的更新排在最上面.每个版本都有 ...
- 10.16 ln软硬链接的创建等
ln make links between files 无参数 创建硬链接 -s 创建软连接 ln option 源文件 目标文件 #相反的: tar 目标文件 源文件 [root@wen test ...
- [CSP-S模拟测试]:water（BFS）
题目描述 有一块矩形土地被划分成$n\times m$个正方形小块.这些小块高低不平,每一小块都有自己的高度.水流可以由任意一块地流向周围四个方向的四块地中,但是不能直接流入对角相连的小块中.一场大雨 ...
- JPA project Change Event Handler问题解决
eclipse使用的是有经常会出现JPA project Change Event Handler(watering)很卡 网上的解决办法是 [Help > Installation Detai ...
- ARM与单片机到底有啥区别
1.软件方面 这应该是最大的区别了.引入了操作系统.为什么引入操作系统?有什么好处? 1)方便.主要体现在后期的开发,即在操作系统上直接开发应用程序.不像单片机一样一切都要重新写.前期的操 ...
- Xcode 10如何打包ipa包？
参考: https://www.jianshu.com/p/0421b3fd2470 前置条件 首先导入证书和配置文件 具体操作步骤: product>>Archive 如图所示,选择Di ...
- 移动H5优化指南
转载于http://isux.tencent.com/h5-performance.html 移动H5前端性能优化指南 概述 秒完成或使用Loading4. 基于联通3G网络平均338KB/s(2.7 ...