Maison > Article > interface Web > js clic de souris effet de commutation d'image code Sharing_Javascript compétences

js clic de souris effet de commutation d'image code Sharing_Javascript compétences

WBOYoriginal: 2016-05-16 15:42:291535parcourir

L'exemple de cet article décrit l'effet de changement d'image d'un clic de souris js. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Le principe de mise en œuvre est très simple. En fait, plusieurs images sont superposées. Après avoir cliqué sur l'image, chaque image se voit attribuer une classe afin de lui donner l'impression d'être en surface. changement d'images.
Exécution des rendus : ----------------------------------------------- -------------------------------------------------- ---------------

Conseils : Si le navigateur ne fonctionne pas correctement, vous pouvez essayer de changer de mode de navigation.

Le code d'effet de changement d'image du clic de souris js partagé avec vous est le suivant

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js鼠标点击图片切换效果</title>
<style type="text/css">
*{margin:0;padding:0;border:none;outline:none;list-style:none;}
#wrapper {width:280px;margin:20px auto;}
#imageContainer {width:280px;height:280px;position:relative;overflow:hidden;cursor:pointer;}
#imageContainer img {position:absolute;top:0;left:0;z-index:1;}
#imageContainer img.active {z-index:3;}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper">
 <div id="imageContainer">
 <img src="images/01.jpg" class="active" width="280" height="280" />
 <img src="images/02.jpg" width="280" height="280" />
 <img src="images/03.jpg" width="280" height="280" />
 </div>
</div>
<script src="js/jquery.min.js"></script>
<script>
var imageObject = {
 clickSwap : function(obj) {
 obj.click(function() {
 var activeImage = $(this).children('img.active');
 activeImage.removeClass('active');
 if (activeImage.next().length > 0) {
 activeImage.next().addClass('active');
 } else {
 $(this).children('img:first-child').addClass('active');
 }
 return false;
 });
 }
};
$(function() {
 imageObject.clickSwap($('#imageContainer'));
});
</script>
</body>
</html>

Ce qui précède est le code d'effet de changement d'image en cliquant sur la souris js partagé avec vous. J'espère que vous pourrez l'aimer.

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 la sortie automatique de texte (saisie d'effets spéciaux)_compétences javascriptArticle suivant：JavaScript implémente la sortie automatique de texte (saisie d'effets spéciaux)_compétences javascript

Articles Liés

Voir plus