网站地图    收藏   

主页 > 前端 > javascript >

js实现文字左右滚动效果

来源:自学PHP网    时间:2014-11-05 10:26 作者: 阅读:

[导读] 文字滚动效果一般用于通知,公告类的下面我来给大家详细的介绍关于两个实现文字滚动的效果,有需要的朋友可参考。...

最简单的文字向上滚动效果利用MARQUEE

 代码如下 复制代码

<MARQUEE onmouseover=this.stop() style="WIDTH: 100%; HEIGHT: 195px" onmouseout=this.start() scrollAmount=2 direction=up><a href="sys_clew1.jsp">1</a><br><a href="sys_clew2.jsp">2</a><br><a href="sys_clew3.jsp">3</a><br></MARQUEE>

上面的方法是我刚学程序时写的,下面百度一个不错的代码。

 

 代码如下 复制代码

<div id="dvvv" style="overflow: hidden; height: 27px; width: 750px;">
<div id="dvvv1">
<ul style="padding-left: 0px; margin-top: 0px;">
<li style="list-style-type: none;white-space:nowrap“>
滚动吧,不停的文字滚动吧。</li>。
</ul>
</div>
<div id="dvvv2">
</div>
</div>

<script type="text/javascript">
var speded=30
dvvv2.innerHTML=dvvv1.innerHTML
function Marqpuee(){
if(dvvv2.offsetWidth-dvvv.scrollLeft<=0)
dvvv.scrollLeft-=dvvv1.offsetWidth
else{
dvvv.scrollLeft++
}
}
var MyMmar=setInterval(Marqpuee,speded)
dvvv.onmouseover=function() {clearInterval(MyMmar)}
dvvv.onmouseout=function() {MyMmar=setInterval(Marqpuee,speded)}
</script>


自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论