<script language="javascript" src="${contextPath}/scripts/jquery-1.7.2.min.js"></script>
<script language="javascript" src="${contextPath}/scripts/ajax.js"></script>
<script language="javascript" type="text/javascript">
var speed=100;
var MyMar;
var alltop=0;
function getup(type){
if(type=="up"){
getstop();
speed=1;
demo.DIRECTION="up";
alltop=demo.scrollTop+30 ;
}
demo2.innerHTML=demo1.innerHTML ;
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0){
demo.scrollTop-=demo1.offsetHeight ;
}else{
demo.scrollTop++ ;
}
alltop=demo.scrollTop;
}
MyMar=setInterval(Marquee,speed);
if(speed==1){
setTimeout('getUpspeed()',5000); //5秒后执行yourFunction(),只执行一次
}
}
function getstop(){
speed=100;
if(null!=MyMar||''!=MyMar){
clearInterval(MyMar);
}
}
function getdown(type){
demo2.innerHTML=demo1.innerHTML ;
if(type=="down"){
getstop();
speed=1;
demo.DIRECTION="down";
alltop=demo.scrollTop-30 ;
}
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0){
demo.scrollTop+=demo2.offsetHeight ;
}else{
demo.scrollTop-- ;
}
alltop=demo.scrollTop;
}
MyMar=setInterval(Marquee,speed);
if(speed==1){
setTimeout('getDownspeed()',5000); //5秒后执行yourFunction(),只执行一次
}
}
function getDownspeed(){
clearInterval(MyMar);
speed=100;
getdown("");
}
function getUpspeed(){
clearInterval(MyMar);
speed=100;
getup("");
}
</script>
....
<body onload="getup('');">
<div >
<div ><br />
<br />
<table width="1024" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center"><img src="${contextPath}/styles/images/chumo_home_title.png" width="540" height="74" /></td>
</tr>
<tr>
<td align="center" style=" background:url(${contextPath}/styles/images/chumo_home_line.png) repeat-x;"> </td>
</tr>
</table>
<br />
<table width="98%" border="0" align="right" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<div id=demo class="cont_font" style=overflow:hidden;>
<div id=demo1>
<p> 滚动内容
</p>
<p> </p>
</div>
<div id=demo2></div>
</div>
</td>
<td width="8%" align="center" valign="middle">
<p>
<img src="${contextPath}/styles/images/chumo_inter_up.png" width="50" height="51" class="hand" onclick="getdown('down');" />
</p>
<p> </p>
<p><img src="${contextPath}/styles/images/chumo_inter_pause.png" width="52" height="55" class="hand" onclick="getstop();"/></p>
<p><br />
<div id=upan onblur="getUpspeed()"> <img src="${contextPath}/styles/images/chumo_inter_down.png" width="50" height="49" class="hand" onclick="getup('up');"/>
</div></p></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
---------------------css
body{
margin:0 auto;
background:#a30e12;
}
.bg{
background:url(../images/chumo_home_bg.png) no-repeat center;
width:1024px;
height:748px;
margin:auto;
}
a:link
{
text-decoration: none;
}
.hand{
cursor:pointer;
}
.cont{
height:521px;
background:url(../images/chumo_inter_bg.png) repeat-x;
color:#fff;
border:#ce5d4c solid 1px;
}
.title{
font-size:36px;
text-align:center;
font-weight:bold;
margin-top:15px;
}
.cont_font{
width:95%;
font-size:22px;
font-family:"楷体";
height:400px;
line-height:36px;
font-weight:bold;
letter-spacing:2px;
text-align:left;
}
分享到：
相关推荐
实现跑马灯上下滚动效果，marquee标签被摒弃后不使用js实现的跑马灯效果保险些
跑文字上下、左右滚动跑马灯效果，欢迎指正
RecyclerView上下自动无限滚动，跑马灯效果，具体效果有2种， 1.每次移动距离是一个item的高度 2.持续向上移动
上下滚动的图片demo 上下跑马灯效果 效果图 http://blog.csdn.net/liudao7994/article/details/54136911
jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果 jQuery无缝滚动跑马灯效果
一般网站非常实用的上下左右滚动的跑马灯JS
Android 文字跑马灯和上下翻滚效果
跑马灯效果+，一个朋友写的，整理下跑马灯的实现
基于Qt的跑马灯效果，支持配置文件读取。tcp 设置字体、颜色，大小，内容功能
消息垂直及上下滚动以及文字跑马灯效果，滚动消息支持自定义视图
Jquery写的跑马灯效果，可支持上下左右.有详细的注释，对想学JQUERY插件的朋友有很大帮助.内服asp.net DEMO
遇到一行文字过长不能全部显示时，需要滚动显示，可下载此代码，研究跑马灯效果的实现方法。
drawMarqueeView.add(contentView: WQScrollLabel.createLabel(text: "我是跑马灯文字我是跑马灯文字我是跑马灯文字我是跑马灯文字", textColor: .cyan)) 3、开始跑 drawMarqueeView.startAnimation() 3、暂停 ...
分享一个Android中实现跑马灯效果
完美实现android 滚动字幕（跑马灯效果），简单实用
Delphi实现透明跑马灯效果
Android文字跑马灯效果,TextView的文字跑马灯效果
unity中使用c#实现跑马灯效果，可根据自身需求进行修改和优化
项目2_P0口实现跑马灯效果
android 跑马灯效果 android 跑马灯效果