recherche

Maison  >  Article  >  interface Web  >  JavaScript implémente les compétences code_javascript d'effet de fenêtre flottante

JavaScript implémente les compétences code_javascript d'effet de fenêtre flottante

WBOY
WBOYoriginal
2016-05-16 15:37:041778parcourir

L'exemple de cet article décrit le code JavaScript pour implémenter un effet de fenêtre flottante. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Nous introduisons ici l'utilisation de JavaScript pour réaliser une fenêtre flottante qui flotte dans la direction verticale. La fonction JS dans le code possède de riches fonctions de définition de couche flottante, telles que la position et la hauteur de la couche flottante, le déclencheur d'événement d'initialisation et la définition de la valeur. pour que le calque flottant soit visible, utilisez style.left pour définir la marge gauche du calque flottant, la vitesse de déplacement du calque flottant, etc., et davantage d'options de réglage peuvent être obtenues.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-up-down-float-move-win-codes/

Le code spécifique est le suivant : 

<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&#63;1:0 //判断浏览器类型是否是NS4
var ie=document.all&#63;1:0 //判断浏览器类型是否是IE
var ns6=document.getElementById&&!document.all&#63;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>

J'espère que cet article sera utile à la programmation JavaScript de chacun.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：jQuery PHP implémente le contenu des champs de table modifiables et l'enregistre en temps réel_jqueryArticle suivant：jQuery PHP implémente le contenu des champs de table modifiables et l'enregistre en temps réel_jquery

Articles Liés

Voir plus