编程 Javascript

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

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>

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

使用JQ来编写最基本的淡入淡出效果附演示动画

Oct 31 Javascript

自己封装的常用javascript函数分享

Jan 07 Javascript

JS实现图片放大镜效果的方法

Feb 27 Javascript

详细解读AngularJS中的表单验证编程

Jun 19 Javascript

使用jquery动态加载Js文件和Css文件

Oct 24 Javascript

谈谈对JavaScript原生拖放的深入理解

Sep 20 Javascript

Angular.js实现多个checkbox只能选择一个的方法示例

Feb 24 Javascript

vue自定义全局组件(自定义插件)的用法

Jan 30 Javascript

Vue Cli3 创建项目的方法步骤

Oct 15 Javascript

微信小程序实现获取准确的腾讯定位地址功能示例

Mar 27 Javascript

JavaScript 斐波那契数列倒序输出输出100以内的质数代码实例

Sep 11 Javascript

如何修改Vue打包后文件的接口地址配置的方法

Apr 22 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