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


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 SetInterval与setTimeout使用方法详解
Nov 15 Javascript
JS Loading功能的简单实现
Nov 29 Javascript
jquery统计输入文字的个数并对其进行判断
Jan 07 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
javascript日期格式化方法小结
Dec 17 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
使用JQuery选择HTML遍历函数的方法
Sep 17 Javascript
Angular2  NgModule 模块详解
Oct 19 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
vue v-model动态生成详解
Jun 30 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
建议大家看下JavaScript重要知识更新
2007/07/08 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
2014/10/17 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
在Vue 中获取下拉框的文本及选项值操作
2020/08/13 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[02:49]2018DOTA2亚洲邀请赛主赛事决赛日战况回顾 Mineski鏖战5局夺得辉耀
2018/04/10 DOTA
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
Saltstack快速入门简单汇总
2016/03/01 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
Python获取航线信息并且制作成图的讲解
2019/01/03 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
Django Rest framework频率原理与限制
2019/07/26 Python
Python使用struct处理二进制(pack和unpack用法)
2020/11/12 Python
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
CHARLES & KEITH加拿大官网:新加坡时尚品牌
2020/03/26 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
餐饮采购员岗位职责
2014/03/15 职场文书
节能标语大全
2014/06/21 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
学术会议通知范文
2015/04/15 职场文书
患者身份识别制度
2015/08/06 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫
python数字图像处理实现图像的形变与缩放
2022/06/28 Python