这篇文章主要介绍了 js 实现鼠标经过时图片滚动停止的方法, 可实现 js 滚动特效中的鼠标悬停停止图片滚动的功能, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 js 实现鼠标经过时图片滚动停止的方法。分享给大家供大家参考。具体实现方法如下:
- <!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>
- 鼠标经过时,
- <a href='sitejs-16691-1.html' target='_blank'>
- <u>
- 图片滚动
- </u>
- </a>
- 停止效果
- </title>
- </head>
- <style type="text/CSS">
- <!-- #www_jb51_net { background: #FFF; overflow:hidden; border: 1px dashed
- #CCC; width: 325px; height:245px; } #www_jb51_net img { border: 3px solid
- #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left;
- } #demo2 { float: left; } -->
- </style>
- <body>
- 向左滚动
- <div id="www_jb51_net">
- <div id="indemo">
- <div id="demo1">
- <a href="#">
- <img src="images/m01.jpg" border="0" />
- </a>
- <a href="#">
- <img src="images/m02.jpg" border="0" />
- </a>
- <a href="#">
- <img src="images/m03.jpg" border="0" />
- </a>
- <a href="#">
- <img src="images/m04.jpg" border="0" />
- </a>
- <a href="#">
- <img src="images/m05.jpg" border="0" />
- </a>
- <a href="#">
- <img src="images/m06.jpg" border="0" />
- </a>
- </div>
- <div id="demo2">
- </div>
- </div>
- </div>
- <script>
- < !--
- var speed = 10;
- var tab = document.getElementById("www_jb51_net");
- var tab1 = document.getElementById("demo1");
- var tab2 = document.getElementById("demo2");
- tab2.innerHTML = tab1.innerHTML;
- function Marquee() {
- if (tab2.offsetWidth - tab.scrollLeft <= 0) tab.scrollLeft -= tab1.offsetWidth
- else {
- tab.scrollLeft++;
- }
- }
- var MyMar = setInterval(Marquee, speed);
- tab.onmouseover = function() {
- clearInterval(MyMar)
- };
- tab.onmouseout = function() {
- MyMar = setInterval(Marquee, speed)
- }; -->
- </script>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: