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


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 获取事件对象的注意点
Jul 29 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
浅谈Javascript数组的使用
Jul 29 Javascript
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
javascript中闭包概念与用法深入理解
Dec 15 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
详解Vue.js 2.0 如何使用axios
Apr 21 Javascript
react-native动态切换tab组件的方法
Jul 07 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
Jul 20 Javascript
JavaScript如何操作css
Oct 24 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
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
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
php常用表单验证类用法实例
2015/06/18 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
Laravel框架Auth用户认证操作实例分析
2019/09/29 PHP
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
2013/08/01 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
JavaScript中使用Async实现异步控制
2017/08/15 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
Vue基本指令实例图文讲解
2021/02/25 Vue.js
布同 Python中文问题解决方法(总结了多位前人经验,初学者必看)
2011/03/13 Python
Django forms组件的使用教程
2018/10/08 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
django创建简单的页面响应实例教程
2019/09/06 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
css3实现二维码扫描特效的示例
2020/10/29 HTML / CSS
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
怎样创建、运行java程序
2014/08/01 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
大学生创业项目方案
2014/03/08 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
五一劳动节慰问信
2015/02/14 职场文书
污水处理保证书
2015/05/09 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
初中数学教学随笔
2015/08/15 职场文书
2016教师节问候语
2015/11/10 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫