ホームページ > ウェブフロントエンド > jsチュートリアル > マウスの動きに追従し、閉じる関数を備えた画像広告の js 実装_javascript スキル

マウスの動きに追従し、閉じる関数を備えた画像広告の js 実装_javascript スキル

WBOY
リリース: 2016-05-16 16:12:55
オリジナル
1097 人が閲覧しました

この記事の例では、マウスの動きに追従し、閉じる関数を持つイメージ広告を js で実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

コードをコピー コードは次のとおりです:


<頭>
マウスの動きに追従し、閉じる機能を備えたイメージ広告




の間に次のコードを追加します。 <スクリプトタイプ="text/javascript">
// 関数 badAD(html){
var ad=document.body.appendChild(document.createElement('div'));
ad.style.cssText="border:1px ソリッド #000;background:#FFF;position:absolute;padding:24px 4px 4px 4px;font: 12px/1.5 verdana;";
ad.innerHTML=html||'これは悪い考えです!';
var c=ad.appendChild(document.createElement('span'));
c.innerHTML="×";
c.style.cssText="position:absolute;right:2px;top:2px;cursor:pointer";
c.onclick=function(){
document.onmousemove=null;
This.parentNode.style.left='-99999px'
};
Document.onmousemove=function (e){
e=e||window.event;
var x=e.clientX,y=e.clientY;
setTimeout(function() {
if(ad.hover)return;
ad.style.left=x 5 'px';
ad.style.top=y 5 'px';
},120)
}
ad.onmouseover=function(){
This.hover=true
};
ad.onmouseout=function(){
This.hover=false
}
}
badAD('')
//]]>


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

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