Javascript implements code sharing to control image playback-JS Tutorial-php.cn

Javascript implements code sharing to control image playback

巴扎黑

Release： 2017-09-06 10:21:13

Original

1319 people have browsed it

一般实现用鼠标控制图片的滚动效果都比较麻烦，大段大段的代码让新手头疼无从下手，下面我来写个简单的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>

Copy after login

运行效果图：

The above is the detailed content of Javascript implements code sharing to control image playback. For more information, please follow other related articles on the PHP Chinese website!