100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > js实现文字定时向上和向左滚动效果_文字特效_js网页特效代码

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

时间:2021-09-01 22:11:23

相关推荐

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="/">站长特效网</a>,站长必备的高质量网页特效和广告代码。,站长js特效。<hr>

<!--欢迎来到站长特效网,我们网站收集大量高质量js特效,提供许多广告代码下载,网址:,zzjs@,用.net打造靓站-->

<div id="up_zzjs">

<div id="marqueebox">

<div id="up_li"><a href="/" target="_blank"><span style="color:#FF0000">滚动文字一号</span></a> <a href="/" target="_blank"><span style="color:#FF0000">滚动文字二号</span></a></div>

<div id="up_li"><a href="/" target="_blank"><span style="color:#3333FF">滚动文字三号</span></a> <a href="/" target="_blank"><span style="color:#3333FF">滚动文字四号</span></a></div>

<div id="up_li"><a href="/" target="_blank"><span style="color:#3333FF">滚动文字五号</span></a> <a href="/" target="_blank"><span style="color:#3333FF">滚动文字六号</span></a></div>

<div id="up_li"><a href="/" target="_blank"><span style="color:#3333FF">滚动文字七号</span></a> <a href="/" 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;}

//欢迎来到站长特效网,我们的网址是,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。

function start(){

t=setInterval(scrolling,speed);

if(!p) o.style.marginTop=parseInt(o.style.marginTop)-1+"px";

}

//欢迎来到站长特效网,我们的网址是,很好记,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);

}

}//欢迎来到站长特效网,我们的网址是,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。

setTimeout(start,delay);

}//欢迎来到站长特效网,我们的网址是,很好记,zz站长,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载。

startmarquee(20,20,1500);

</script>

左右滚动

js制作左右滚动的通知效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。