ホームページ >ウェブフロントエンド >jsチュートリアル >ネイティブの js_javascript スキルで書かれた虫眼鏡効果

ネイティブの js_javascript スキルで書かれた虫眼鏡効果

WBOYオリジナル: 2016-05-16 17:50:32968ブラウズ

私の一般的なアイデアは、マウスの座標を常に監視することです。マウスが動くと、透明なレイヤーもマウスとともに動き、大きな画像も透明なレイヤーの動きに連動して動きます。早速、コードを見てみましょう。

<メタ名="説明" content="">
/*リセット{*/
html{ color:#000;background:#fff;}
body,div{padding:0;margin:0;}
img{border:none;}
/*}リセット*/
.outer{幅:200px;高さ:150px;位置:相対;マージン:20px自動;}
.inner{幅:80px;高さ:60px;背景:#f55;位置:絶対;不透明度:0.5;フィルター: alpha(opacity=50);left:0;top:0;cursor:pointer;}
.aa{width:320px;height:240px;position:relative;border:1px redsolid;margin:20px auto;オーバーフロー :hidden;}
.imgs{position:absolute;}
.outer img{width:200px;height:150px;}

>