消息无缝滚动

最新推荐文章于 2022-11-26 17:13:50 发布

十一/shell

最新推荐文章于 2022-11-26 17:13:50 发布

阅读量245

点赞数

分类专栏：前端开发文章标签：消息无缝滚动消息滚动 js消息提示

本文链接：https://blog.csdn.net/weixin_40126227/article/details/95175187

版权

前端开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>JS+CSS打造一款新闻列表无限滚动代码</title>

*{padding:0; margin:0;}

.roller {

height: 300px;

width: 300px;

position: relative;

margin: 20px auto;

border: 1px solid lightblue;

}

.line {

width: 1px;

height: 100%;

position: absolute;

top: 0;

left: 10.7%;

z-index: 0;

background: #c0c0ca;

}

.dom-container {

height: 100%;

width: 100%;

overflow: hidden;

scrollbar-width: none;

-ms-overflow-style: none;

z-index: 999;

}

.dom-container::-webkit-scrollbar {

width: 0px;

}

section {

width: 85%;

display: inline-block;

line-height: 20px;

font-size: 16px;

}

section .status {

cursor: pointer;

font-size: 14px;

color: #000;

width: 90%;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

display: -moz-box;

-moz-line-clamp: 2;

display: -o-box;

-o-line-clamp: 2;

-ms-box-orient: vertical !important;

-webkit-box-orient: vertical !important;

-moz-box-orient: vertical !important;

-o-box-orient: vertical !important;

}

ul {

margin: 0;

padding: 0;

list-style: none;

width: 100%;

}

.canRoll{

padding-left: 9.70%;

}

.normal{

padding-left: 5%;

}

li {

font-size: 16px;

min-height: 40px;

margin-bottom: 20px;

width: 100%;

}

.circle {

position: relative;

display: inline-block;

cursor: pointer;

width: 8px;

height: 8px;

background: #d9d9d9;

border-radius: 50%;

vertical-align: top;

margin-right: 10px;

z-index: 99;

margin-top: 5px;

}

.date {

font-size: 12px;

color: rgba(0, 0, 0, 0.4);

}

</style>

</head>

<body>

<ul>

</ul>

</div>

<br>

</div>

</body>

var MyInterval = null;

var canRoll = true;

// var i = 0;

var list = [];

for(var j = 0; j < 20; j++ ){

list.push({name: '我十点十分在地铁口看到了'+j+'只鸽子'})

}

var listItem = '' ;

for(var i=0;i<list.length;i++){

var oli = `<li class="canRoll">

<span

class="status"

style="-webkit-box-orient:vertical;-o-box-orient:vertical;-moz-box-orient:vertical;-ms-box-orient:vertical;"

${list[i].name}

</span>

</section>

</li>`;

listItem = listItem + oli ;

}

var oScroll = document.getElementById('scroll');

var oul = oScroll.getElementsByTagName('ul')[0];

oul.innerHTML = listItem;

marquee();

function marquee() {

if(canRoll){

setTimeout(function() {

if(MyInterval){

clearInterval(MyInterval);

}

var container = document.getElementById("dom-container");

var dom = document.getElementById( "scroll");

var dom2 = document.getElementById("scroll2");

dom2.innerHTML = dom.innerHTML;

function autoScroll() {

if (dom2.offsetHeight - container.scrollTop < 0) {

container.scrollTop = container.scrollTop - dom2.offsetHeight;

} else {

container.scrollTop++;

}

MyInterval = setInterval(autoScroll, 30); //设置定时器

//鼠标移上时清除定时器达到滚动停止的目的

container.onmouseover = function(e) {

clearInterval(MyInterval);

container.style.overflowY = "auto";

};

container.onmouseout = function() {

container.style.overflowY = "hidden";

MyInterval = setInterval(autoScroll, 30);

};

}, 200);

}else{

var container = document.getElementById( "dom-container");

container.style.overflowY = "auto";

}

</script>

</html>

十一/shell

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
消息无缝滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>JS+CS...
复制链接

扫一扫