兼容多浏览器的字幕特效Marquee的通用js类


Posted in Javascript onJuly 20, 2008

Marquee.js

参数说明:  
demo  字幕区域标签(div)的ID; 
demo1/demo2  显示内容标签(div或td)的ID   demo1为原始内容,demo2是它的拷贝;  
direction 字幕方向(up,down,left,right) ; 
delay 字幕播放的延迟时间(毫秒); 
step 字幕播放的步长(即pix,步长越小,如step=1,滚动越平滑)

function Marquee (demo, demo1, demo2, direction, delay, step)
{
 direction = direction.toLowerCase();

 if(((direction == "up" || direction == "down") && ($(demo1).offsetHeight > $(demo).offsetHeight)) || ((direction == "left" || direction == "right") && ($(demo1).offsetWidth > $(demo).offsetWidth)))
 {
  $(demo2).innerHTML = $(demo1).innerHTML;
  if(direction == "down")
   $(demo).scrollTop = 2 * $(demo1).offsetHeight - $(demo).offsetHeight;
  if(direction == "right")
   $(demo).scrollLeft = 2 * $(demo1).offsetWidth - $(demo).offsetWidth;
 }
 else
  return;

 var flag = true;
 var speed = delay == null? 1 : parseInt(delay);
 var amount = step == null? 1 : parseInt(step);

 var Marquee = function ()
 {
  switch(direction)
  {
   case "up":
    if($(demo2).offsetTop - $(demo).scrollTop <= 0)
     $(demo).scrollTop -= $(demo1).offsetHeight;
    else
     $(demo).scrollTop += amount;
    break;
   case "down":
    if($(demo1).offsetTop - $(demo).scrollTop >= 0)
     $(demo).scrollTop += $(demo2).offsetHeight;
    else
     $(demo).scrollTop -= amount;
    break;
   case "left":
    if($(demo2).offsetWidth - $(demo).scrollLeft <= 0)
     $(demo).scrollLeft -= $(demo1).offsetWidth;
    else
     $(demo).scrollLeft += amount;
    break;
   case "right":
    if($(demo).scrollLeft <= 0)
     $(demo).scrollLeft += $(demo2).offsetWidth;
    else
     $(demo).scrollLeft -= amount;
    break;
   default:break;
  }
 }

 var timer = setInterval(Marquee,speed);

 var play = function ()
 {
  if(flag)
  {
   clearInterval(timer);
   timer = setInterval(Marquee, speed);
  }
 }

 $(demo).onmouseover = function ()
 {
  if(flag)
   clearInterval(timer);
 }

 $(demo).onmouseout = function ()
 {
  if(flag)
   timer = setInterval(Marquee, speed);
 }

 this.delay = function (s)
 {
  speed = s == null? 50 : parseInt(s);
  play();
 }

 this.step = function (s)
 {
  amount = s == null? 1 : parseInt(s);
  play();
 }

 this.start = function ()
 {
  if(!flag)
  {
   flag = true;
   play();
  }
 }

 this.stop = function ()
 {
  if(flag)
  {
   flag = false;
   clearInterval(timer);
  }
 }

 this.direction = function (s)
 {
  s = s.toLowerCase();
  if( s == direction )
   return;
  if(s == "down" && direction == "up" )
   direction = s;
  if(s == "up" && direction == "down")
   direction = s;
  if(s == "right" && direction == "left")
   direction = s;
  if(s == "left" && direction == "right")
   direction = s;
  if (s == direction)
   play();
 }
}

 上面js里用到的$或$F,如果你用过prototype.js的话,把它添加进去就行了; 否则你需要先引用下面的js文件: Ruby.js  (从prototype.js里截过来的 呵呵)

function Ruby ()
{
}

if (!Array.prototype.push) { 
  Array.prototype.push = function() { 
      var startLength = this.length; 
      for (var i = 0; i < arguments.length; i++) 
      this[startLength + i] = arguments[i]; 
     return this.length; 
  } 
}

$ = function ()
{
  var elements = new Array(); 

  for (var i = 0; i < arguments.length; i++) { 
    var element = arguments[i]; 
    if (typeof element == ''string'') 
      element = document.getElementById(element); 

    if (arguments.length == 1) 
      return element; 

    elements.push(element); 
  } 

  return elements;
}

$F = function ()
{
 if(arguments.length == 1)
  return document.getElementById(arguments[0]).value;
 else
 {
  var elements = new Array();
  for(var i = 0;i< arguments.length; i++)
  {
   elements.push(document.getElementById(arguments[i]).value);
  }
  return elements;
 }
}

 到这里,js文件已经搞定了,开始写HTML代码:

(1)先添加css样式,如果你不想滚动字幕里的内容被无故撑大的话(有时候)
<style>
.wrap{word-break:break-all;overflow:hidden}
</style>

(2)添加js文件  -->用了prototype.js的更好,替换掉Ruby.js   :)
<script src="Ruby.js"></script>
<script src="Marquee.js"></script>

(3)添加字幕区域内容
1. 向上或向下滚动    

<div id="d1" style="overflow:hidden;height:200px;width:90px">
   <div id="d11" width="100%" class="wrap">
    =顶部=<br>动感地带资费攻略1 动感地带资费攻略2<br>=底部=
   </div>
   <div id="d12" width="100%" class="wrap"></div>
  </div>
  <script>var obj1 = new Marquee("d1","d11","d12","up");</script>
由于字幕d1的height=200,而d11的内容高度不足200,故字幕默认不会滚动,要实现滚动的话,只需d11的height>200就行了,故只需在d11的里面再放个空div就行了,让它的height=200; 如果d11的内容高度大于了200px,则字幕区域d1将无间断滚动

2. 向左或向右滚动

<div id="d2" style="overflow:hidden;width:500">
  <table>
   <tr>
    <td id="d21">
     <nobr>
      [开始]动感地带资费攻略1 动感地带资费攻略2 动感地带资费攻略3 动感地带资费攻略4 动感地带资费攻略5 动感地带资费攻略6 动感地带资费攻略7 动感地带资费攻略8 动感地带资费攻略9 动感地带资费攻略10 动感地带资费攻略11 动感地带资费攻略12 动感地带资费攻略13 动感地带资费攻略14 动感地带资费攻略15 动感地带资费攻略16 动感地带资费攻略17 动感地带资费攻略18 动感地带资费攻略19 动感地带资费攻略20[结束] 
     </nobr>
    </td>
    <td id="d22"></td>
   </tr>
  </table>
 </div>
 <script>var obj2 = new Marquee("d2","d21","d22","left");</script>

实现原理同上,至于为什么这里要用table而不用div,是因为div在默认情况只能判断height,而不能判断width,而table却恰恰相反,上面用到的nobr标签也是必需的,防止字幕自动换行!

附:  更改延迟播放速度 obj2.delay(50); 或 obj2.delay("50");

更改播放步长

obj2.step(50); 或 obj2.step("50");

停止播放 obj2.stop();  继续播放 obj2.start();

更改播放方向(同类型方向)

obj2.direction("right");

Javascript 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
通用javascript脚本函数库 方便开发
Oct 13 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
May 25 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
vue treeselect获取当前选中项的label实例
Aug 31 Javascript
基于vue实现微博三方登录流程解析
Nov 04 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
js停止输出代码
Jul 20 #Javascript
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 #Javascript
javascript 获取网页参数系统
Jul 19 #Javascript
javascript import css实例代码
Jul 18 #Javascript
番茄的表单验证类代码修改版
Jul 18 #Javascript
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 #Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 #Javascript
You might like
php防注
2007/01/15 PHP
PHP中for循环语句的几种变型
2007/03/16 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
给artDialog 5.02 增加ajax get功能详细介绍
2012/11/13 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
Vue.js样式动态绑定实现小结
2019/01/24 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
毕业自我评价范文
2013/11/17 职场文书
英语演讲稿范文
2014/01/03 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
婚庆司仪主持词
2014/03/15 职场文书
安全例会汇报材料
2014/08/23 职场文书
地球物理学专业推荐信
2014/09/08 职场文书
JS Canvas接口和动画效果大全
2021/04/29 Javascript