Question

这是我的网站https://therealandy0074.github.io/therealandy0074/，位于github页面并在底部有一个自动滚动图像我希望当鼠标触摸图片时，它会停止滚动我没有在谷歌上找到任何参考，也不知道什么关键字你能告诉我关键字吗？即时通讯使用在way2tutorial.com

中找到的代码

＆＃13;

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left">
    <img src="https://therealandy0074.github.io/therealandy0074/testi/1.jpg" width="120" height="80" alt="Natural" />
  </marquee>
</body>
</html>

＆＃13;

感谢

Answer 1

＆＃13;

$('marquee img').on('click',function(){

    var mysrc= $(this).attr('src');
    
    $('.zoom_img').attr('src','');
    
    $('.zoom_img').attr('src',mysrc);

    $('#myModal').modal('show');
});

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
  <marquee behavior="scroll" direction="left"
            onmouseover="this.stop();"
           onmouseout="this.start();">
           <img src="https://image.flaticon.com/teams/slug/google.jpg" height="100">
           <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTiEEbvzeGDaJ7bULe5vVEMHJp3Mmdk_VbMVteInDQut6u37eMn" height="100">
           <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShcf4OFdDZqZA2qynsdV3PNuMCCne57WTX8jzOzvgmDF9p-ao1qA" height="100">           
  </marquee>
  
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <img src="https://image.flaticon.com/teams/slug/google.jpg" class="zoom_img" width="100%">
        </div>
      </div>
    </div>
  </div>
  
</body>

＆＃13;

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left"
           onmouseover="this.stop();"
           onmouseout="this.start();">Add your images here</marquee>
</body>
</html>

＆＃13;

Answer 2

这是你想要的吗？

<html>
<head>
</head>
<body>
  <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
<img src="../jix/img_nat.png" width="120" height="80" alt="Natural" />
  </marquee>
</body>
</html>

鼠标触摸时停止图像标记

2 个答案: