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=" ...
随机推荐
- 商城分类导航实现 （css)
代码实例:demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- SQL执行顺序和coalesce以及case when的用法
1.mysql的执行顺序 from on join where group by having select distinct union //UNION 操作符用于合并两个或多个 SELECT ...
- SpringIntegration---Redis
1.依赖 <dependency> <groupId>org.springframework.integration</groupId> <artifactI ...
- 最强CP！阿里云联手支付宝小程序如何助力双11?
作为首次“全面上云”的双11,阿里云征服了每秒订单峰值54.4万笔的世界新记录.正是在阿里云的保驾护航下,即使访问量是平时的5到6倍,小程序也鲜少出现卡顿或者宕机的现象,“依靠阿里云,我们整个天猫双1 ...
- vue中的文件上传和下载
文件上传 vue中的文件上传主要分为两步:前台获取到文件和提交到后台 获取文件 前台获取文件,主要是采用input框来实现 <el-dialog :title="addName&quo ...
- SQL语句中，除数为0时，相应方法
在sql中做除法处理的时候,可能需要处理除数为零的情况. (1).case语句处理方法是用case when ... else 来处理 (2).nullif函数nullif函数有两个参数,定义如下:N ...
- LOJ 2557 「CTSC2018」组合数问题 （46分）
题目:https://loj.ac/problem/2557 第一个点可以暴搜. 第三个点无依赖关系,k=3,可以 DP .dp[ cr ][ i ][ j ] 表示前 cr 个任务.第一台机器最晚完 ...
- 控制透明度（兼容IE FF）
filter:alpha(opacity=70);opacity:0.7;
- html标签<td><tr><th>全称及缩写说明
<td> 是table data cell 的缩写,单元格 <tr> 是table row 的缩写,表格中的一行 <th> 是table header cell 的 ...
- python的os.path.join()
在python中,os.path.join()是用来拼接目录路径得.同类型得还有join(),os.path.spilt(),spilt()三个函数.1,os.path.join(),将join()里 ...