JS实现浏览器状态栏文字从右向左弹出效果代码


Posted in Javascript onOctober 27, 2015

本文实例讲述了JS实现浏览器状态栏文字从右向左弹出效果。分享给大家供大家参考,具体如下:

这里状态栏文字弹出代码,从右向左弹出,通过修改Script中的这些代码片段可改变效果:

var POSITION = 100
var DELAY = 4
var MESSAGE = "这里是你想要的文字!"

运行效果截图如下:

JS实现浏览器状态栏文字从右向左弹出效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>状态栏文字弹出代码,从右向左弹出</TITLE>
</HEAD>
<BODY>
<script language="JavaScript"> 
<!--
function statusMessageObject(p,d) {
 this.msg = MESSAGE
 this.out = " "
 this.pos = POSITION
 this.delay = DELAY
 this.i   = 0
 this.reset = clearMessage
}
function clearMessage() {
 this.pos = POSITION
}
var POSITION = 100
var DELAY  = 4
 var MESSAGE = "状态栏文字快速的一个一个弹出!!!  " 
var scroll = new statusMessageObject()
function scroller() {
 for (scroll.i = 0; scroll.i < scroll.pos; scroll.i++) {
  scroll.out += " "
 }
 if (scroll.pos >= 0)
  scroll.out += scroll.msg
 else scroll.out = scroll.msg.substring(-scroll.pos,scroll.msg.length)
 window.status = scroll.out
 scroll.out = " "
 scroll.pos--
 if (scroll.pos < -(scroll.msg.length)) {
  scroll.reset()
 }
 setTimeout ('scroller()',scroll.delay)
}
function snapIn(jumpSpaces,position) {
 var msg = scroll.msg
 var out = ""
 for (var i=0; i<position; i++) 
  {out += msg.charAt(i)}
 for (i=1;i<jumpSpaces;i++) 
  {out += " "}
 out += msg.charAt(position)
 window.status = out
 if (jumpSpaces <= 1) {
  position++
  if (msg.charAt(position) == ' ') 
   {position++ }
  jumpSpaces = 100-position
 } else if (jumpSpaces > 3)
    {jumpSpaces *= .75}
 else
  {jumpSpaces--}
 if (position != msg.length) {
  var cmd = "snapIn(" + jumpSpaces + "," + position + ")";
  scrollID = window.setTimeout(cmd,scroll.delay);
 } else {
  window.status=""
  jumpSpaces=0
  position=0
  cmd = "snapIn(" + jumpSpaces + "," + position + ")";
  scrollID = window.setTimeout(cmd,scroll.delay);
  return false 
 }
 return true
}
snapIn(100,0);
// -->
</script>
</BODY>
</HTML>

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

Javascript 相关文章推荐
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
jquery 操作DOM案例代码分享
Apr 05 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
vue模式history下在iis中配置流程
Apr 17 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
Vue 防止短时间内连续点击后多次触发请求的操作
Nov 11 Javascript
jQuery无刷新分页完整实例代码
Oct 27 #Javascript
js数组如何添加json数据及js数组与json的区别
Oct 27 #Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 #Javascript
JavaScript编程中window的location与history对象详解
Oct 26 #Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 #Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 #Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 #Javascript
You might like
强烈推荐:php.ini中文版(1)
2006/10/09 PHP
mysq GBKl乱码
2006/11/28 PHP
解析php取整的几种方式
2013/06/25 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
php中的依赖注入实例详解
2019/08/14 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
彻底搞懂JS无缝滚动代码
2007/01/03 Javascript
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JavaScript实现自动变换表格边框颜色
2015/05/08 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
解决vue的 v-for 循环中图片加载路径问题
2018/09/03 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
python之yield表达式学习
2014/09/02 Python
Python基于tkinter模块实现的改名小工具示例
2017/07/27 Python
python实现批量图片格式转换
2020/06/16 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
python修改FTP服务器上的文件名
2019/09/11 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
初二物理教学反思
2014/01/29 职场文书
美容院考勤制度
2014/01/30 职场文书
离婚财产分配协议书
2014/10/21 职场文书
个人学习总结范文
2015/02/15 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
Github 使用python对copilot做些简单使用测试
2022/04/14 Python