js向上滚动消息框代码

傷城~ 2022-04-13 04:14 279阅读 0赞

js向上滚动消息框代码  
js向上滑动展示，实现滚动展示信息，新闻动态或者通知公告。  
如下样式：

引入样式

<link rel="stylesheet" type="text/css" href="scroll.css" />

html

<h3>例1: 3秒一次</h3>
    <ul class="_container" id="demo">
    	<li>我是第一个出现的</li>
    	<li>我是第二个出现的</li>
    	<li>我是第三个出现的</li>
    	<li>我是第四个出现的</li>
    	<li>我要开始循环了(第五个)</li>
    </ul>
    <h3>例2：5秒一次</h3>
    <ul class="_container" id="demo2">
    	<li>例2我是第一个出现的</li>
    	<li>例2我是第二个出现的</li>
    	<li>例2我是第三个出现的</li>
    	<li>例2我是第四个出现的</li>
    	<li>例2我要开始循环了(第五个)</li>
    </ul>

引入js

<script src="scroll.js" type="text/javascript" charset="utf-8"></script>

js

/* * demo 父容器(ul)的id * -36px 子元素li的高度 * 3000 滚动间隔时间 */
    
    myScroll.upScroll("demo", "-36px", 3000);
    myScroll.upScroll("demo2", "-36px", 5000);

scroll.js

function Scroll() { }
    Scroll.prototype.upScroll = function(dom, _h, interval) { 
    	var dom = document.getElementById(dom);
    	var timer = setTimeout(function() { 
    		var _field = dom.firstElementChild;
    		_field.style.marginTop = _h;
    		clearTimeout(timer);
    	}, 1000)
    	setInterval(function() { 
    		var _field = dom.firstElementChild;
    		_field.style.marginTop = "0px";
    		dom.appendChild(_field);
    		var _field = dom.firstElementChild
    		_field.style.marginTop = _h;
    	}, interval)
    }
    var myScroll = new Scroll();

资源下载地址：  
[资源下载地址][Link 1]

--------------------

--------------------

[Link 1]: https://download.csdn.net/download/qq_32442967/10809866

发表评论取消回复

表情：

评论列表（有 0 条评论，279人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 简单的消息提示框

简介：有时候要在页面上显示消息，用alert()，体验不是很友好，每次要手动关闭，这里用js写一个效果： ![888c45db9508413a8696706769a9

迷南。/ 2023年10月13日 21:38/ 0 赞/ 8 阅读

相关 js 优化消息提示框

简介：消息提示框 alert, 每次提示都需要用户点一下，比较麻烦优化改进：自动弹框提示，几秒钟后自动消失效果展示： ![9db49afbd6ae4e0486be

柔光的暖阳◎/ 2023年09月26日 17:43/ 0 赞/ 81 阅读

相关 vue项目新闻消息向上滚动案例

vue项目新闻消息向上滚动案例效果如下图所示： ![在这里插入图片描述][20210401114037365.gif_pic_center] 代码组件如下：

忘是亡心i/ 2022年11月15日 12:22/ 0 赞/ 174 阅读

相关文字滚动JS代码

文字滚动特效，还是比较简单的只要弄明白远离，主要是定时器的使用，今天在慕课上看到一个比较好的，滚动好写只要实现scrollTop++就可以，难点在于怎么样实现无限滚动，要理解两

雨点打透心脏的1/2处/ 2022年08月03日 05:15/ 0 赞/ 159 阅读

相关公告循环向上滚动

html: <div class="scroll-wrap" style="height: 16px; overflow: hidden;">

超、凢脫俗/ 2022年07月28日 11:48/ 0 赞/ 143 阅读

相关纯JS无间隙文字向上滚动代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

旧城等待，/ 2022年06月16日 09:14/ 0 赞/ 132 阅读

相关向上滚动的新闻提示消息

<!doctype html> <html> <head> <meta charset="utf-8"> <title></title>

超、凢脫俗/ 2022年05月29日 08:08/ 0 赞/ 132 阅读

相关 js实现无缝向上滚动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

矫情吗；*/ 2022年05月13日 08:36/ 0 赞/ 213 阅读

相关 js向上滚动消息框代码

js向上滚动消息框代码 js向上滑动展示，实现滚动展示信息，新闻动态或者通知公告。如下样式：引入样式 <link rel="stylesheet" ty

傷城~/ 2022年04月13日 04:14/ 0 赞/ 280 阅读

相关 js怎样判断鼠标向下滚动还是向上滚动

有时候需要用JS监听鼠标是往下还是往上滚动 <!DOCTYPE html> <html lang="en"> <head>

傷城~/ 2022年02月12日 17:37/ 0 赞/ 411 阅读