jsマウスクリック画像切り替えエフェクトコード共有_javascriptスキル-jsチュートリアル-php.cn

jsマウスクリック画像切り替えエフェクトコード共有_javascriptスキル

WBOY

リリース： 2016-05-16 15:42:29

オリジナル

1576 人が閲覧しました

この記事の例では、js のマウスクリックによる画像切り替え効果について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
実際、実装原理は非常に単純です。画像をクリックすると、各画像が表面上にあるように見えるように重ね合わされます。写真の切り替え。
レンダリングの実行: -------------------------------------- -------------------------------------------------- ---------------

ヒント: ブラウザが正常に動作しない場合は、閲覧モードを切り替えてみてください。

あなたに共有されたjsマウスクリック画像切り替えエフェクトコードは次のとおりです

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

ログイン後にコピー

上記は、js マウスクリック画像切り替えエフェクトのコードです。気に入っていただければ幸いです。