上下跑马灯效果 按钮控制暂停 上下滚动
rou 2013-05-29
<scriptlanguage="javascript"src="${contextPath}/scripts/jquery-1.7.2.min.js"></script>
<scriptlanguage="javascript"src="${contextPath}/scripts/ajax.js"></script>
<scriptlanguage="javascript"type="text/javascript">
varspeed=100;
varMyMar;
varalltop=0;
functiongetup(type){
if(type=="up"){
getstop();
speed=1;
demo.DIRECTION="up";
alltop=demo.scrollTop+30;
}
demo2.innerHTML=demo1.innerHTML;
functionMarquee(){
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(),只执行一次
}
}
functiongetstop(){
speed=100;
if(null!=MyMar||''!=MyMar){
clearInterval(MyMar);
}
}
functiongetdown(type){
demo2.innerHTML=demo1.innerHTML;
if(type=="down"){
getstop();
speed=1;
demo.DIRECTION="down";
alltop=demo.scrollTop-30;
}
functionMarquee(){
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(),只执行一次
}
}
functiongetDownspeed(){
clearInterval(MyMar);
speed=100;
getdown("");
}
functiongetUpspeed(){
clearInterval(MyMar);
speed=100;
getup("");
}
</script>
....
<bodyonload="getup('');">
<div>
<div><br/>
<br/>
<tablewidth="1024"border="0"align="center"cellpadding="0"cellspacing="0">
<tr>
<tdalign="center"><imgsrc="${contextPath}/styles/images/chumo_home_title.png"width="540"height="74"/></td>
</tr>
<tr>
<tdalign="center"style="background:url(${contextPath}/styles/images/chumo_home_line.png)repeat-x;"> </td>
</tr>
</table>
<br/>
<tablewidth="98%"border="0"align="right"cellpadding="5"cellspacing="0">
<tbody>
<tr>
<divid=democlass="cont_font"style=overflow:hidden;>
<divid=demo1>
<p> 滚动内容
</p>
<p> </p>
</div>
<divid=demo2></div>
</div>
</td>
<tdwidth="8%"align="center"valign="middle">
<p>
<imgsrc="${contextPath}/styles/images/chumo_inter_up.png"width="50"height="51"class="hand"onclick="getdown('down');"/>
</p>
<p> </p>
<p><imgsrc="${contextPath}/styles/images/chumo_inter_pause.png"width="52"height="55"class="hand"onclick="getstop();"/></p>
<p><br/>
<divid=upanonblur="getUpspeed()"><imgsrc="${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:0auto;
background:#a30e12;
}
.bg{
background:url(../images/chumo_home_bg.png)no-repeatcenter;
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:#ce5d4csolid1px;
}
.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;
}
