単純な画像反転を実装する JavaScript メソッド_JavaScript スキル-jsチュートリアル-php.cn

単純な画像反転を実装する JavaScript メソッド_JavaScript スキル

WBOY

リリース： 2016-05-16 16:03:22

オリジナル

1387 人が閲覧しました

この記事の例では、JavaScript を使用して簡単な画像反転を実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

ここに、smirk1.jpg と smirk2.jpg という名前の同じサイズの 2 つの画像があります
次に、次のコードを実行して、単純な画像反転を実現します

<script type="text/javascript">
var revert = new Array();
var inames = new Array('smirk');
// Preload
if (document.images) {
 var flipped = new Array();
 for(i=0; i< inames.length; i++) {
  flipped[i] = new Image();
  flipped[i].src = ""+inames[i]+"2.JPG";
 }
}
function over(num) {
 if(document.images) {
  revert[num] = document.images[inames[num]].src;
  document.images[inames[num]].src = flipped[num].src;
 }
}
function out(num) {
 if(docu <script type="text/javascript">
var revert = new Array();
var inames = new Array('smirk');
// Preload
if (document.images) {
 var flipped = new Array();
 for(i=0; i< inames.length; i++) {
  flipped[i] = new Image();
  flipped[i].src = ""+inames[i]+"2.JPG";
 }
}
function over(num) {
 if(document.images) {
  revert[num] = document.images[inames[num]].src;
  document.images[inames[num]].src = flipped[num].src;
 }
}
function out(num) {
 if(document.images) document.images[inames[num]].src = revert[num];
}
</script>

ログイン後にコピー

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。