上下跑马灯效果 按钮控制暂停 上下滚动
<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;
}
<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;
}