js clic de souris effet de commutation d'image code Sharing_Javascript compétences-js tutoriel-php.cn

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

WBOY

Libérer： 2016-05-16 15:42:29

original

1608 Les gens l'ont consulté

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>

Copier après la connexion

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.