이 기사의 예에서는 부동 창 효과를 구현하기 위한 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 프로그래밍에 도움이 되기를 바랍니다.