www.baike369.com
百科369 > JS教程 > JavaScript使用marquee类制作文字或图片的滚动效果

JavaScript使用marquee类制作文字或图片的滚动效果


JavaScript使用marquee类制作文字或图片的滚动效果

文字或图片滚动的效果和滑动一样。


实例

下面是一个实现文字和图片的滑动效果的例子。源代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript使用marquee类制作文字或图片的滚动效果实例-www.baike369.com</title>
<script type="text/javascript">
<!--
function $(id)
{
  // 获取控件的ID
  return document.getElementById(id);
}
// 制作一个自定义的marquee类
function marquee(time,oDiv,oLtd,oRtd)
{
  /*
  time 值越大速度越慢
  oDiv 最外层div
  oLtd 左边的td
  oRtd 右边的td
  */
  var timer,width=oLtd.offsetWidth;
  function move()
  {
    // 当滚动条移动到最后时,重新开始
    if(oDiv.scrollLeft>=width)
    {
      oDiv.scrollLeft=0;
    }else{
      oDiv.scrollLeft++; // 一直滚动
    }
  }
  // 左侧内容转移到右侧
  oRtd.innerHTML=oLtd.innerHTML;
  oDiv.style.overflow="hidden"; // 隐藏最外层div
  oRtd.style.width=oLtd.offsetWidth; // 右侧td的宽度
  oDiv.onmouseover=function(){ // 鼠标移动过来的事件
    window.clearInterval(timer); // 清空定时器 - 停止滚动
  }
  oDiv.onmouseout=function(){
    // 鼠标移走便开始滚动
    timer=window.setInterval(move,time);
  }
  // 开始滚动
  timer=window.setInterval(move,time);
}
window.onload=function(){
  new marquee(25,$("myDiv"),$("myTd1"),$("myTd2"));
}
-->
</script>
</head>
<body>
<!--设置显示的宽度-->
<div id="myDiv" style="border:#ccc 1px dashed;width:300px;">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="myTd1">
<!--注意这里的宽度必须设置,并且要设置为具体值-->
<table width="342" cellspacing="0" cellpadding="0">
<tr align="center">
<td>左边</td><td>右边</td>
<td>左边</td><td><img src="image1.jpg" /></td>
</tr>
</table>
</td>
<td id="myTd2"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

显示效果如下:

JavaScript使用marquee类制作文字或图片的滚动效果实例

Copyright© 2011-2016 www.baike369.com All Rights Reserved