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 相关文章推荐
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
Javascript中关于Array.filter()的妙用详解
Dec 04 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 Javascript
微信小程序-API接口安全详解
Jul 16 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防止sql注入代码实例
2013/12/18 PHP
PHP图片等比例缩放生成缩略图函数分享
2014/06/10 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
Yii框架中jquery表单验证插件用法示例
2016/10/18 PHP
php用xpath解析html的代码实例讲解
2019/02/14 PHP
asp函数split()对应php函数explode()
2019/02/27 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
JavaScript实现点击按钮后变灰避免多次重复提交
2013/07/15 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
javascript每日必学之封装
2016/02/23 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
Python的Django框架中的Context使用
2015/07/15 Python
Python延时操作实现方法示例
2018/08/14 Python
python脚本当作Linux中的服务启动实现方法
2019/06/28 Python
python 获取等间隔的数组实例
2019/07/04 Python
打印tensorflow恢复模型中所有变量与操作节点方式
2020/05/26 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
德国机车企业:FC-Moto
2017/10/27 全球购物
小车司机岗位职责
2013/11/25 职场文书
大专生自我评价
2014/01/28 职场文书
学习演讲稿范文
2014/05/10 职场文书
2014年度思想工作总结
2014/11/27 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
MySQL系列之二 多实例配置
2021/07/02 MySQL