Webページ上部からポップアップレイヤーが落ちてくる効果を実現するJSメソッド

ホームページ

ウェブフロントエンド

jsチュートリアル

Webページ上部からポップアップレイヤーが落ちてくる効果を実現するJSメソッド_javascriptスキル

May 16, 2016 pm 03:46 PM

js ポップアップレイヤー

この記事の例では、JS を使用して Web ページの上部から落ちるポップアップレイヤーの効果を実現する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

ここで紹介するJavaScriptアニメーション背景ポップアップレイヤーは、Webページの上部から落ちてくるような感覚を実現することができ、停止時にアニメーションポップアップレイヤーを上から下へ表示するという意味もあります。閉じる機能があり、美化されていませんが、使用すると美化が始まり、良いと思いました。

操作効果は以下の通りです:

具体的なコードは次のとおりです:

&lt;HTML&gt;&lt;HEAD&gt;&lt;TITLE&gt;窗口从上掉下来&lt;/TITLE&gt;
&lt;/HEAD&gt;
&lt;BODY bgColor=#fef4d9&gt;
&lt;CENTER&gt;
 &lt;span class="STYLE1"&gt;窗口从上掉下来&lt;/span&gt;
&lt;/CENTER&gt;&lt;BR&gt;
&lt;CENTER&gt;
&lt;TABLE borderColor=#00FFFF border=5 borderlight="green"&gt;
 &lt;TBODY&gt;
 &lt;TR&gt;
  &lt;TD align=middle&gt;&lt;span class="STYLE2"&gt;效果显示&lt;/span&gt;&lt;/TD&gt;
 &lt;/TR&gt;
 &lt;TR&gt;
  &lt;TD align=middle&gt;
&lt;SCRIPT language=JavaScript1.2&gt;
var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var bouncelimit=32 //(must be divisible by 8)
var curtop
var direction="up"
var boxheight=''
function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)&#63;document.getElementById("dropin").style : ie&#63; document.all.dropin : document.dropin
scroll_top=(ie)&#63; document.body.scrollTop : window.pageYOffset
crossobj.top=scroll_top-250
crossobj.visibility=(dom||ie)&#63; "visible" : "show"
dropstart=setInterval("dropin()",50)
}
function dropin(){
scroll_top=(ie)&#63; document.body.scrollTop : window.pageYOffset
if (parseInt(crossobj.top)&lt;100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}
function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit
if (bouncelimit&lt;0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}
function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}
window.onload=initbox
&lt;/SCRIPT&gt;
&lt;DIV id=dropin style="LEFT: 300px; VISIBILITY: hidden; WIDTH: 400px; POSITION: absolute; TOP: 250px; HEIGHT: 200px; BACKGROUND-COLOR: #f5f5f5"&gt;
&lt;DIV align=right&gt;&lt;A href="javascript:dismissbox()"&gt;[关闭窗口]&lt;/A&gt;&lt;/DIV&gt;如果想法改变，态度就会改变；如果习惯改变，人格就会改变；如果命运改变，人生就会改变。&lt;/DIV&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TBODY&gt;&lt;/TABLE&gt;&lt;/CENTER&gt;
&lt;/BODY&gt;&lt;/HTML&gt;

ログイン後にコピー

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。