兼容多浏览器的字幕特效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 相关文章推荐
解密效果
Jun 23 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
简单的代码实现jquery定时器
Nov 17 Javascript
jquery实现放大镜简洁代码(推荐)
Jun 08 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
动态Axios的配置步骤详解
Jan 12 Javascript
vue的全局提示框组件实例代码
Feb 26 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
微信小程序与后台PHP交互的方法实例分析
Dec 10 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
js实现详情页放大镜效果
Oct 28 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
模拟flock实现文件锁定
2007/02/14 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
PHP浮点数精度问题汇总
2015/05/13 PHP
YII框架常用技巧总结
2019/04/27 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
Vue2路由动画效果的实现代码
2017/07/10 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
easyui下拉框动态级联加载的示例代码
2017/11/29 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python代码调试的几种方法总结
2015/04/15 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python编程实现的图片识别功能示例
2017/08/03 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
详解Django-channels 实现WebSocket实例
2019/08/22 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
python 变量初始化空列表的例子
2019/11/28 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
如何学习Python time模块
2020/06/03 Python
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
Stubhub英国:购买体育、演唱会和剧院门票
2018/06/10 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
电子专业推荐信范文
2013/11/18 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
学校端午节活动总结
2015/02/11 职场文书
2015年党建工作总结
2015/03/30 职场文书
使用HttpSessionListener监听器实战
2022/03/17 Java/Android