A股上市公司传智教育（股票代码 003032）旗下技术交流社区北京昌平校区

传智教育官网黑马程序员官网

 找回密码
 加入黑马

QQ登录

只需一步，快速开始

论坛首页 › 隐藏归类 › 黑马那些年 › 第4届ASP.Net+Unity3D技术交流区 › 正文

滚动停止问题？

© 唐兰文 中级黑马   /  2012-7-31 11:25  /  1333 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

我想做这样一个功能：图片在页面上滚动，当我把鼠标放在上面的时候图片停止滚动，当移开鼠标的时候图片又开始滚动，怎么实现，谢谢大家！

3 个回复

正序浏览
蔡尚猛 中级黑马 2012-7-31 12:24:32
| 只看该作者
板凳
希望对你有帮助
  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>
复制代码
回复 使用道具 举报
ARMdong 中级黑马 2012-7-31 11:59:59
| 只看该作者
藤椅
要实现这个功能，那么你就要学习javascript相关知识了，鼠标移到图片上方触发一个stop()方法，鼠标移开后触发start()方法，楼上的哥们写的代码能实现你的需求。
回复 使用道具 举报
许庭洲 黑马帝 2012-7-31 11:45:46
| 只看该作者
沙发
用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>
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 加入黑马