• 列表自动滚动


    HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            #box{260px;height:100px;margin:0 auto;border:2px solid red;overflow: hidden}
            ul{padding:0;margin:0;list-style: none;overflow: hidden}
            ul li{height:24px;line-height: 24px;padding-left:10px;}
            a{text-decoration: none;color:#000;}
            a:hover{color:#f00}
        </style>
    </head>
    <body>
    <div id="box">
        <ul id="con1" onMouseOut="Up()" onMouseOver="Stop()">
            <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1,课程html</a> </li>
            <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >2,课程css</a> </li>
            <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >3,课程js</a> </li>
            <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >4,课程jquery</a> </li>
            <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >6,课程css3</a> </li>
    
        </ul>
        <ul id="con2"></ul>
    </div>
    </body>
    <script type="text/javascript">
        var box=document.getElementById("box");
        var con1=document.getElementById("con1");
        var con2=document.getElementById("con2");
        var s=document.getElementsByTagName("a");
        var speed=50;
        con2.innerHTML=con1.innerHTML;
        function ScrollUp(){
            if( box.scrollTop>=con1.scrollHeight){
                box.scrollTop=0;
            }else
                box.scrollTop++;
        }
        var i=setInterval("ScrollUp()",speed);
        function Stop(){
            clearInterval(i);
        }
        function Up(){
            i=setInterval("ScrollUp()",speed);
        }
    </script>
    </html>

    React

    import React, { Component } from 'react';
    import styles from '../../screen/index.modules.scss';
    
    export default class Ornament_rb extends Component {
        constructor(props) {
            super(props);
            this.state = {
                screen: 1,
            };
        }
        componentDidMount() {
            setTimeout(() => {
                if (this.props.list) {
                    let con1 = document.getElementById('con1');
                    let con2 = document.getElementById('con2');
                    con2.innerHTML = con1.innerHTML;
                }
            }, 1000);
    
            this.interval = setInterval(() => {
                this.ScrollUp();
            }, 30);
        }
    
        componentWillUnmount() {
            this.interval && clearInterval(this.interval);
        }
    
        ScrollUp = () => {
            let box = document.getElementById('box');
            let con1 = document.getElementById('con1');
    
            if (box.scrollTop >= con1.scrollHeight) {
                box.scrollTop = 0;
            } else box.scrollTop++;
        };
    
        render() {
            return (
                <div className={styles.rb}>
                    <p>
                        <span>岗位名称</span>
                        <span>招聘人数</span>
                        <span style={{  '31%' }}>公司名称</span>
                    </p>
                    <div className={styles.rbBody} id={'box'}>
                        <ul className={styles.animate} id={'con1'}>
                            {this.props.list &&
                                this.props.list.map((item, index) => {
                                    return (
                                        <li
                                            key={index}
                                            className={`${
                                                styles.opacityAnimation
                                            } ${
                                                index % 2 ===
                                                (this.state.screen ? 1 : 0)
                                                    ? styles.active
                                                    : ''
                                            }`}
                                        >
                                            <span>{item.gw}</span>
                                            <span>{item.rs}</span>
                                            <span className={styles.ellipsis}>
                                                {item.gs}
                                            </span>
                                        </li>
                                    );
                                })}
                        </ul>
                        <ul id={'con2'} />
                    </div>
                </div>
            );
        }
    }
  • 相关阅读:
    VIS识别系统
    浅谈web标准、可用性、可访问性
    CSS中IE6、7和火狐对margin、padding的兼容性解析【转】
    css 之 clearfix ——清除浮动
    总结写DIV+CSS时常见的小问题
    优化JavaScript脚本的性能总结
    QUEUE C语言实现
    mtlab设置plot画图函数y轴的显示范围
    matlab中基本操作(对已知数组16进制转化为10进制)
    queue 的C语言实现
  • 原文地址:https://www.cnblogs.com/it-Ren/p/13412644.html
Copyright © 2020-2023  润新知