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 相关文章推荐
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 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动态生成静态HTML网页的代码
2010/03/04 PHP
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php实现encode64编码类实例
2015/03/24 PHP
php函数连续调用实例分析
2015/07/30 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
详解vue3中组件的非兼容变更
2021/03/03 Vue.js
[01:33]PWL开团时刻DAY2-开雾与反开雾
2020/10/31 DOTA
Python、Javascript中的闭包比较
2015/02/04 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
Python面向对象之继承代码详解
2018/01/29 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
python求前n个阶乘的和实例
2020/04/02 Python
Python Http请求json解析库用法解析
2020/11/28 Python
HTML5文档结构标签
2017/04/21 HTML / CSS
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
教育学专业毕业生的自我评价
2013/11/21 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
HTML速写之Emmet语法规则的实现
2021/04/07 HTML / CSS
MySQL COUNT函数的使用与优化
2021/05/10 MySQL
python+opencv实现视频抽帧示例代码
2021/06/11 Python