JavaScript文本特效实例小结【3个示例】


Posted in Javascript onDecember 22, 2018

本文实例讲述了JavaScript文本特效。分享给大家供大家参考,具体如下:

1、标题跑马灯

常常能够在一些新闻网站,或者其他地方,看到文字在一个特定的区域内,来回滚动。一旦超出边界就消失了,那么这些效果是如何做到的呢,今天我们就来讲讲。

图示效果:

JavaScript文本特效实例小结【3个示例】

源代码:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <style>
 </style>
</head>
<body>
 <center>
  <font size=5 color="ff0094">
   <p> 标题栏上实现的文字跑马灯</p>
  </font>
 </center>
</body>
<script Language="JavaScript">
  var msg="  "+" 这是使用JavaScript在标题栏上实现的文字跑马灯效果";//加空格是为了让别人看清楚这段话,否则运行太快了,看不清楚。
  var interval = 100;
  var maxlen = 80;
  var seq=maxlen;
  var len
  len = msg.length;
  function Scroll()
  {
   document.title=msg.substring(seq, len);
   seq++;
   if(seq >= len)
   {
    seq = 0;
   }
   window.setTimeout("Scroll();", interval );
  }
  Scroll();
 </script>
</html>

2、网页内容跑马灯

这里介绍了一些常用的跑马灯效果,代码来自//3water.com/article/8005.htm

效果图如下:

JavaScript文本特效实例小结【3个示例】

JavaScript文本特效实例小结【3个示例】

源代码:

<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
<title>跑马灯大全</title>
<script LANGUAGE="JavaScript">
var Mes=new Array();
Mes[0]="三水点靠木欢迎你! ";
Mes[1]="感谢你关注三水点靠木教程 ";
Mes[2]="网页特效 之 跑马灯效果大全 ";
var place=1;
var i=0;
function scroll()
{
window.status=Mes[i].substring(0, place);
if (place >= Mes[i].length)
{
if(i<2)
{
i++;
place=1;
window.setTimeout("scroll()",50);
}
else
{
i=0;
place=1;
window.setTimeout("scroll()",50);
}
}
else {
place++;
window.setTimeout("scroll()",50);
}
}
</script>
</head>
<form name="shooterform" method="get">
<body onload="scroll();">
<marquee>滚动的文字</marquee>
<marquee behavior=alternate>表示双向移动</marquee>
<marquee direction=left>表示运动方向向左</marquee>
<marquee width=400 behavior=alternate direction=left align=middle border=1>弹来弹去跑马灯!</marquee>
<marquee scrollamount="30">表示运动方向向左</marquee>
<marquee width=90%>
<a href="//3water.com" target=_blank>带有超链接的跑马灯!点我试试?</a>
<a href="http://www.baidu.com" rel="external nofollow" target=_blank>还有一条呢!点我试试?</a>
</marquee>
<table width="93%" border="1" cellspacing="0" cellpadding="1" align="center" class="p1">
<tr>
<td width="42%">参数</td>
<td width="58%">用法介绍</td>
</tr>
<tr>
<td width="42%">behavior=scroll, slide, alternate</td>
<td width="58%">跑马方式:循环绕行,只跑一次就停住,来回往复运动</td>
</tr>
<tr>
<td width="42%">direction=left,right</td>
<td width="58%">跑马方向:从左向右,从右向左</td>
</tr>
<tr>
<td width="42%">loop=100</td>
<td width="58%">跑马次数:循环100次,如不写默认为一直循环</td>
</tr>
<tr>
<td width="42%">width=100%,height=200</td>
<td width="58%">跑马范围:宽为100%,高为200像素</td>
</tr>
<tr>
<td width="42%">scrollamount=20</td>
<td width="58%">跑马速度:数越大越快</td>
</tr>
<tr>
<td width="42%">scrolldelay=500</td>
<td width="58%">跑马延时:毫秒数,利用它可实现跃进式滚动</td>
</tr>
<tr>
<td width="42%">hspace=20,vspace=20</td>
<td width="58%">跑马区域与其它区域间的空白大小</td>
</tr>
<tr>
<td width="42%">bgcolor=#00FFCC</td>
<td width="58%">跑马区域的背景颜色</td>
</tr>
</table>
</body>
</form>
</html>

3、彩色文字的顺序闪烁效果

文字以某种色彩显示,顺序划过每一个字符。当然也可以每次轮完一遍,就改变一种颜色。代码实现很简单,其实就是给要改变的字符,添加一个标签,在设置颜色就可以,最后在定时调用改变的颜色的程序即可。效果图如下:

JavaScript文本特效实例小结【3个示例】

源代码:

<!DOCTYPE html>
<html>
  <head>
   <meta charset="utf-8">
   <title>彩色文字的顺序闪烁效果</title>
   <style>
    section{
      position: absolute;
      top:50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 220px;
      height: 42px;
      padding: 10px;
      font-size: 28px;
      margin: 10px;
     }
     span{
      color:red;
     }
   </style>
  </head>
<body>
 <section>
  <div>tkgeagteewevbnmkj</div>
  <div>tkgeagteewevbnmkj</div>
 </section>
</body>
<script language="JavaScript">
  //获取两个div
  var str=document.getElementsByTagName("div")[0];
  var str2=document.getElementsByTagName("div")[1];
  var j=0,i=0,k=0;
  var color=["blue","red","yellow","#cccccc"];
  //每次只改变一个字符的颜色
  function changeCharColor()
  {
   var div=str.innerText;
   var len=div.length;
   if(j<len) {
    str.innerHTML=div.substring(0,j)+"<span>"+div.charAt(j)+"</span>"+div.substring(j+1,len);
    j++;
   }
   else{
    j=0;
   }
  }
  //改变一段字母的颜色,每次增加一个字母
  function changeColor2(){
   var div=str2.innerText;
   var len=div.length;
    if(i<=len) {//注意小于等于,因为substring的截取的时候,不包括第二个参数指定的位置。
    str2.innerHTML="<span style='color:"+color[k]+";'>"+div.substring(0,i)+"</span>"+div.substring(i,len);
    console.log(str.innerHTML);
    i++;
   }
   else{
    i=0;
    k++;
   }
   if (k==3){k=0;}
  }
  //定时调用
  setInterval("changeCharColor()", 100);
  setInterval("changeColor2()", 150);//递归调用
 </script>
</html>

PS:感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun 测试上述代码,看看运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 #Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 #Javascript
Element input树型下拉框的实现代码
Dec 21 #Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 #Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 #Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 #Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 #Javascript
You might like
PHP中ltrim()函数的用法与实例讲解
2019/03/28 PHP
Javascript无阻塞加载具体方式
2013/06/28 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
js数组如何添加json数据及js数组与json的区别
2015/10/27 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
2016/06/20 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
element-ui table span-method(行合并)的实现代码
2018/12/20 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
2019/01/08 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
python修改字典内key对应值的方法
2015/07/11 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
Python中and和or如何使用
2020/05/28 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
python实现图片,视频人脸识别(dlib版)
2020/11/18 Python
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
英国在线玫瑰专家:InterRose
2019/12/01 全球购物
网络安全方面的面试题
2015/11/04 面试题
董事长秘书职责
2014/01/31 职场文书
车间主任岗位职责
2014/03/16 职场文书
商务日语专业自荐信
2014/04/17 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
商务经理岗位职责
2014/07/30 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
2015年妇委会工作总结
2015/05/22 职场文书
校运会广播稿
2015/08/19 职场文书
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python