循环播报条 demo 及未知情况下onmouseover/ onmouseout不生效的解决办法
想在系统界面里加一个循环滚动播报条，搜了一下网上的代码，调好样式和功能后加到系统中不生效，折腾了一天多，终于弄好了。
原生 JS demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
html,body{
margin:0;
padding:0;
}
#reviewbox {
position: absolute;
right: 10px;
top: 10px;
margin: 0 !important;
padding: 0;
100px;
height: 20px; /* 必须 */
overflow: hidden;/* 必须 */
margin: 50px auto;
border: 2px solid rgb(11, 126, 235);
border-radius:6px;
text-align: center;
background-color: cornflowerblue;
/* pointer-events:none */
}
.comment {
margin: 0;
padding: 0;
list-style: none;
}
.commentlist {
font-weight: 550;
margin: 0;
padding: 0;
color: whitesmoke;
text-decoration: none;
}
.commentlist:hover {
color: #ff0000;
}
</style>
<body>
<div id="reviewbox">
<ul class="comment" id="comment1">
<li class="commentlist">罗家峪无异常</li>
<li class="commentlist">三眼峪无异常</li>
<li class="commentlist">舟林沟无异常</li>
<li class="commentlist">河南村无异常</li>
<li class="commentlist">锁儿头无异常</li>
<li class="commentlist">白龙江无异常</li>
</ul>
<ul class="comment" id="comment2"></ul>
</div>
<script>
window.onload = roll(50);
function roll(t) {
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("reviewbox");
ul2.innerHTML = ul1.innerHTML;
ulbox.scrollTop = 0; // 开始无滚动时设为0
var timer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
// 鼠标移入div时暂停滚动
ulbox.onmouseover = function () {
clearInterval(timer);
}
// 鼠标移出div后继续滚动
ulbox.onmouseout = function () {
timer = setInterval(rollStart, t);
}
}
// 开始滚动函数
function rollStart() {
// 上面声明的DOM对象为局部对象需要再次声明
var ul1 = document.getElementById("comment1");
var ul2 = document.getElementById("comment2");
var ulbox = document.getElementById("reviewbox");
// 正常滚动不断给scrollTop的值+1,当滚动高度大于列表内容高度时恢复为0
if (ulbox.scrollTop >= ul1.scrollHeight) {
ulbox.scrollTop = 0;
} else {
ulbox.scrollTop++;
}
}
</script>
</body>
</html>
效果
集成时做的修改
//右上方播报条滚动
var ulbox = document.getElementById("reviewbox");
function roll(t) {
ulbox.scrollTop = 0; // 开始无滚动时设为0
var qtimer = setInterval(rollStart, t); // 设置定时器，参数t用在这为间隔时间（单位毫秒），参数t越小，滚动速度越快
// 鼠标移入div时暂停滚动
ulbox.onmouseenter = function () {
clearInterval(qtimer);
}
// 鼠标移出div后继续滚动
ulbox.onmouseleave = function () {
qtimer = setInterval(rollStart, t);
}
}
// 开始滚动函数
function rollStart() {
$("#reviewbox").find("ul").animate({
marginTop: "-20px"
}, 500, function() {
$(this).css({
marginTop: "0px"
}).find("li:first").appendTo(this);
})
}
解决问题关键点
onmouseenter和onmouseleave原生 JS 和 JQ 配合。
原因及区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
300px;
height: 300px;
background: pink;
}
.inner{
100px;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
<script type="text/javascript">
var box = document.querySelector('.box');
// //该对移入移除事件，如果移入到子元素，会事件委派到子元素
// box.onmouseover = function () {
// console.log('移入')
// }
// box.onmouseout = function () {
// console.log('移出')
// }
//该对移入移除事件父元素不会发生事件委派
box.onmouseenter = function () {
console.log('移入')
}
box.onmouseleave = function () {
console.log('移出')
}
</script>
</body>
</html>