发布于 2017-06-20 04:33:56 | 144 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了JS实现从网页顶部掉下弹出层效果的方法,实例分析了javascript创建弹出窗口及窗口掉落与抖动效果实现方法,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法。分享给大家供大家参考。具体如下:

这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,喜欢的用时候息动手美化下,觉得不错。

运行效果如下图所示:

具体代码如下:


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

希望本文所述对大家的javascript程序设计有所帮助。



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务