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('infozone');hscroll(o);
window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},8000);
}
function scrollup(o,d,c){
if(d==c){
var t=o.firstChild.cloneNode(true);
o.removeChild(o.firstChild);o.appendChild(t);
t.style.marginTop=o.firstChild.style.marginTop='0px';
hscroll(o);
}
else{
ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
o.firstChild.style.marginTop=-c+l+'px';
window.setTimeout(function(){scrollup(o,d,c-l)},50);
}
}

function hscroll(o){
var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
if(w10?-c:c);o.firstChild.style.marginLeft=t+'px';
if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
}

青花瓷（周杰伦）

一生有你（水木年华）

神话（孙楠、韩红）

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

您可能感兴趣的文章:

  • 一个兼容FF的智能超长文章分页JS
  • 页面版文本框智能提示JS代码
  • asp.net 页面版文本框智能提示JSCode (升级版)
  • Js智能判断浏览器是关闭还是刷新的代码
  • jQuery在vs2008及js文件中的无智能提示的解决方法
  • 仿百度输入框智能提示的js代码
  • JS实现仿google、百度搜索框输入信息智能提示的实现方法
  • js实现搜索框关键字智能匹配代码

Tags：歌词 智能滚动

相关文章

  • 2009-10-10javascript 网页上跳动的文字
  • 2009-10-10JS CSS制作饱含热情的镶边文字闪烁特效
  • 2010-06-06javascript 实用的文字链提示框效果
  • 2010-06-06javascript上下左右定时滚动插件
  • 2011-01-01javascript 打字效果的文字特效
  • 2011-01-01javascript实现的网页标题变换效果(网页游戏广告常用)
  • 2009-10-10Js文字背景行如流水特效
  • 2010-11-11js单行消息滚动代码，可添加无数个
  • 2009-11-11JS旋转的彩色文字轮转特效
  • 2009-10-10JS、CSS文字切换，定时交替，代码精简

最新评论

赞 (0)

相关推荐

  • 一个兼容FF的智能超长文章分页JS

    这个是从网上找的,FF下不显示. 思路:根据p,div,table把文章分段存入数组,然后循环判断显示内容的长度是否超过定义的每页显示字符数,不超过加上下一个数组的内容,直到不符合条件为止. New Document * { font-size:10.2pt; font-family:tahoma; line-height:150%; } .divContent { border:1px solid red; background-color:#FFD2D3; width:500px; word

  • jQuery在vs2008及js文件中的无智能提示的解决方法

    jQuery在vs2008中的智能提示 1  安装VS2008SP1补丁 要确保您的vs2008已经打了sp1补丁,在vs2008的帮助里的关于,要是安装了sp1,会出现"版本 3.5 sp1",没安装当然就只有"版本 3.5". 如果没有安装可以在这下载sp1. 2  安装VS 2008 Patch KB958502以支持"-vsdoc.js"Intellisense文件.该补丁会导致Visual Studio在一个JavaScript库被引用

  • 仿百度输入框智能提示的js代码

    最近客户需求老是变更,不过有些是因为客户催得急,我没有那么快能完成,所以先做了一个雏形给他们,后来再慢慢改.比如雏形那里我做了一个下拉列表给他们,事实上他们的数据有200多条,用个下拉列表的话很不现实,你能找那么多?而且那个下拉列表该有多长啊?所以很自然的,我想到了百度那个智能提示的功能. 参考了一下之前忘记是哪位大侠写的东西,他的是使用百度api的,为了简单起见,我把数据都定在了js那里,这样看官们容易理解一些. 还是整个代码考上来吧,代码不长.考了一下之前忘记是哪位大侠写的东西,他的是使用百

  • asp.net 页面版文本框智能提示JSCode (升级版)

    原本准备在上一篇中直接修改的,无奈编辑功能太差,打开一堆html代码,空格"&nbsp"都看的人眼花缭乱,只好另开一篇. 升级说明:添加了针对一个界面多个职能提示位置的设定,只需修改文本框onfocus="fnStartInterval(this,'DropDownList2')", 设置好相应的参数即可,同时修复了在IE6下div无法遮盖下拉列表的问题,(IE6下无论如何设置select的z-index或div的z-index属性均无济于事),关于这个就是

  • Js智能判断浏览器是关闭还是刷新的代码

    Js智能判断浏览器是关闭还是刷新 关闭或刷新浏览器试试! window.onbeforeunload=function(){ var n=window.event.screenX-window.screenLeft; var b=n>document.documentElement.scrollWidth-20; if(b&&window.event.clientY [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • JS实现仿google、百度搜索框输入信息智能提示的实现方法

    本文实例讲述了JS实现仿google.百度搜索框输入信息智能提示的实现方法.分享给大家供大家参考.具体如下: <!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&qu

  • 页面版文本框智能提示JS代码

    于是这code便诞生了,如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> <script type="text/javascript" language="javascript"> var currentIndex=

  • js实现搜索框关键字智能匹配代码

    js实现搜索框关键字智能匹配代码

    只要使用搜索引擎的朋友应该都有这样的体会,就是当在搜索框输入关键字的时候,会出现自能匹配现象,这绝对是非常好的用户体验,下面就是一段类似的代码,当然这里只是掩饰,所以只能匹配的数据都是本地固定好的,在实际应用中可以才能够数据库读取数据. 效果图: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

  • 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

  • JavaScript 仿歌词效果

    JavaScript仿歌词效果 var message="Welcome to JavaScript Fairyland!" var neonbasecolor="gray" var neontextcolor="33ff33" var flashspeed=100 var n=0 if (document.all){ document.write('') for (m=0;m'+message.charAt(m)+'') document.wr

  • JavaScript仿网易选项卡制作代码

    JavaScript仿网易选项卡制作代码

    如果你的页面只有一个tab(选项卡)切换的地方,需要调用js效果,如果单独为了它,还要为页面加载一个jQuery插件,想必是极痛苦的.所有很多时候,jQuery特效也不是万能的,偶尔来个原生的js效果也是必须的.今天闲着无聊,用js和jquery分别写了一个选项卡的效果,但是其中用到jquery只是为了更好的获取标签以及修改样式. 先来浏览一下效果图吧~~ 一.Javascript实现 1.html布局 <div id="box"> <div class="

  • javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版

    第一个 文字上下间隔滚动 修正版 符合WEB标准的文字间隔滚动JS代码 var marqueeContent=new Array(); //滚动新闻 marqueeContent[0]='14:25 HTML/JS互相转换工具-IE7兼容版'; marqueeContent[1]='14:25 css 在线压缩工具'; marqueeContent[2]='14:25 CSS整形与最佳化工具[压缩]'; marqueeContent[3]='14:25 JS Minifier js压缩'; va

  • JavaScript中实现无缝滚动、分享到侧边栏实例代码

    废话不多说,直接给大家贴代码了,代码解决一起问题! 下面一段代码给大家介绍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&

  • jquery实现仿新浪微博评论滚动效果

    jquery实现仿新浪微博评论滚动效果

    本文实例讲述了jquery实现仿新浪微博评论滚动效果.分享给大家供大家参考.具体如下: 这里使用jquery实现评论滚动效果,仿新浪微博大厅文字滚动效果,以前有不少人膜拜的效果,现在被模仿的到处都是啦,呵呵,今天这个仍是模仿的,评论和头像一起向下滚动,最新的一条带渐变淡入淡出,无缝循环向下滚动,觉得不错的就顶下. 点击此处预览效果: http://demo.jb51.net/js/2015/jquery-sina-scroll-pl-codes/ 运行效果如下图所示: 具体代码如下: <!DOC

  • JS实现的N多简单无缝滚动代码(包含图文效果)

    JS实现的N多简单无缝滚动代码(包含图文效果)

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

  • javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

    本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <

  • JavaScript仿静态分页实现方法

    JavaScript仿静态分页实现方法

    本文实例讲述了JavaScript仿静态分页实现方法.分享给大家供大家参考.具体如下: 这里基于JavaScript模仿网页不刷新静态分页的功能,实际用的时候估计要做些改动,因为目前需要分页的内容是作为一个字符串变量存在JS里,使用时这里的数据要变为数据库中读取的数据,不知道它的实用性有多高,需要的朋友慢慢调整一下. 运行效果如下图所示: 具体代码如下: <HTML> <HEAD> <TITLE> 静态分页</TITLE> <style> * {

  • JavaScript仿flash遮罩动画效果

    本文实例为大家分享了JavaScript仿flash遮罩动画的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>仿flash遮罩动画</title> <meta name="keywords" content=""> <meta name="

随机推荐