Rumah > Artikel > hujung hadapan web > js klik tetikus menukar imej kesan perkongsian kod_kemahiran javascript

js klik tetikus menukar imej kesan perkongsian kod_kemahiran javascript

WBOYasal: 2016-05-16 15:42:291533semak imbas

Contoh dalam artikel ini menerangkan kesan penukaran imej klik tetikus js. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Prinsip pelaksanaannya sangat mudah. Malah, beberapa gambar ditindih selepas mengklik pada gambar, setiap gambar diberikan kelas untuk menjadikannya kelihatan seperti di permukaan penukaran gambar.
Penyampaian berjalan: ------------------------------------------------- ------------------------------------------------- ---------------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.

Kod kesan penukaran imej klik tetikus js yang dikongsi dengan anda adalah seperti berikut

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

Di atas ialah kod kesan penukaran imej klik tetikus yang dikongsi dengan anda.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript melaksanakan output teks automatik (menaip kesan khas)_kemahiran javascriptArtikel seterusnya：JavaScript melaksanakan output teks automatik (menaip kesan khas)_kemahiran javascript

Artikel berkaitan

Lihat lagi