ホームページ > 記事 > ウェブフロントエンド > JavaScript はフローティング ウィンドウ効果を実装します code_javascript スキル
JavaScript はフローティング ウィンドウ効果を実装します code_javascript スキル
- WBOYオリジナル
- 2016-05-16 15:37:041779ブラウズ
この記事の例では、フローティング ウィンドウ効果を実装するための JavaScript コードについて説明します。皆さんの参考に共有してください。詳細は以下の通りです。
ここでは、JavaScript を使用して垂直方向に浮くフローティング ウィンドウを実現する方法を紹介します。コード内の JS 関数には、フローティング レイヤーの位置と高さ、初期化イベント トリガー、フローティングレイヤーを表示するには、style.left を使用してフローティングレイヤーの左マージン、フローティングレイヤーの移動速度などを設定し、より多くの設定オプションを実現できます。
実行中のエフェクトのスクリーンショットは次のとおりです:
オンライン デモのアドレスは次のとおりです:
http://demo.jb51.net/js/2015/js-up-down-float-move-win-codes/
具体的なコードは次のとおりです:
<HTML>
<HEAD>
<TITLE>上下浮动的窗口</TITLE>
<style type="text/css">
<!--
a:hover{color:00ff00}
a {color:000000;text-decoration:none}
-->
</style>
</HEAD>
<BODY>
<div id="floatpoint" STYLE="position:absolute;visibility:visible;">
<!--两个DIV之间放上你需要显示的内容-->
<table border=1 cellspacing="0" cellpadding="0" bordercolorlight="#000000" bordercolor="#FFFFFF">
<tr>
<td align=center bgcolor=#E3E3E3 style="color:HIGHLIGHTTEXT">
<font color="#000000">
最新消息！</font>
</td>
</tr>
<tr>
<td bgcolor=WINDOW style="font-size:9pt;color:WINDOWTEXT">
<a href="#" target="_blank">脚本之家</a><br>
<div></div>
</td>
</tr>
</table>
<!--两个DIV之间放上你需要显示的内容-->
</div>
<script LANGUAGE="JavaScript1.2">
//这部分为用户自定义区
var XX=10; // 浮动层的X坐标,即左边距
var xstep=1; // 移动步长，此参数越小，移动越平滑，最小值为1
var delay_time=60; // 每步的时间间隔，此参数越小，移动速度越快
//以下部分请勿随意改动
var YY=0;
var ch=0;
var oh=0;
var yon=0;
var ns4=document.layers?1:0 //判断浏览器类型是否是NS4
var ie=document.all?1:0 //判断浏览器类型是否是IE
var ns6=document.getElementById&&!document.all?1:0 //判断浏览器类型是否是NS6
if(ie){ //如果是IE
YY=document.body.clientHeight; //由clientHeight取得页面的高度
floatpoint.style.top=YY; //将浮动层位置调整到页面底部
}
else if (ns4){ //如果是NS4
YY=window.innerHeight; //由innerHeight取得页面的高度
document.floatpoint.pageY=YY; //将浮动层位置调整到页面底部
document.floatpoint.visibility="hidden"; //将浮动层隐藏。
}
else if (ns6){ //如果是NS6
YY=window.innerHeight //由innerHeight取得页面的高度
document.getElementById('floatpoint').style.top=YY //将浮动层位置调整到页面底部
}
function reloc1(){
if(yon==0){YY=YY-xstep;} //如果当前应该上移，则减小YY值
else{YY=YY+xstep;} //否则增加YY值下移
if (ie){ //如果是IE
ch=document.body.clientHeight; //取页面高度
oh=floatpoint.offsetHeight; //取浮动层的高度
}
else if (ns4){ //如果是NS4
ch=window.innerHeight; //取页面高度
oh=document.floatpoint.clip.height; //取浮动层的高度
}
else if (ns6){ //如果是NS6
ch=window.innerHeight //取页面高度
oh=document.getElementById("floatpoint").offsetHeight //取浮动层的高度
}
if(YY<0){yon=1;YY=0;} //如果浮动层超出了上界，则设定移动方向为向下；并设定层的位置为正好在上界处
if(YY>=(ch-oh)){yon=0;YY=(ch-oh);} //如果浮动层超出了下界，则设定移动方向为向上；并设定层的位置为正好在下界处
if(ie){ //如果是IE
floatpoint.style.left=XX; //用style.left设定浮动层左边距
floatpoint.style.top=YY+document.body.scrollTop; //用style.top设定浮动层上边距
}
else if (ns4){ //如果是NS4
document.floatpoint.pageX=XX; //用.pageX设定浮动层左边距
document.floatpoint.pageY=YY+window.pageYOffset; //用.pageY设定浮动层上边距
}
else if (ns6){ //如果是NS6
document.getElementById("floatpoint").style.left=XX
document.getElementById("floatpoint").style.top=YY+window.pageYOffset
}
}
function onad(){
if(ns4) //如果是NS4
document.floatpoint.visibility="visible"; //设定浮动层为可见
loopfunc(); //开始主循环，以不断改变浮动层位置
}
function loopfunc(){
reloc1(); //调整浮动层位置
setTimeout('loopfunc()',delay_time); //设定下一次调整的延时
}
if (ie||ns4||ns6)
window.onload=onad //初始化事件触发器
</script>
</BODY>
</HTML>
この記事が皆さんの JavaScript プログラミングに役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。