JavaScript + Ajax 実践サンプル集

ドロップインウィンドウ(1)

説明補足説明コード分割コードコメント投稿

このサンプルは、画面の上からウィンドウが落ちてきてバウンドします。Webページに広告、メルマガ勧誘、ニュースなどを表示するときに利用すると便利です。

メルマガ登録！ (ドラッグ＆リサイズ可)

苗字
メール

このメルマガを購読すると、新着サンプルの情報を受け取ることができます。「苗字」と「メールアドレス」を入力したら[登録]ボタンをクリックしてください。このウィンドウは、任意の場所に移動したりリサイズすることができます。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dropin Window</title>
<style type="text/css">
body { font-size:small;}
  
#dropin {
  position:absolute; 
  padding:10px;  
  visibility:hidden; 
  left:200px; 
  top:100px; 
  width:300px; 
  height:95px; 
  
  border-left:1px solid #804000;    
  border-top:1px solid #804000;   
  border-bottom:1px solid #ffc080;    
  border-right:1px solid #ffc080;   
  background:#ff9900;    
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFff9900', EndColorStr='#FFfbeebb');  
   
}

#close {
	float:right;   
	font-size:smaller; 
}
</style>
<script type="text/javascript">
var ie=document.all;
var dom=document.getElementById;
var ns4=document.layers;
var calunits=document.layers? "" : "px";

var bouncelimit=32; //8の倍数
var direction="up";

function initbox(){
  if (!dom&&!ie&&!ns4)
    return;
  crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin;
  scroll_top=(ie)? truebody().scrollTop : window.pageYOffset;
  crossobj.top=scroll_top-250+calunits;
  crossobj.visibility=(dom||ie)? "visible" : "show";
  dropstart=setInterval("dropin()",50);
}

function dropin(){
  scroll_top=(ie)? truebody().scrollTop : window.pageYOffset;
  if (parseInt(crossobj.top)<100+scroll_top)
    crossobj.top=parseInt(crossobj.top)+40+calunits;
  else{
    clearInterval(dropstart);
    bouncestart=setInterval("bouncein()",50);
  }
}

function bouncein(){
  crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits;
  if (bouncelimit<0)
    bouncelimit+=8;
  bouncelimit=bouncelimit*-1
  if (bouncelimit==0){
    clearInterval(bouncestart);
  }
}

function dismissbox(){
  if (window.bouncestart) clearInterval(bouncestart)
    crossobj.visibility="hidden";
}

function truebody(){
  return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

window.onload=initbox;
</script>  
</head>
<body>
<div id="dropin">
  <h3>ウィンドウの見出し</h3>
  <p>
   このウィンドウには、 新着情報、新商品、告知、ニュース、メルマガ勧誘、広告などを掲載することができます。
  </p>
  <div id="close">
    <a href="#" onclick="dismissbox();return false">[閉じる]</a>
  </div>
</div>
</body>
</html>

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
body { font-size:small;}
  
#dropin {
  position:absolute; 
  padding:10px;  
  visibility:hidden; 
  left:200px; 
  top:100px; 
  width:300px; 
  height:130px; 
  
  border-left:1px solid #804000;    
  border-top:1px solid #804000;   
  border-bottom:1px solid #ffc080;    
  border-right:1px solid #ffc080;   
  background:#ff9900;    
  filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#FFff9900', EndColorStr='#FFfbeebb');  
   
}

#close {
	float:right;   
	font-size:smaller; 
}

このサンプルを編集して試してみる!

ドロップインウィンドウのサイズと表示する位置は、スタイルシート(CSS)で指定します。

#dropin {     
  left:200px;    
  top:100px;    
  width:300px;    
  height:130px; 
}

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中...

ドロップインウィンドウ(1)