黑马程序员技术交流社区

标题: 滚动停止问题？ [打印本页]
作者: 唐兰文    时间: 2012-7-31 11:25
标题: 滚动停止问题？
我想做这样一个功能：图片在页面上滚动，当我把鼠标放在上面的时候图片停止滚动，当移开鼠标的时候图片又开始滚动，怎么实现，谢谢大家！
作者: 许庭洲    时间: 2012-7-31 11:45
用JS实现：
<script>
<!--
var speed=10;
var tab=document.getElementById("www_zzjs_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>
作者: ARMdong    时间: 2012-7-31 11:59
要实现这个功能，那么你就要学习javascript相关知识了，鼠标移到图片上方触发一个stop()方法，鼠标移开后触发start()方法，楼上的哥们写的代码能实现你的需求。
作者: 蔡尚猛    时间: 2012-7-31 12:24
希望对你有帮助
  1. <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
  2. <head>
  3. <title>滚动</title>
  4. </head>
  5. <body>
  6.     <table width="700">                                                                                       
  7.                 <tr>
  8.                         <td>
  9.                                   <div id="img" style="overflow:hidden;height:120px;width:700px;">
  10.                                           <table align="left" >
  11.                                                 <tr>
  12.                                                         <td id="img1" valign="top">
  13.                                                                   <table >
  14.                                                                          <tr>
  15.                                                                                  <td>
  16.                                                                                          <img src="" width="150"  hspace=22>
  17.                                                                                 </td>
  18.                                                                                   <td>
  19.                                                                                           <img src="" width="150"  hspace=22>
  20.                                                                                 </td>
  21.                                                                                   <td>
  22.                                                                                         <img src="" width="150"  hspace=22>
  23.                                                                                 </td>
  24.                                                                                   <td>
  25.                                                                                           <img src="" width="150" hspace=22>
  26.                                                                                 </td>
  27.                                                                                   <td>
  28.                                                                                         <img src="" width="150"  hspace=22>
  29.                                                                                 </td>
  30.                                                                           </tr>
  31.                                                                   </table>
  32.                                                         </td>
  33.                                                         <td id="img2" valign="top">
  34.                                                         </td>
  35.                                                 </tr>
  36.                                         </table>
  37.                                 </div>
  38.                         </td>
  39.                 </tr>                                 
  40.         </table>
  41.    <script type="text/javascript">
  42.           var speed=10//速度数值越大速度越慢
  43.           img2.innerHTML=img1.innerHTML
  44.           function Marquee(){
  45.                           if(img2.offsetWidth-img.scrollLeft<=0){
  46.                                           img.scrollLeft-=img1.offsetWidth
  47.                         }
  48.                           else{
  49.                                           img.scrollLeft++
  50.                           }
  51.     }
  52.        
  53.        
  54.     var MyMar=setInterval(Marquee,speed)
  55.        
  56.        
  57.     img.onmouseover=function() {
  58.                 clearInterval(MyMar)
  59.         }
  60.        
  61.        
  62.           img.onmouseout=function() {
  63.                   MyMar=setInterval(Marquee,speed)
  64.           }
  65.   </script>
  66. </body>
  67. </html>
复制代码




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2