ホームページ >ウェブフロントエンド >jsチュートリアル >JS は、クリックして展開したり閉じたりできる左側の広告コードを実装します_javascript スキル
JS は、クリックして展開したり閉じたりできる左側の広告コードを実装します_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:40:571239ブラウズ
この記事の例では、クリックして展開したり閉じたりできる左側の広告コードの JS 実装について説明します。皆さんの参考に共有してください。詳細は以下の通りです。
ここで紹介するのは、Webページ上でクリックすると展開したり閉じたりできる左側の広告コードのJS実装です。パフォーマンスはカプレット広告と似ていますが、クリックしたときの動作方法が異なります。画面の左側に非表示になっていますが、完全に非表示になっているわけではありません。垂直の画像バーを使用して広告を表示し、[表示] をクリックすると広告が再度表示されます。この種の広告は、ユーザー エクスペリエンスを向上させることができます。ウェブページ。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/js-click-show-close-style-adv-codes/
具体的なコードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>网页上可点击展开、关闭的左侧广告代码</title>
</head>
<body>
<div id="Bar1190_big" style="position:absolute;z-index:9;top:10px;left:0px;width:100px;height:300px;">
<div id="AD1190" style="width:100px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="100" height="300" src="images/2401.jpg" alt="" border="0"></a>
</div>
<div style="height:18px;width:100px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_hidden()">关 闭</a>
</div>
</div>
<div id="Bar1190_small" style="position:absolute;z-index:9;top:10px;display:none;left:0px;width:20px;height:300px;">
<div id="AD1190" style="width:20px;height:300px;text-align:center;float:none" class="adSpace">
<a href="#" target="_blank"><img width="25px" height="300" src="images/2402.jpg" alt="" border="0"></a>
</div>
<div style="height:18px;width:25px;background:#CCCCCC;text-align:right;line-height:18px;">
<a style="font-size:12px;cursor:pointer;" onClick="bar1190_show()">展开</a>
</div>
</div>
<script type="text/javascript">
function bar1190_show(){
document.getElementById('Bar1190_big').style.display='';
document.getElementById('Bar1190_small').style.display='none';
}
function bar1190_hidden(){
document.getElementById('Bar1190_big').style.display='none';
document.getElementById('Bar1190_small').style.display='';
}
var autohide1190 = setTimeout("bar1190_hidden()",6000);
</script>
</body>
</html>
この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。