js实现从中间开始往上下展开网页窗口的方法

 这篇文章主要介绍了js实现从中间开始往上下展开网页窗口的方法,是非常实用的js窗口效果,需要的朋友可以参考下

 
 

本文实例讲述了js实现从中间开始往上下展开网页窗口的方法。分享给大家供大家参考。具体分析如下:

这个是从中间然后慢慢向上下展开的页面显示效果,也还不错,代码如下:

代码如下:
<html>
<head>
<title>js从中间展开的网页窗口显示</title>
<style>
<!--
.intro{
position:absolute;
left:0;
top:0;
layer-background-color:yellow;
background-color:#336699;
border:0.1px solid #336699
}
-->
</style>
</head>
<body>
<div id="i1" class="intro"></div><div id="i2" class="intro"></div>
<script language="JavaScript1.2">
var speed=20
var temp=new Array()
var temp2=new Array()
if (document.layers){
for (i=1;i<=2;i++){
temp[i]=eval("document.i"+i+".clip")
temp2[i]=eval("document.i"+i)
temp[i].width=window.innerWidth
temp[i].height=window.innerHeight/2
temp2[i].top=(i-1)*temp[i].height
}
}
else if (document.all){
var clipbottom=document.body.offsetHeight/2,cliptop=0
for (i=1;i<=2;i++){
temp[i]=eval("document.all.i"+i+".style")
temp[i].width=document.body.clientWidth
temp[i].height=document.body.offsetHeight/2
temp[i].top=(i-1)*parseInt(temp[i].height)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
temp[1].bottom-=speed
temp[2].top+=speed
if (temp[1].bottom<=0)
clearInterval(stopit)
}
else if (document.all){
clipbottom-=speed
temp[1].clip="rect(0 auto+"+clipbottom+" 0)"
cliptop+=speed
temp[2].clip="rect("+cliptop+" auto auto)"
if (clipbottom<=0)
clearInterval(stopit)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>
</body>
</html>

 

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

时间: 2024-08-01 11:18:30

js实现从中间开始往上下展开网页窗口的方法的相关文章

js实现从中间开始往上下展开网页窗口的方法_javascript技巧

本文实例讲述了js实现从中间开始往上下展开网页窗口的方法.分享给大家供大家参考.具体分析如下: 这个是从中间然后慢慢向上下展开的页面显示效果,也还不错,代码如下: 复制代码 代码如下: <html> <head> <title>js从中间展开的网页窗口显示</title> <style> <!-- .intro{ position:absolute; left:0; top:0; layer-background-color:yellow;

js操作css属性实现div层展开关闭效果的方法

  本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 <title>js操作div展开关闭</ti

js操作css属性实现div层展开关闭效果的方法_javascript技巧

本文实例讲述了js操作css属性实现div层展开关闭效果的方法.分享给大家供大家参考.具体分析如下: 最近学javascript接触到js对css属性操作,就写了个展开关闭效果,同时实现了按钮文字切换,很简洁啊!这段Js对象操作css属性实现div层的展开关闭效果.将代码分享给JS前端设计者. <title>js操作div展开关闭</title> <style> #jb51 { border: solid 1px #EEE; background:#F7F7F7; ma

jquery实现简单合拢与展开网页面板的方法_jquery

本文实例讲述了jquery实现简单合拢与展开网页面板的方法.分享给大家供大家参考.具体如下: 这是一款网页上常见的合拢(收缩).伸展面板代码,使用了jQuery插件,代码更加简化,点击面板的标题栏即可折叠.或展开这个层,是网上很流行的效果,由此可扩展出的功能还真挺多,只要动脑筋,一定能做出来. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-hidden-show-web-table-codes/ 具体代码如下: <!

js window.open弹出新的网页窗口

 弹出新的网页窗口的方法有很多,在本文为大家介绍下使用js的window.open方法来实现,需要的朋友可以了解下  代码如下: window.open(par,'','width=900,height=550,scrollbars=yes');    par 访问路径   

js实现div层缓慢收缩与展开的方法

  本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收缩与展开的速度是可以控制的,高度.循环时间也可以改. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

原生JS版和JQ版--点击展开/关闭效果

原生js版和jq版--点击展开/关闭效果 可扩展的简易点击展开/关闭效果,分别用原生网页特效和jquery实现.使用方法及相关解释,请参见源码. 另,授人以鱼,不如授人以渔.我写的只是一个原型,提供一个思路一种方法.注释中我也注明了,如果你想要酷炫的效果,你可以根据自己的实际需求扩展. jquery $(function(){     var $title = $('div.jqdemo');//找到要显示/隐藏的元素     //$title.hide();   //如果你想默认是隐藏状态,可

JS实现鼠标滑过折叠与展开菜单效果代码_javascript技巧

本文实例讲述了JS实现鼠标滑过折叠与展开菜单效果代码.分享给大家供大家参考.具体如下: 这是一款展开菜单特效,鼠标移上的时候自动展开,移走后自动折叠隐藏起来,运用了JS技术,并结合了CSS共同实现的效果.本折叠菜单类似QQ可折叠的好友列表一样,不少人喜欢这种菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hover-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC

js实现div层缓慢收缩与展开的方法_javascript技巧

本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收缩与展开的速度是可以控制的,高度.循环时间也可以改. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&qu