简单JS实现走马灯效果的文字(无需jQuery)
2009-09-21 03:37
956 查看
效果类似:(抱歉,图片是静态的)
![](http://images.cnblogs.com/cnblogs_com/Mainz/WindowsLiveWriter/JSjQuery_A37C/9-21-2009%2011-34-09_thumb.png)
写一段html,需要走马灯上下跳动的内容,但每次只显示一行:
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
实现走马灯效果的简单JS:
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
![](http://images.cnblogs.com/cnblogs_com/Mainz/WindowsLiveWriter/JSjQuery_A37C/9-21-2009%2011-34-09_thumb.png)
写一段html,需要走马灯上下跳动的内容,但每次只显示一行:
<hr size="0" align="center" style="border-top: 1px solid #F5F5F5;"/> <div id="marqueebox0" style="overflow: hidden; height: 26px; line-height: 26px; font-size: 14px;"> • <a href="/" target="_blank">测试第一行</a> <br/> • <a href="/" target="_blank">测试第二行</a> <br/> • <a href="/" target="_blank">测试第三行</a> <br/> • <a href="/" target="_blank">测试第四行</a> <br/> • <a href="/" target="_blank">测试第五行</a> <br/> </div>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
实现走马灯效果的简单JS:
/*开始走马灯*/ function startmarquee(lh/*line-height*/,speed/*50*/,delay/*3000*/,id/*element id*/){ var t; var p=false; var o=document.getElementById(id); o.innerHTML+=o.innerHTML; o.onmouseover=function(){p=true} o.onmouseout=function(){p=false} o.scrollTop = 0; function start(){ t=setInterval(scrolling,speed); if(!p) o.scrollTop += 2; } function scrolling(){ if(o.scrollTop%lh!=0){ o.scrollTop += 2; if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0; }else{ clearInterval(t); setTimeout(start,delay); } } setTimeout(start,delay); } /*启动效果*/ try{ startmarquee(26,50,3000,"marqueebox0"); }catch(e){}
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
相关文章推荐
- jquery实现简单文字提示效果
- [JQuery]用InsertAfter实现图片走马灯展示效果2——js代码重构
- jquery使用CSS3实现文字动画效果插件Textillate.js
- JS实现文字的走马灯效果
- jQuery实现的简单文字提示效果模拟title
- 【转】jQuery实现的简单文字提示效果模拟title
- jquery使用CSS3实现文字动画效果插件Textillate.js
- jquery实现简单文字提示效果
- jQuery实现的简单文字提示效果模拟title(转)
- JQuery实现文字滚动效果-最简单的方法
- jquery.page.js实现简单的分页效果
- 原生js简单实现jQuery的动画效果
- JS仿淘宝实现的简单滑动门效果代码
- jquery.fly.js实现添加购物车效果、实现抛物线运动
- jQuery实现简单滚动动画效果
- 利用jquery-fform.js插件实现图片所见即所得效果
- jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
- jQuery实现选项卡切换效果简单演示
- Js 实现文字爬楼滚动效果 结合文本框
- html、css和jquery相结合实现简单的进度条效果实例代码