列表自动滚动
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> #box{width: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={{ width: '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>
);
}
}
