窗口中各模块的切换效果,使用jquery实现
用到了两个js库,请自行下载,用到的背景图片可任意图片都可以,主要是看效果
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-1.11.3.min.js"></script><script src="js/jquery.easing.1.3.js"></script>
<style>
* {
margin: 0;
padding: 0;
} body {
margin: 0 auto;
} #header {
height: 100px;
background: #ccc;
} #footer {
background: #ccc;
height: 100px;
} #container {
background: url(body_bg.gif);
min-height: 400px;
/*max-height:600px;*/
position: relative;
} .page {
position: absolute;
width: 100%;
height: 100%;
} .page1 {
background: url(h.jpg);
} .page2 {
background: url(a.jpg);
} .page3 {
background: url(b.jpg);
} .page4 {
background: url(c.jpg);
}
</style>
<script>
$(function () {
var width = $(window).width();
$('.page').css('left',width+"px");
$("#container").height($(window).height() - 200);
$(window).resize(function () {
$('.page').css('left', width + "px");
width = $(window).width();
$("#container").height($(window).height() - 200);
});
$("button").each(function (i) {
i = i + 1
$("#btn" + i).click(function () {
$(".page").stop(false, true).not('.page' + i).animate({ left: -2*width }, 1000, function () {
$(".page").not('.page'+i).css("left", width);
});
$(".page" + i).animate({
'left': [0, 'easeOutBack']
}, 1000) });
}); });
</script>
</head>
<body> <div id="header">
我是头部
<p>
<button id="btn1">页面1</button>
<button id="btn2">页面2</button>
<button id="btn3">页面3</button>
<button id="btn4">页面4</button>
</p>
</div>
<div id="container">
<div class="page page1">
1111111111111111111111111111111111
</div> <div class="page page2"> 2222222222222222222222222222222222222
</div>
<div class="page page3"> 33333333333333333333333333333333333333
</div>
<div class="page page4"> 4444444444444444444444444444
</div> </div>
<div id="footer">
<p>
版本信息:::::
</p>
</div>
</body>
</html>
窗口中各模块的切换效果,使用jquery实现的更多相关文章
- delphi主i窗口中实现多页面管理效果
MainForm上加Panel,把Panel的DockSite设为True, 把窗口FB_orderManage的DragKind设为dkDock, DragMode设为dmAuromatic 在M ...
- Android实现程序前后台切换效果
本文演示如何在Android中实现程序前后台切换效果. 在介绍程序实现之前,我们先看下Android中Activities和Task的基础知识. 我们都知道,一个Activity 可以启动另一个Act ...
- Windows系统下如何在cmd命令窗口中切换Python2.7和Python3.6
针对在同一系统下我们可能安装多个版本的Python,毕竟Python2.7与Python3.6还是有不同的需求,但是在用Cmd命令窗口是我们可能默认的系统变量环境是其中一个版本,当我们需要在cmd命令 ...
- Android中使用ViewPager实现屏幕页面切换和页面切换效果
之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpag ...
- 看懂理解 keyboard中 , navigation的设置: 切换工作区和移动窗口到不同的工作区.
navigation中, 主要有两个方面的内容: 移动窗口到工作区 的shortcuts 切换工作区的shortcuts 首先清楚: 工作区workspace, fedora 23中 好像只有上下方向 ...
- tab切换效果 网站中的图片自动切换
网站中的图片自动切换 今天上一套tab切换效果的代码 动图就自己实现吧! 下面贴HTML代码,大体分两部分,图片div和按钮div,代码很容易看懂~ <!DOCTYPE html> < ...
- Python之uiautomation模块-获取CMD窗口中所打印的文字信息
当我们想以自动化的方式操作软件,以提高办公或测试效率时,有许多成熟的工具,比如针对Web端应用的Selenium.针对移动端应用的Appium.那么,PC端(Windows)桌面应用,又改如何处理呢? ...
- Axure RP Pro 7.0苏宁易购式标签切换效果教程
转:http://jingyan.baidu.com/article/7082dc1c4f0a11e40a89bdac.html 页面标签切换效果,几乎是所有大网站(尤其是电商类网站)标配的交互方式: ...
- javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
随机推荐
- Node.js Express+Mongodb 项目实战
Node.js Express+Mongodb 项目实战 这是一个简单的商品管理系统的小项目,包含的功能还算挺全的,项目涵盖了登录.注册,图片上传以及对商品进行增.删.查.改等操作,对于新手来说是个很 ...
- Windows下的SysWow64和System32
64位的Windows并不是简单地把所有东西都编译成64位就万事大吉的.关于64位的CPU应该做成什么样子,Intel和AMD曾有各自的打算.AMD的回答直接了当:新的64位处理器,应该能在提高更高处 ...
- 成都Uber优步司机奖励政策(3月23日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- P1803 凌乱的yyy
P1803 凌乱的yyy 题目背景 快noip了,yyy很紧张! 题目描述 现在各大oj上有n个比赛,每个比赛的开始.结束的时间点是知道的. yyy认为,参加越多的比赛,noip就能考的越好(假的) ...
- MySQL高级-全局查询日志
注意:全局查询日志不要在生成环境中启用 一.配置启用 二.编码启用
- ORA-15032、ORA-15071错误处理
遇到一下错误 ERROR at line 1: ORA-15032: not all alterations performed ORA-15071: ASM disk "NOCR_0002 ...
- hdu2147kiki's game(找规律)
kiki's game Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 40000/10000 K (Java/Others)Total ...
- Python 集合内置函数大全(非常全!)
Python集合内置函数操作大全 集合(s).方法名 等价符号 方法说明 s.issubset(t) s <= t 子集测试(允许不严格意义上的子集):s 中所有的元素都是 t 的成员 s ...
- Spring ApplicationContext 简介
ApplicationContext是对BeanFactory的扩展,实现BeanFactory的所有功能,并添加了事件传播,国际化,资源文件处理等. configure locations:(C ...
- 一些容易记混的c++相关知识点
一些容易记混的c++相关知识. 截图自:<王道程序员面试宝典>