javascript文字垂直滚动代码

javascript文字垂直滚动代码:

垂直滚动代码大多用于网站的新闻公告或者友情链接还有图片展示之类的功能结构,下面就介绍一个上下垂直滚动的新闻类的代码。

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style>
a {
  display:block;
  font-size:15px;
  line-height:18px;
  text-decoration:none;
  color:#333;
  font-family:Arial;
  font-size:12px;
}
.main{
  background:no-repeat 4px 5px;
  border:1px solid #aaa;
  width:400px;
  padding:3px 2px 2px 20px;
}
#thediv{
  height:36px;
  overflow:hidden;
}
</style>
<script type="text/javascript">
var c, _ = Function;
window.onload=function(){
  with (o = document.getElementById("thediv")){
    innerHTML += innerHTML; onmouseover = _("c=1"); onmouseout = _("c=0");
   }
  (F=_("if(#%18||!c)#++,#%=o.scrollHeight>>1;setTimeout(F,#%18?10:3000);".replace(/#/g,"o.scrollTop")))();
}
</script>
</head>
<body>
<div class="main">
<div id="thediv">
  <a>蚂蚁部落欢迎您</a>
  <a>只有奋斗才会有好的结果</a>
  <a>高手都是从菜鸟成长而来</a>
  <a>太阳马上就要出来了</a>
  </div>
</div>
</body>
</html>

以上代码实现了我们想要的效果,文字可以有间歇性的上下滚动。

原文地址是:http://www.51texiao.cn/jqueryjiaocheng/2015/0613/4047.html

最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8329

时间: 2024-08-02 03:50:06

javascript文字垂直滚动代码的相关文章

jquery文字垂直滚动代码实例

jquery文字垂直滚动代码实例: 文字垂直滚动效果在大量网站都有应用,尤其在新闻公告或者新闻列表之类形式的功能结构中出现. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <title>蚂

淡入淡出文字垂直滚动

淡入淡出文字垂直滚动,依次向上垂直滚动,渐渐消失,效果很不错,只是代码稍嫌多,用的时候你可以将JS部分另存为一个文件,于你的网页分开,这样不会影响你的网页. <html> <head> <title>石家庄渣浆泵</title> </head> <BODY onLoad="start()" onUnload="stop()"> <Script Language="Javascri

文字向上滚动代码,带段落停顿

带段落停顿效果的文字向上滚动代码,一个比较早的代码了,但觉得现在仍很常用,它可以定义文字成批次(段落)向上滚动,滚动后停顿,然后继续滚动,很不错啦,希望大家也喜欢. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>接触角测定仪</title> </head> &l

css+jQuery制作的文字循环滚动代码

css+jQuery制作的文字循环滚动代码,尺寸只需要在css中调整即可,另外别忘记在function里面修改相关参数 百度网盘下载

新闻文字上下滚动代码

新闻文字上下滚动代码新闻文字上下滚动代码,滚动代码,新闻,文字.源于:http://www.huiyi8.com/gundongdaima/

js文字向上滚动代码

<style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; padding-bottom:2px; margin:0 auto;}.pczt_pingfen_jhxs_xian{ width:382px;  margin:0 auto; border:1px dashed #a8d1dd; border-left:none; border-right:none;}.pczt_pingfe

Js间断/连续的文字滚动代码

Js间断/连续的文字滚动代码 Js文字滚动代码,可设置间断滚动和连续滚动.滚动时是向上滚动的,控制Li列表滚动,兼容性表现地不错,兼容IE/火狐.Opera等浏览器,代码如下: 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 02 <html> 03 <head> 04 <title>文字间隔滚动代码-兼容IE和FireFox</title>

jquery文字纵向滚动效果(带间隔停留)

<script type="text/javascript"> //文字纵向滚动 $(function() { var $this = $("#quotation"); var scrollTimer; $this.hover(function() { clearInterval(scrollTimer); }, function() { scrollTimer = setInterval(function() { scrollNews($this);

文字横向滚动

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /> <meta name=&quo