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> ); } }