[JS] 改自网络:单行任意数量条公告循环滚动代码
2017-12-02 01:21
666 查看
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>JS新闻公告文字逐条向上翻滚代码</title>
<style
type="text/css">
#rollText {
font:
12px /20px
verdana;
}
</style>
</head>
<body>
<div
id="rollAD"
style="height:20px; position:absolute; width:100%; margin:10px 0 0;overflow:hidden;">
<img
style='width:20px;height:20px;padding:0 20px;'
src="http://pic.qiantucdn.com/10/81/45/27bOOOPICc1.jpg!/fw/300/clip/0x400a0a0/format/webp">
<div
id="rollText"
style="font-size:12px;line-height:20px;color:#666;">
<a>第一条公告广告</a>
<br />
<a>第二条公告广告</a>
<br />
<a>第三条公告广告</a>
<br />
</div>
</div>
<script
type="text/javascript">
// <![CDATA[
var textDiv =
document.getElementById("rollText");
var textList =
textDiv.getElementsByTagName("a");
if (textList.length >
1) {
var
textDat = textDiv.innerHTML;
var
br = textDat.toLowerCase().indexOf("<br",
3);
//var textUp2 = textDat.substr(0,br);
textDiv.innerHTML =
textDat + textDat.substr(0,
br);
textDiv.style.cssText =
"position:absolute;left:50px;right:50px;top:0;text-align:center;";
var
textDatH = textDiv.offsetHeight;
MaxRoll();
}
else {
textDiv.style.cssText =
"position:absolute;left:50px;right:50px;top:0;text-align:center;";
}
var minTime,
maxTime, divTop,
newTop = 0;
function
MinRoll() {
newTop++;
if (newTop <=
divTop + 20) {
textDiv.style.top =
"-" + newTop +
"px";
} else {
clearInterval(minTime);
maxTime =
setTimeout(MaxRoll,
2000);
}
}
function
MaxRoll() {
divTop =
Math.abs(parseInt(textDiv.style.top));
if (divTop >=
0 && divTop <
textDatH - 20) {
minTime =
setInterval(MinRoll,
1);
} else {
textDiv.style.top =
0; divTop =
0; newTop =
0; MaxRoll();
}
}
// ]]>
</script>
</body>
</html>
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>JS新闻公告文字逐条向上翻滚代码</title>
<style
type="text/css">
#rollText {
font:
12px /20px
verdana;
}
</style>
</head>
<body>
<div
id="rollAD"
style="height:20px; position:absolute; width:100%; margin:10px 0 0;overflow:hidden;">
<img
style='width:20px;height:20px;padding:0 20px;'
src="http://pic.qiantucdn.com/10/81/45/27bOOOPICc1.jpg!/fw/300/clip/0x400a0a0/format/webp">
<div
id="rollText"
style="font-size:12px;line-height:20px;color:#666;">
<a>第一条公告广告</a>
<br />
<a>第二条公告广告</a>
<br />
<a>第三条公告广告</a>
<br />
</div>
</div>
<script
type="text/javascript">
// <![CDATA[
var textDiv =
document.getElementById("rollText");
var textList =
textDiv.getElementsByTagName("a");
if (textList.length >
1) {
var
textDat = textDiv.innerHTML;
var
br = textDat.toLowerCase().indexOf("<br",
3);
//var textUp2 = textDat.substr(0,br);
textDiv.innerHTML =
textDat + textDat.substr(0,
br);
textDiv.style.cssText =
"position:absolute;left:50px;right:50px;top:0;text-align:center;";
var
textDatH = textDiv.offsetHeight;
MaxRoll();
}
else {
textDiv.style.cssText =
"position:absolute;left:50px;right:50px;top:0;text-align:center;";
}
var minTime,
maxTime, divTop,
newTop = 0;
function
MinRoll() {
newTop++;
if (newTop <=
divTop + 20) {
textDiv.style.top =
"-" + newTop +
"px";
} else {
clearInterval(minTime);
maxTime =
setTimeout(MaxRoll,
2000);
}
}
function
MaxRoll() {
divTop =
Math.abs(parseInt(textDiv.style.top));
if (divTop >=
0 && divTop <
textDatH - 20) {
minTime =
setInterval(MinRoll,
1);
} else {
textDiv.style.top =
0; divTop =
0; newTop =
0; MaxRoll();
}
}
// ]]>
</script>
</body>
</html>
相关文章推荐
- js单行消息滚动代码,可添加无数个
- 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止。它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用。
- js向上无缝滚动,网站公告效果 具体代码
- js向上无缝滚动,网站公告效果 具体代码
- JS实现div内部的文字或图片自动循环滚动代码
- JS实现div内部的文字或图片自动循环滚动代码
- 【js特效】图片循环滚动代码
- 基于jQuery的公告无限循环滚动实现代码
- js实现单行文本向上滚动效果实例代码
- 兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
- 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
- js实现文字从右滚动到左边代码循环滚动实例
- [原创]分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
- 无缝循环滚动图片的JS代码
- js实现单行文本向上滚动效果实例代码
- 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
- js向上无缝滚动,网站公告效果 具体代码
- 随机调用iframe JS 的广告代码,随页面滚动广告循环播放。。
- 分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
- js单行消息滚动代码,可添加无数个