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进制


　　效果：


 


 




 







            

            
posted @ 
2017-09-28 19:02 
1点 
阅读(3457) 
评论(0) 
编辑 
收藏 
举报