js实现文字定时向上和向左滚动效果_文字特效_js网页特效代码

<style type="text/css">
#up_zzjs{border:1px solid #ccc;width:170px;height:82px;line-height:20px;overflow:hidden;}
#up_zzjs #up_li{list-style-type:none;margin:0;padding:0;margin-left:6px;}
/*系统支持ie8就选line-height:16px;,但不支持opera 否则选line-height:20px;*/
#up_zzjs #up_li a{font-size:12px; line-height:16px;}
</style>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net,站长js特效。<hr>
<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:www.zzjs.net,zzjs@msn.com,用.net打造靓站-->
<div id="up_zzjs">
<div id="marqueebox">
<div id="up_li"><a href="http://www.zzjs.net/" target="_blank"><span style="color:#FF0000">滚动文字一号</span></a> <a href="http://www.zzjs.net/" target="_blank"><span style="color:#FF0000">滚动文字二号</span></a></div>
<div id="up_li"><a href="http://www.zzjs.net/" target="_blank"><span style="color:#3333FF">滚动文字三号</span></a> <a href="http://www.zzjs.net/" target="_blank"><span style="color:#3333FF">滚动文字四号</span></a></div>
<div id="up_li"><a href="http://www.zzjs.net/" target="_blank"><span style="color:#3333FF">滚动文字五号</span></a> <a href="http://www.zzjs.net/" target="_blank"><span style="color:#3333FF">滚动文字六号</span></a></div>
<div id="up_li"><a href="http://www.zzjs.net/" target="_blank"><span style="color:#3333FF">滚动文字七号</span></a> <a href="http://www.zzjs.net/" target="_blank"><span style="color:#3333FF">滚动文字八号</span></a></div>
<script language="javascript">
function startmarquee(lh,speed,delay) {
var p=false;
var t;
var o=document.getElementById("marqueebox");
o.innerHTML+=o.innerHTML;
o.style.marginTop=0;
o.οnmοuseοver=function(){p=true;}
o.οnmοuseοut=function(){p=false;}
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function start(){
t=setInterval(scrolling,speed);
if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
}
//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
function scrolling(){
if(parseInt(o.style.marginTop)%lh!=0){
o.style.marginTop=parseInt(o.style.marginTop)-1+"px";
if(Math.abs(parseInt(o.style.marginTop))>=o.scrollHeight/2) o.style.marginTop=0;
}else{
clearInterval(t);
setTimeout(start,delay);
}
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
setTimeout(start,delay);
}//欢迎来到站长特效网,我们的网址是www.zzjs.net,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。
startmarquee(20,20,1500);

</script>


左右滚动

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js文字向左无缝滚动</title>
</head>
<body>
<style type="text/css">
.qimo8{ overflow:hidden; width:815px;}
.qimo8 .qimo {/*width:99999999px;*/width:2000%; height:30px;}
.qimo8 .qimo div{ float:left;}
.qimo8 .qimo ul{float:left; height:30px; overflow:hidden; zoom:1; }
.qimo8 .qimo ul li{float:left; line-height:30px; list-style:none;}
.qimo8 li a{margin-right:10px;color:#444444;}
</style>
<div id="demo" class="qimo8">
  <div class="qimo">
    <div id="demo1">
      <ul>
                               <li><a href='/office/194/46163.htm' >回收站里的文件删除了怎么恢复</a></li>
      </ul>
    </div>
    <div id="demo2"></div>
  </div>
</div>
<script type="text/javascript">
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML=document.getElementById("demo1").innerHTML;
function Marquee(){
if(demo.scrollLeft-demo2.offsetWidth>=0){
 demo.scrollLeft-=demo1.offsetWidth;
}
else{
 demo.scrollLeft++;
}
}
var myvar=setInterval(Marquee,30);
demo.οnmοuseοut=function (){myvar=setInterval(Marquee,30);}
demo.οnmοuseοver=function(){clearInterval(myvar);}
</script>
</body>
</html></td>
  </tr>
</table>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值