Heim > Artikel > Web-Frontend > js Mausklick Bildwechseleffektcode Sharing_Javascript-Kenntnisse

js Mausklick Bildwechseleffektcode Sharing_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:42:291535Durchsuche

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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript implementiert die automatische Textausgabe (Eingabe von Spezialeffekten)_Javascript-FähigkeitenNächster Artikel：JavaScript implementiert die automatische Textausgabe (Eingabe von Spezialeffekten)_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen