javascript實現控制圖片播放的程式碼分享-js教程-PHP中文網

javascript實現控制圖片播放的程式碼分享

巴扎黑

發布： 2017-09-06 10:21:13

原創

1257 人瀏覽過

一般实现用鼠标控制图片的滚动效果都比较麻烦，大段大段的代码让新手头疼无从下手，下面我来写个简单的javascript控制图片滚动的效果。代码简洁明了，兼容ie、firefox和google浏览器。

分享代码如下：

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml">

&lt;head>
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
&lt;title>javascript控制图片或p层的上下移动滚动效果&lt;/title>
&lt;/head>

&lt;body>

&lt;a href="javascript: void(0);" onmouseover="ScrollpUp_T=setInterval(ScrollpUp,10);" onmouseout="clearInterval(ScrollpUp_T)">上&lt;/a>
&lt;p id="items" style="margin:5px 0px 5px 0px;width:100px;height:200px;border:1px solid #dddddd;overflow:hidden">
  图片1...&lt;br />
  图片2...&lt;br />
  图片3...&lt;br />
  图片4...&lt;br />
  图片5...&lt;br />
  图片6...&lt;br />
  图片7...&lt;br />
  图片8...&lt;br />
  图片9...&lt;br />
  图片10...&lt;br />
  图片11...&lt;br />
  图片12...&lt;br />
  图片13...&lt;br />
  图片14...&lt;br />
  图片15...&lt;br />
  图片16...&lt;br />
  图片17...&lt;br />
  图片18...&lt;br />
  图片19...&lt;br />
  图片20...
&lt;/p>
&lt;a href="javascript: void(0);" onmouseover="ScrollpDown_T=setInterval(ScrollpDown,10);" onmouseout="clearInterval(ScrollpDown_T)">下&lt;/a>
&lt;script language="javascript">
  function ScrollpUp(){document.getElementById("items").scrollTop -= 1;}
  function ScrollpDown(){document.getElementById("items").scrollTop += 1;}
&lt;/script>

&lt;/body>

&lt;/html>

登入後複製

运行效果图：