ホームページ > ウェブフロントエンド > jsチュートリアル > マウスを上にスライドさせた後に画像を拡大してポップアップするエフェクトの js コード_画像の特殊効果

マウスを上にスライドさせた後に画像を拡大してポップアップするエフェクトの js コード_画像の特殊効果

WBOY
リリース: 2016-05-16 18:06:20
オリジナル
1259 人が閲覧しました
复制代码代码如下:

<script> <br>関数 GetAbsPosition(obj) <br>{ <br>var curleft = 0, curtop = 0; <br>do { <br>curleft = obj.offsetLeft; <br>curtop = obj.offsetTop; <br>} while (obj = obj.offsetParent); <br>return [curleft,curtop]; <br>} <br>function ShowFloatingImage(image, width, height) <br>{ <br>var id = "trailimageid"; <br>var newdiv = document.getElementById(id); <br>if(newdiv == null) <br>{ <br>newdiv = document.createElement('div'); <br>newdiv.setAttribute('id',id); <br>newdiv.setAttribute('onmouseout', "HideElement('" id "');"); <br>document.body.appendChild(newdiv); <br>} <br>newdiv.innerHTML = '<img src=' image.src ' width=' (image.width 幅) ' height=' (image.height 高さ) ' />'; <BR>var absPos = GetAbsPosition(画像); <BR>newdiv.style.position = "絶対"; <BR>newdiv.style.posLeft = absPos[0] - width/2; <BR>newdiv.style.posTop = absPos[1] - 高さ/2; <BR>newdiv.style.display="ブロック"; <BR>} <BR>関数 HideElement(id) <BR>{ <BR>var elem = document.getElementById(id); <BR>elem.style.display="none"; <BR>} <BR></script>

例:
复制代代码如下:

< ;本体>



テストイベント処理が適切ではないため、マウスの移動が元の位置に戻れなくなります。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート