文字垂直滚动之javascript代码

在大型的网站新闻公告和友情链接等领域经常有这种文字或图片垂直滚动的效果，下面就介绍一下文字垂直滚动的javascript代码。

javascript代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<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>

以上代码就实现了文字垂直滚动的效果，文字可有上下间歇性的滚动，有需要的朋友可以来参考下，希望大家喜欢。

赞 (0)

相关推荐

  • JS实现霓虹灯文字效果的方法

    JS实现霓虹灯文字效果的方法

    本文实例讲述了JS实现霓虹灯文字效果的方法.分享给大家供大家参考.具体如下: 这里使用JS实现网页上的霓虹灯文字特效代码特效,运行效果看一下,你会看到文字的颜色像霓虹灯一样,连续不停变化,五颜六色的,很炫的样子,所以就叫做霓虹文字吧,也可以叫他文字变色效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html

  • JS CSS制作饱含热情的镶边文字闪烁特效

    文字闪烁 function glowit(which){ if (document.all.glowtext[which].filters[0].strength==2) document.all.glowtext[which].filters[0].strength=1 else document.all.glowtext[which].filters[0].strength=2 } function glowit2(which){ if (document.all.glowtext.filt

  • javascript:文字不间断向左移动的实例代码

    复制代码 代码如下: <!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> <script type="t

  • javascript自动改变文字大小和颜色的效果的小例子

    复制代码 代码如下: <body  bgcolor="#000000">  <div id="text"  style="font-size:20px;">你好,这是一段改变文字大小和颜色的javascript代码</div>  <script type="text/javascript">  var size = 20;  var falg = 1;  function col

  • JavaScript 平滑文字闪烁

    colors2 = new Array(6); colors2[0]="#fef4d9"; colors2[1]="#333300"; colors2[2]="#665500"; colors2[3]="#997700"; colors2[4]="#CC9900"; colors2[5]="#FFCC00"; var i=0; function fLi2() { line2.style.

  • JavaScript实现文字跟随鼠标特效

    JavaScript实现文字跟随鼠标特效

    本文实例讲述了JavaScript如何实现文字跟随鼠标特效.分享给大家供大家参考.具体如下: 运行效果图如下: <HTML> <HEAD> <TITLE>鼠标特效--文本围绕鼠标</TITLE> </HEAD> <BODY> <br><br> <center> <font color="red"><h2>鼠标特效--文本围绕鼠标</h2><

  • JavaScript实现彩虹文字效果的方法

    本文实例讲述了JavaScript实现彩虹文字效果的方法.分享给大家供大家参考.具体如下: <HTML> <HEAD> <TITLE>Rainbow Text</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin hide from old browsers function createHexArray(n) { this.length = n; for (var i =

  • 文字垂直滚动之javascript代码

    在大型的网站新闻公告和友情链接等领域经常有这种文字或图片垂直滚动的效果,下面就介绍一下文字垂直滚动的javascript代码. javascript代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <titl

  • 实现网页内容水平或垂直滚动的Javascript代码

    主要两个部分,一.是滚动内容部分:二.JS的滚动代码部分,也只有两句话. 一.传统的滚动代码 用Javascript实现新闻内容的水平滚动! [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 传统的滚动代码应用效果比较单一,而且经常还存在浏览器的兼容性问题,比如在FIREFOX上效果就会出现marquee的特效无效的问题. 二.Javascript实现的滚动效果 用Javascript实现新闻内容的水平滚动1 document.write("用Javascript实现新闻内容的水平滚动

  • js实现文字垂直滚动和鼠标悬停效果

    本文实例介绍了文字垂直滚动效果,主要运用了setInterval(function(){}, time);方法,分享给大家供大家参考,具体内容如下 HTML布局: <ul class="recommend-info"> <li> <span class="push">荐</span> <a href="javascript:;">1高档社区,经典户型,机会难得,稍纵即逝!仅售66万!&l

  • Android自定义View实现仿1号店垂直滚动广告条代码

    Android自定义View实现仿1号店垂直滚动广告条代码

    效果图展示,图片有点卡,耐心看会,原程序是很流畅的 实现步骤: 声明变量 初始化画笔.文本大小和坐标 onMeasure()适配wrap_content的宽高 onDraw()画出根据坐标画出两段Text 监听点击事件 在Activity中实现点击事件 实现原理(坐标变换原理):整个过程都是基于坐标Y的增加和交换进行处理的,Y值都会一直增加到endY,然后进行交换逻辑 步骤一:声明变量 由于1号店是两句话的滚动,所以我们也是使用两句话来实现的 private Paint mPaint; priv

  • Android实现文字垂直滚动、纵向走马灯效果的实现方式汇总

    Android实现文字垂直滚动、纵向走马灯效果的实现方式汇总

    方法一.使用系统控件ViewFlipper方式: 布局文件: <ViewFlipper android:id="@+id/view_flipper" android:layout_width="300dp" android:layout_height="35dp" android:layout_centerInParent="true" android:autoStart="true" android

  • jQuery实现公告文字左右滚动的实例代码

    复制代码 代码如下: <!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="

  • JQuery实现文字无缝滚动效果示例代码(Marquee插件)

    推荐一个JQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. 使用方法如下: 1.加载javascript. <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src=&quo

  • jquery实现多行文字图片滚动效果示例代码

    今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars

  • 基于javascript实现文字无缝滚动效果

    基于javascript实现文字无缝滚动效果

    本文实例为大家分享了javascript实现文字无缝滚动的全部代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> &

  • JavaScript实现带缓冲效果的随屏滚动漂浮广告代码

    JavaScript实现带缓冲效果的随屏滚动漂浮广告代码

    本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/ 具体代码如下: <html

随机推荐