js Mausklick Bildwechseleffektcode Sharing_Javascript-Kenntnisse-js-Tutorial-php.cn

js Mausklick Bildwechseleffektcode Sharing_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:42:29

Original

1556 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt den js-Mausklick-Bildwechseleffekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Das Implementierungsprinzip ist sehr einfach. Nach dem Klicken auf das Bild wird jedem Bild eine Klasse zugewiesen, damit es so aussieht, als ob es auf der Oberfläche wäre Wechseln von Bildern.
Laufende Renderings: ------------------ -------------------------------------------------- ---------------

Tipps: Wenn der Browser nicht richtig funktioniert, können Sie versuchen, den Browsermodus zu wechseln.

Der mit Ihnen geteilte js-Mausklick-Bildwechseleffektcode lautet wie folgt

<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>

Nach dem Login kopieren

Das Obige ist der mit Ihnen geteilte js-Mausklick-Bildwechseleffektcode. Ich hoffe, er gefällt Ihnen.