Implementation code for javascript to control image playback

Implementation code for javascript to control image playback_javascript skills

WBOY

Release： 2016-05-16 15:47:21

Original

1035 people have browsed it

It is generally troublesome to use the mouse to control the scrolling effect of images. Large sections of code make it difficult for novices to start. Now I will write a simple javascript to control the scrolling effect of images. The code is concise and clear, and is compatible with IE, Firefox and Google browsers.

Share the code as follows:

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

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

<body>

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

</body>

</html>

Copy after login

Operation rendering: