软件学堂

网游分类软件分类

JS代码实现文字滑动效果

2012-10-20 来源:网络

【实例名称】

文字滑动

【实例描述】

文字滑动和文字滚动的效果一样,本例提供一种自定义marquee类的方式,实现一段文字的滑动效果。

【实例代码】

   

<html> <head> <script type="text/javascript"> function $(id) { return document.getElementById(id);             //获取控件的ID } function marquee(time, oDiv, oLtd, oRtd)        //制作一个marquee类 {     /*     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:#CCCCCC 1px dashed; width:300px;"><!--设置显示的宽度-->   <table cellspacing="0" cellpadding="0">     <tbody>       <tr>         <td id="myTd1">           <table width="342" cellpadding="0" cellspacing="0"><!--注意这里的宽度必须设置,并且要设置为具体值-->             <tr align="center">               <td>左边</td>               <td>右边</td>               <td>左边</td>               <td>右边</td>             </tr>           </table>         </td>         <td id="myTd2"></td>       </tr>     </tbody>   </table> </div> </body> </html>

【运行效果】

运行效果

【难点剖析】

本例的重点是自定义的marquee类,其中定义了marquee的“onmouseover”、“omnoIIseout”事件和“move”方法。通过此类可轻松实现文字或图片的滑动效果。

【源码下载】

本实例JS代码下载

上一篇:JS代码实现文字滚动
下一篇:JS代码实现文字跳动特效

相关文章