一个简单的全屏图片上下打开显示网页效果示例


Posted in Javascript onJuly 08, 2014

上源码看效果:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body {
margin: 0;
padding: 0;
}


.wrap {
overflow: hidden;
position: fixed;
z-index: 99999;
width: 100%;
top: 0;
left: 0;
}


.div {
overflow: hidden;
position: absolute;
width: 100%;
}


.d {
background: url(1.jpg) center center no-repeat;
height: 100%;
}
</style>
</head>
<body>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<p>这是网站内容</p>
<div class="wrap">
<div id="d1" class="div">
<div class="d"></div>
</div>
<div id="d2" class="div">
<div class="d"></div>
</div>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
var h = $(window).height();
var h1 = h / 2;
$('#d1,#d2').height(h1);
$('.wrap,.d').height(h);
$('#d2').css('top', h1);
$('#d2 .d').css('margin-top', -h1);

setTimeout(function () {
$('#d1').animate({ 'top': -h / 2 }, 3000);
$('#d2').animate({ 'top': h }, 3000, function () {
$('.wrap').remove();
});
}, 2000);//一定时间后打开,1000=1秒

</script>
</body>
</html>
Javascript 相关文章推荐
javascript中对对层的控制
Dec 29 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
JS+CSS实现类似QQ好友及黑名单效果的树型菜单
Sep 22 Javascript
详解javascript new的运行机制
Jan 26 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
vue v-on:click传递动态参数的步骤
Sep 11 Javascript
JavaScript实现alert弹框效果
Nov 19 Javascript
JavaScript通过元素的ID和name设置样式
Jul 08 #Javascript
jquery中each方法示例和常用选择器
Jul 08 #Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 #Javascript
bootstrap data与jquery .data
Jul 07 #Javascript
函数式 JavaScript(一)简介
Jul 07 #Javascript
5款JavaScript代码压缩工具推荐
Jul 07 #Javascript
jquery easyui使用心得
Jul 07 #Javascript
You might like
第十一节 重载 [11]
2006/10/09 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
php根据年月获取季度的方法
2014/03/31 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
JQuery 遮罩层实现(mask)实现代码
2010/01/09 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
使用Post提交时须将空格转换成加号的解释
2013/01/14 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
2013/09/16 Javascript
node.js中的Socket.IO使用实例
2014/11/04 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
2015/05/11 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
2016/01/27 Javascript
JavaScript面试题(指针、帽子和女朋友)
2016/11/23 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
react配合antd组件实现的管理系统示例代码
2018/04/24 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
2018/08/24 jQuery
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
Nest.js环境变量配置与序列化详解
2021/02/21 Javascript
python实用代码片段收集贴
2015/06/03 Python
python递归全排列实现方法
2018/08/18 Python
Python实现图像的垂直投影示例
2020/01/17 Python
求职简历的自我评价怎样写好
2013/10/07 职场文书
小学生自我评价范文
2014/01/25 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
同步小康驻村工作简报
2015/07/20 职场文书
婚礼父母致辞
2015/07/28 职场文书
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript