当前位置:首页 > 网站应用 > 正文内容

js文字定时向上滚动特效代码

cjw1231年前 (2023-11-01)网站应用1590
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字定时向上滚动特效</title>
<style type="text/css">
<!--
body { padding: 30px; font-size: 12px;}
a { color: #000; text-decoration: none; }
a:hover { color: #F60; }
#scrollWrap {
 width:300px;
 height: 18px;
 overflow: hidden;
 background: #E6F6F6;
}
#scrollMsg {
 float: left;
 text-align: left;
  padding:0 10px;
}
#scrollMsg ul {
  margin:0;
  padding:0;
}
#scrollMsg li {
 line-height: 18px;
  list-style:none;
}
-->
</style>
</head>
<body>
<div id="scrollWrap">
	<div id="scrollMsg">
		<ul>
			<li><a href="#">一号滚动文字</a></li>
			<li><a href="#">二号滚动文字</a></li>
			<li><a href="#">三号滚动文字</a></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
<!--
try{
 var isStoped = false;
 var oScroll = document.getElementById("scrollWrap");
 with(oScroll){
 noWrap = true;
 }
 oScroll.onmouseover = new Function('isStoped = true');
 oScroll.onmouseout = new Function('isStoped = false');
 var preTop = 0;
 var curTop = 0;
 var stopTime = 0;
 var oScrollMsg = document.getElementById("scrollMsg");
 oScroll.appendChild(oScrollMsg.cloneNode(true));
 init_srolltext();
}catch(e) {}
function init_srolltext(){
 oScroll.scrollTop = 0;
 setInterval('scrollUp()', 15);
}
function scrollUp(){
 if(isStoped) return;
 curTop += 1;
 if(curTop == 19) {
 stopTime += 1;
 curTop -= 1;
 if(stopTime == 180) {
 curTop = 0;
 stopTime = 0;
 }
 }else{
 preTop = oScroll.scrollTop;
 oScroll.scrollTop += 1;
 if(preTop == oScroll.scrollTop){
 oScroll.scrollTop = 0;
 oScroll.scrollTop += 1;
 }
}
}
//-->
</script>
<p> </p>
<p> </p>
<p> </p>
</body>
</html>


扫描二维码推送至手机访问。

版权声明:本文由追求完美发布,如需转载请注明出处。

本文链接:https://cjw123.com/blog/?id=53

标签: JS
分享给朋友:

相关文章

html meta标签屏蔽搜索引擎的用法

html页面中的 meta 标签可以用来识别搜索引擎的蜘蛛类型,可以规定meta标签所在的html页面是否被蜘蛛抓取,下面是这个meta标签的用法,大家可以借鉴一下。搜索引擎的 meta 标签的解析下面是meta标签对搜索引擎的解析<meta name='robot...

简约漂亮的网页背景渐变特效CSS

渐变色背景的应用在各种网页制作、u设计是非常普遍的,分享的这套渐变背景简约大气,颜色配比很灵活,给人舒适感。<style> body { background-image:radial-gradient(rgba(255,0,0,0.3),rgba(255,0,0,0)&...

表格内信息向上滚动代码,类似航班

<html> <head> <title>滚动信息</title> <meta http-equiv="Content-Type" content="text/html; char...

一个网站网页快照截图的接口

如果您的网站想展示某个网站的快照截图的话使用这个网页快照截图的接口确实比较方便网页快照截图接口使用https://s0.wp.com/mshots/v1/网址?w=宽度&h=高度示例https://s0.wp.com/mshots/v1/www.cjw123.com?w=1900&h...

google谷歌翻译镜像网站

查找外文资料对于外语不好的那必须要借助翻译工具,各家翻译工具各有不同,想要使用google谷歌翻译,奈何无法访问,那么如何在国内使用谷歌翻译?google谷歌翻译镜像网站有哪些?https://translate.yunkuerp.cn/https://translate.renwole.com/h...

神经变形跷板

<html> <head>     <meta charset="utf-8">     <title>神经变形跷板</tit...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。