Maison > Article > interface Web > Javascript implémente le partage de code pour contrôler la lecture des images

Javascript implémente le partage de code pour contrôler la lecture des images

巴扎黑original: 2017-09-06 10:21:131267parcourir

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

运行效果图：

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Javascript implémente le menu de personnalisation du clic droit de la sourisArticle suivant：Javascript implémente le menu de personnalisation du clic droit de la souris

Articles Liés

Voir plus