js单行消息滚动代码，可添加无数个

2024-04-26 07:08:34

滚动最新消息代码

td {font-size: 12px;}

最新消息：

var marqueeContent=new Array(); //滚动主题

marqueeContent[0]='学习编程，欢迎访问源码爱好者！';
marqueeContent[1]='精品源代码下载。';
marqueeContent[2]='专注于提供编程源码及素材下载及实例教程。';
marqueeContent[3]='旅行是需要一种心情，更重要的是，需要一种冲动。';
marqueeContent[4]='随时用零碎的时间(如等人、排队等)做零碎的事情。';
var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
var marqueeId=0;
var marqueeDelay=4000;
var marqueeHeight=15;
function initMarquee() {
var str=marqueeContent[0];
document.write('

'+str+'

');
marqueeId++;
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
function startMarquee() {
var str=marqueeContent[marqueeId];
marqueeId++;
if(marqueeId>=marqueeContent.length) marqueeId=0;
if(marqueeBox.childNodes.length==1) {
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
marqueeBox.appendChild(nextLine);
}
else {
marqueeBox.childNodes[0].innerHTML=str;
marqueeBox.appendChild(marqueeBox.childNodes[0]);
marqueeBox.scrollTop=0;
}
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",10);
}
function scrollMarquee() {
marqueeBox.scrollTop++;
if(marqueeBox.scrollTop%marqueeHeight==marqueeHeight){
clearInterval(marqueeInterval[1]);
}
}
initMarquee();

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

js实现消息滚动效果

今天教大家做个消息滚动的小功能.实现的很简单.自己都有点意想不到呢~ 哈哈 1.实现的中心思想,如图所示: 2.图片移动,用的是appendTo()这个方法.这个方法是先将标签从父标签中删除,然后拼接到某个标签后面,所以也就是替我们实现了,remove()这个方法.所以用这个方法是极好的~ 3.然后就会用到定时器了.用定时器每次调用移动方法,让<ul>每次执行一个动画,改变它的margin-top值,执行完动画后,再将它的margin-top变为初始值: 4.触摸<ul>标签清除
js单行消息滚动代码，可添加无数个

滚动最新消息代码 td {font-size: 12px;} 最新消息: var marqueeContent=new Array(); //滚动主题 marqueeContent[0]='学习编程,欢迎访问源码爱好者!'; marqueeContent[1]='精品源代码下载.'; marqueeContent[2]='专注于提供编程源码及素材下载及实例教程.'; marqueeContent[3]='旅行是需要一种心情,更重要的是,需要一种冲动.'; marqueeContent[4]='随
Javascript 仿歌词智能滚动代码

保证浏览者能看清楚文字,然后继续上下滚动. 文本滚动 #infozone{font-size:12px;color:#aa6;overflow:hidden;width:98px;height:20px;} #infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;} var tc; window.onload=function(){ var o=document.getElementById('i
纯js实现无缝滚动功能代码实例

这篇文章主要介绍了纯js实现无缝滚动功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 HTML代码  <div id="imgsList" style="height:150px;width:980px;overflow: hidden;">  <div id="marqu
JS动态的把左边列表添加到右边的实现代码(可上下移动)

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!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> <tit
JS实现的N多简单无缝滚动代码(包含图文效果)

本文实例讲述了JS实现的N多简单无缝滚动代码.分享给大家供大家参考,具体如下: 实现原理很简单,注册事件之后,立即将元素的innerHTML累加一次. 接着滚动开始,当滚动条到达元素的中间位置时: 不要在子元素上设置margin和padding,因为CSS对margin或padding的叠加机制,会导致滚动出现"跳跃".稳妥的办法是套一个内联元素,然后再在里面设置margin或者padding! 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2
js跟随滚动条滚动浮动代码

复制代码代码如下: var str="客服"; var objFT=new FloatT("FloatMenu1",str,942,137,125,200,80,10); objFT.FloatRun(); //js跟随滚动条滚动浮动 //pObjName:html 元素ID //pText:html 元素内容 //其它自己看 function FloatT(pObjName,pText,pstmnLEFT,pstmnGAP1,pstmnGAP2,pstmnBA
js焦点文字滚动效果代码分享

本文实例讲述了js焦点文字滚动效果.分享给大家供大家参考.具体如下: 效果描述: 今天推荐的这个又是一个原生的js焦点图效果默认自动切换,也可以手动切换 javascript代码采用函数式对象编程,也就是javascript编程中的Module模式基本用法很简单,主要特点有三: 1.模块化,可重用 2.封装了变量和function,和全局的命名空间不接触,不污染全局变量 3.只暴露可用public方法,其他私有方法全部隐藏,确保js相互之间不会冲突运行效果图:---------------
基于JS实现无缝滚动思路及代码分享

原理: 1.给ul一个绝对定位使其脱离文档流,left设置为0,把图片塞进ul里,编写一个"移动"函数,函数功能能够使ul的left以一个正速度向右跑动, 2.设置一个定时器,让"移动"函数每30(参数可变)毫秒执行一次 3.因为ul的长度会"跑"完,此时可以使ul的content也就是img增加一倍, oUl.innerHTML +=oUl.innerHTML; 4.此时因为ul的content增加,其width也会随着增大,根据实际项目展示图
Js+CSS实现的间断和不间断文本滚动代码

Js+CSS间断和不间断文本滚动代码 .box{width:150px;height:25px;line-height:25px;border:#bbb 1px solid;overflow:hidden;} .box ul{margin:0;padding:0} .box li{height:25px;line-height:25px;font-size:12px;text-align:center;list-style-type:none;} 第一行第二行第三行第一行第二行第三行

js单行消息滚动代码，可添加无数个

相关推荐

随机推荐