React 滚动事件

最新推荐文章于 2024-05-31 10:08:12 发布

weixin_30432007

最新推荐文章于 2024-05-31 10:08:12 发布

阅读量530

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guangzhou11/p/7608075.html

本文介绍了一个使用React实现的简单示例，当页面发生滚动时背景颜色会根据滚动方向进行变化。通过处理wheel事件并利用16进制颜色转换技巧，实现了平滑的色彩过渡效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码：

<!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>

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

　　效果：

转载于:https://www.cnblogs.com/guangzhou11/p/7608075.html