JS实现来回出现文字的状态栏特效代码

 更新时间:2015年10月31日 10:54:09   作者:企鹅  
这篇文章主要介绍了JS实现来回出现文字的状态栏特效代码,针对文字的定义及状态栏的定时显示等实现方法备有详细的文字说明,需要的朋友可以参考下

本文实例讲述了JS实现来回出现文字的状态栏特效代码。分享给大家供大家参考,具体如下:

运行这款来回出现文字的状态栏特效时,请注意页面左下角的状态栏。貌似IE8以上版本看不到效果唉。那么究竟是如何实现的呢?主要是用函数来显示消息,根据place的值取当前需显示的字符串,准备在300毫秒后收起显示,将需取的字符串长度计数器加一准备下一次显示;同时使用函数隐藏消息,取Message右边的一定长度的字符串,设定消隐下一个字符的延时。

运行效果截图如下:

在线演示地址如下:

http://demo.jb51.net/js/2015/js-status-bar-scroll-show-codes/

具体代码如下:

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var Message=" 欢迎光临脚本之家,请多多提出你的建议!!! "; //这里可自定义显示内容
var place=1;
function scrollIn() { //这个函数用来显示消息
window.status=Message.substring(0, place); //根据place的值取当前需显示的字符串
if (place >= Message.length) { //如果全部信息已经显示完毕
place=1; //则将place重置
window.setTimeout("scrollOut()",300); //准备在300毫秒后收起显示
} else { //否则(信息还没有显示完)
place++; //将需取的字符串长度计数器加一
window.setTimeout("scrollIn()",50); //准备下一次显示
  } 
}
function scrollOut() { //这个函数用来消隐消息
window.status=Message.substring(place, Message.length); //取Message右边的一定长度的字符串
if (place >= Message.length) { //如果已经无字符可取(信息已经完全消隐)
place=1; //则初始化place
window.setTimeout("scrollIn()", 100); //设定下一次操作是显示信息
} else { //否则(信息还没有消隐完毕)
place++; //计数器加一
window.setTimeout("scrollOut()", 50); //设定消隐下一个字符的延时
  }
}
// End -->
</SCRIPT>
<title>来回出现文字的状态栏特效</title>
</head>
<body onLoad="scrollIn()">
<b>请注意页面左下角的状态栏</b>
</body>

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

相关文章

  • javascript中的previousSibling和nextSibling的正确用法

    javascript中的previousSibling和nextSibling的正确用法

    这篇文章主要介绍了javascript中的previousSibling和nextSibling的正确用法的相关资料,需要的朋友可以参考下
    2015-09-09
  • layui 上传插件 带预览 非自动上传功能的实例(非常实用)

    layui 上传插件 带预览 非自动上传功能的实例(非常实用)

    今天小编就为大家分享一篇layui 上传插件 带预览 非自动上传功能的实例(非常实用),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript函数this指向问题详解

    JavaScript函数this指向问题详解

    这篇文章主要为大家介绍了JavaScript函数this指向,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • javascript实现验证身份证号的有效性并提示

    javascript实现验证身份证号的有效性并提示

    下面分享的JS脚本是我用过的最完善的身份证号的验证程序了,因为只有真正的身份证号才能被通过,小伙伴们可以试试。直接复制运行。
    2015-04-04
  • VS2008中使用JavaScript调用WebServices

    VS2008中使用JavaScript调用WebServices

    这篇文章主要介绍了VS2008中使用JavaScript调用WebServices,需要的朋友可以参考下
    2014-12-12
  • JS运动特效之同时运动实现方法分析

    JS运动特效之同时运动实现方法分析

    这篇文章主要介绍了JS运动特效之同时运动实现方法,结合实例形式分析了javascript同时运动的原理与相关实现技巧,需要的朋友可以参考下
    2018-01-01
  • 小程序外卖订单界面的示例代码

    小程序外卖订单界面的示例代码

    这篇文章主要介绍了小程序外卖订单界面的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • JS实现的手机端精简幻灯片效果

    JS实现的手机端精简幻灯片效果

    这篇文章主要介绍了JS实现的手机端精简幻灯片效果,涉及javascript结合时间函数动态修改页面元素的相关技巧,需要的朋友可以参考下
    2016-09-09
  • JS获取img图片原始尺寸高度与宽度的七种方式

    JS获取img图片原始尺寸高度与宽度的七种方式

    近期做项目由于每张图片加载的时候比例大小都不一样,加载图片时大部分图片会变形,导致图片展示效果非常差,所以我们可以获取图片的原始宽高,然后以等比例展示,效果会非常好,这篇文章主要给大家介绍了关于JS获取img图片原始尺寸高度与宽度的七种方式,需要的朋友可以参考下
    2022-11-11
  • SWFObject Flash js调用类

    SWFObject Flash js调用类

    一直想为 SWFObject 这个JS的类库写一个推荐帖,因为他轻便,同时功能强大,为我们的开发带来了很大的便捷。
    2008-07-07

最新评论