1. Home
  2. Webサービス
  3. JavaScriptで画像を動かして遊ぼう!!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
サーバーメンテナンスのお知らせ!(2019/05/24~25)

サーバーメンテナンスのお知らせ!(2019/05/24~25)

いつもShopDDおよびNetaGearをご利用いただきありがとうございます。2019年5月24日(金)、5月25日(土)2時AM2:00~AM:6:00頃にサーバーの移転及びメンテナンスを行います。作...

Loctekのガス圧式 液晶モニターアーム D8を使ってみた!

Loctekのガス圧式 液晶モニターアーム D8を使ってみた!

今回紹介するのはLoctek製のガススプリング式(ガス圧式)の液晶モニターアーム D8です。ガススプリング式を採用しており通常の固定式の液晶モニターアームと比較すると、移...

ギガビット対応のLANケーブル延長コネクターを買ってみた!

ギガビット対応のLANケーブル延長コネクターを買ってみた!

先日の記事でダイソーで売っているLANケーブル延長コネクターを購入しましたが、せっかく最大1Gbpsのフレッツ光ネクスト ギガファミリー・スマートタイプを契約しているの...

日本未発売の薄型背面バッテリーmoto modsの「moto power pack」を買ってみた!

日本未発売の薄型背面バッテリーmoto modsの「moto power pack」を買ってみた!

ちょっと前の記事で日本未発売で日本に発送できない商品を購入する方法の例として、Xボーダーを利用して日本未発売の超薄型背面バッテリーmoto modsの「moto power pack」...

HTML+CSSで3D空間を表現した「CSS FPS」がすごい!

HTML+CSSで3D空間を表現した「CSS FPS」がすごい!

今回紹介するのはHTMLとCSSを使ってFPSゲームなどでよくあるような3D空間を表現した技術デモサイトである「CSS FPS」のサイトを紹介したいと思います。HTML+CSSで表現でき...

YouTubeのチャンネル&動画分析ツールの「NoxInfluencer」で分析しよう!

YouTubeのチャンネル&動画分析ツールの「NoxInfluencer」で分析しよう!

今回紹介するのは、YouTubeのチャンネル分析が可能なマーケティングツールである「NoxInfluencer」です。NoxInfluencerを使うことでYouTubeチャンネルランキング、比較、タ...

動画変換やダウンロード、画面録画などが可能なマルチな動画ソフト「VideoProc」!

動画変換やダウンロード、画面録画などが可能なマルチな動画ソフト「VideoProc」!

先日からGWプレゼントキャンペーンでライセンスコードをプレゼントされていたVideoProcですが、今回はそのVideoProcを実際に使ってみたのでレビューを書きたいと思います。...

Vegas Proの手ブレ補正機能の効果を検証してみました!

Vegas Proの手ブレ補正機能の効果を検証してみました!

先日86%オフのキャンペーンで購入したプロ用動画編集ソフトのVegas Proですが、今回はそのVegas Proを使って手ブレしている動画にVegas手ブレ補正プラグインを使って手ブレ...

スマートスピーカーのAmazon Echo Dot第3世代が46%オフの3,240円で販売中!

スマートスピーカーのAmazon Echo Dot第3世代が46%オフの3,240円で販売中!

Amazon Echo Dot 第3世代 スマートスピーカー with Alexaがセール特価でなんと46%オフの大特価で販売中です。販売はAmazonなので送料はもちろん無料です。ちなみにAmazon E...

NetaGear RSS News

Now Loading

Article

JavaScriptで画像を動かして遊ぼう!!

 Webサービス 
JavaScript001.jpg

たくさんの画像があるページで、アドレスバーに以下のJavascriptをコピーして実行すると、画像が面白い動きをします。

※IEの場合セキュリティーで引っかかる可能性がありますが実行しても何の危険もありません。

やり方
1、画像がたくさんあるページに行きます
2、下のJavascriptをコピーしてアドレスバーに入れてEnterを押します。

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

画像を適当に集めておきましたのでここでテストできます!
javascriptテストページ

百聞は一見にしかずということわざがあるように、文章での説明を見るより一回自分で試したほうが分かりやすいですね。Google Imageなどでこれを実行すれば面白いです。元ネタはdiggより
Tag

Related article

COMMENT TO THIS ENTRY

チカチカする~

317

重ねて実行すると動くやつならかなり早くなりましたw

318

このコメントは管理人のみ閲覧できます

319

目が回りますw

6675

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。