窗口中各模块的切换效果,使用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插件(一)
类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. ...
随机推荐
- vs2013工程配置
1. 目标文件生成路径配置: 直接改在工程同级目录下 x64\debug目录下: 2. 调试工程路径配置: 命令-----参照物为工程 工作目录----参照物为运行程序 3. 拷贝工程: bat的写 ...
- [HDU6315]Naive Operations(线段树+树状数组)
构造一个序列B[i]=-b[i],建一颗线段树,维护区间max, 每次区间加后再询问该区间最大值,如果为0就在树状数组中对应的值+1(该操作可能进行多次) 答案在树状数组中找 其实只用一颗线段树也是可 ...
- 使用OpenLayers发布地图
OpenLayers是用于制作交互式Web地图的开源客户端JavaScript类库,制作的地图几乎可以在所有的浏览器中查看.因为是客户端类库,它不需要特殊的服务器端软件或配置,甚至不用下载任何东西就可 ...
- SpringBoot-07:SpringBoot整合PageHelper做多条件分页查询
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 本篇博客讲述如何在SpringBoot中整合PageHelper,如何实现带多个条件,以及PageInfo中的 ...
- SpringBoot-01:什么是SpringBoot?
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- SpringBoot: Spring Boot可以轻松创建独立的,生产级的基于Spring的应用程序,您可以“ ...
- 「日常训练」Kefa and Dishes(Codeforces Round #321 Div. 2 D)
题意与分析(CodeForces 580D) 一个人有\(n\)道菜,然后要点\(m\)道菜,每道菜有一个美味程度:然后给你了很多个关系,表示如果\(x\)刚好在\(y\)前面做的话,他的美味程度就会 ...
- VIN码识别:毫秒间99%精准识别
科技改变生活.几年前,人工智能还仅是一个噱头,现在已逐渐融入我们的工作和生活,代替了一些重复性的.繁杂的人工劳动,在提高工作效率的同时,提升了客户体验. 车架号也叫VIN码,由17位数字和字母混合组成 ...
- 181. Flip Bits【LintCode, by java】
Description Determine the number of bits required to flip if you want to convert integer n to intege ...
- 167. Add Two Numbers【LintCode by java】
Description You have two numbers represented by a linked list, where each node contains a single dig ...
- php 面试题
1.通过哪一个函数,可以把错误转换为异常处理? A:set_error_handlerB:error_reportingC:error2exceptionD:catch 正确答案:A 答案分析:set ...