javascript 单行内容连续滚动,允许停留

由于项目需要，研究了一下不用jquery，让内容连续滚动的方法，代码在chrome 下运行，如果希望多行滚动，恐怕自己还得进一步研究。

有兴趣的童鞋，可以把 GetTable 代码改改，换成ul和li模式，有时间自己撸撸代码也是有好处的哦。

这个就是没用到jquery，代码比较简单，复制过去就能直接运行，滚动内容大小其实可以调整的哦。如果需要多行内容滚动，调整两个高度即可，就是那两个20px

写得有不到位的地位，欢迎指正。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>连续滚动</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF">  <input type="button" name="btn1" value="开始滚动" οnclick="StartScrool()"><div id="t2">股市疯了，但疯了意味着机会？</div> <script type="text/javascript">function StartScrool() {var arr = ["1京城突降雷阵雨 天空再现双彩虹", "2七成以上企业“低缴”员工社保", "3待遇享受将受影响", "4美国大选决战将至：民调显示希拉里支持率已过50%", "5美媒:旧金山华人虾村见证华人移民百年沧桑"];SetTableContent("t2", arr,90);};function SetTableContent(id,arr,speed) {var o = document.getElementById(id);var m = GetTable(arr);var htm = '<div style="overflow: hidden; height:20px;"><div>' + m + '</div><div>'+ m +'</div></div>';o.innerHTML = htm;//setInterval(MoveItem, speed, o.getElementsByTagName("div")[0]);MoveItem(o.getElementsByTagName("div")[0], speed,0)};function GetTable(ArrItem) {var t = '<table border="1" align="center" cellpadding="0" cellspacing="0">';for (var i = 0; i < ArrItem.length; i++) {t += '<tr height="20px"><td>' + ArrItem[i] + '</td></tr>';};t += '</table>';return t;};function MoveItem(p,speed,i) {var o1 = p.getElementsByTagName("div")[0];var o2 = p.getElementsByTagName("div")[1]; if (o2.offsetTop - p.scrollTop <= 0) {p.scrollTop -= o1.offsetHeight;} else {p.scrollTop++;};var s = speed;if (i > p.clientHeight -1) {i = 0;s = speed + 1000;};setTimeout(MoveItem, s, p,speed,i+1);};
</script>
</body>
</html>

找到一段更好的模式，代码如下

<!doctype html>
<html lang="zh">
<head>
<meta http-equiv="content-type" content="text/html; charset=gbk" />
<style>/*<![CDATA[*/
.nl {height: 30px;margin: 0;overflow: hidden;padding: 0 0 0 16px;text-overflow: ellipsis;white-space: nowrap;width: 200px;
}
.nl div {font-size: 24px;height:30px;line-height: 30px;
}
/*]]>*/</style>
</head>
<body><div id="n1" class="nl">
<div>是不是不一样的啊</div>
<div>这里的文字发的</div>
<div>very ggod</div>
</div><script type="text/javascript">/*<![CDATA[*/var  vMarq = function (id, tag, heigh, speed, delay) {var me = this;me.EL = document.getElementById(id);me.PA = 0;me.TI = null;me.LH = heigh;me.SP = speed;me.DY = delay;me.exec = function () {if (me.PA) return;me.EL.scrollTop += 2;if (me.EL.scrollTop % me.LH <= 1) {clearInterval(me.TI);me.EL.appendChild(me.EL.getElementsByTagName(tag)[0]);me.EL.scrollTop = 0;setTimeout(me.start, me.DY * 1000);}};me.start = function () {if (me.EL.scrollHeight - me.EL.offsetHeight >= me.LH) me.TI = setInterval(me.exec, me.SP);};me.EL.onmouseover = function () { me.PA = 1 };me.EL.onmouseout = function () { me.PA = 0 };setTimeout(me.start, me.DY * 1000);};new vMarq("n1", "div", 30, 80, 1.5);/*]]>*/</script></body>
</html>

在这里记录一下，这个甚至不算原创了，剽窃一下吧

javascript 单行内容连续滚动,允许停留相关推荐

38 个非常有用的 JavaScript 单行代码汇总
在今天的文章中,我们整理了38个JavaScript 单行代码可以实现的功能技巧,这些技巧都是我平时收集整理下来的,有的一个功能的实现,可能会有两种方法,具体用那种,可以根据自己的情况来选择,其实,技 ...
网页特效--图片连续滚动(上下左右)
图片连续滚动的解决方法先来认识一下几个参数: innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于 ...
13个JavaScript单行式代码
13个JavaScript单行式代码 1.随机获取布尔值(true/false) 此函数将使用Math.random()方法返回布尔值(真或假).Math.random将创建一个介于0和1之间的随机数 ...
java怎么设有滚动的标签,html标签overflow属性和javascript实现div标签滚动
原标题:html标签overflow属性和javascript实现div标签滚动昨天一个朋友说他实现了一个div循环滚动显示的demo,但是弄到jsp中就不滚动了,而且debug测试div的scro ...
dw自动滚动图片_Dreamweaver连续滚动图片的制作
该楼层疑似违规已被系统折叠隐藏此楼查看此楼横向不间断连续滚动图片,将下面代码放到你要显示的位置 //more javascript from http://www.smallrain.net do ...
怎么弄自动滚动的图片 html,HTML网页上连续滚动图片的制作
制作方法:相关文件:在页面 ~相关位置加入代码: 新建scrollimg-pic.htm页面,插入相同大小的图片若干张.为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次.类似于文件.在每一张 ...
html 多张图片自动滚动,JS实现图片的不间断连续滚动的简单实例
js替代marquee实现图片无缝滚动可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. ...
HTML网页设计图片滚动,HTML网页上连续滚动图片的制作
制作方法:相关文件:在页面 ~相关位置加入代码: 新建scrollimg-pic.htm页面,插入相同大小的图片若干张.为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次.类似于文件.在每一张 ...
25个有用的 JavaScript 单行代码
英文 | https://medium.com/@daaaan 翻译整理 | web前端开发(ID:web_qdkf) JavaScript 有很多单行代码的实用例子,它们可以做很多强大的事情,无论你 ...
html的动画效果实现无限轮播,jQuery动画效果实现图片无缝连续滚动
本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下效果图如下: 一.HTML代码 1. id为container的div是最外层的包装,用来控制滚动 ...

javascript 单行内容连续滚动,允许停留

javascript 单行内容连续滚动,允许停留相关推荐

最新文章

热门文章