Maison > interface Web > js tutoriel > le corps du texte

Code d'implémentation pour javascript pour contrôler les compétences de lecture d'image_javascript

WBOY
Libérer: 2016-05-16 15:47:21
original
1034 Les gens l'ont consulté

Il est généralement difficile d'utiliser la souris pour contrôler l'effet de défilement des images. Les grandes sections de code rendent le démarrage difficile pour les novices. Je vais maintenant écrire un simple javascript pour contrôler l'effet de défilement des images. Le code est concis et clair et est compatible avec les navigateurs IE, Firefox et Google.

Partagez le code comme suit :

<!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>
Copier après la connexion

Opération de rendu :

Ce qui précède est l'effet du javascript contrôlant le défilement des images. J'espère que vous l'aimerez.

source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!