由於項目需要,研究了一下不用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>
在這裏記錄一下,這個甚至不算原創了,剽竊一下吧