CSS jQuery 图片全屏切换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
overflow: hidden;
}
.nav-container{
position: absolute;
bottom:0px;
}
.nav-container a{
text-decoration: none;
}
.nav{
display: table;
position: relative;
float:left;
float:left;
width: 20%;
height: 30px;
text-align: center;
z-index:2;
}
.nav:hover a{
background-color: gray;
}
.nav a{
display: table-cell;
vertical-align: middle;
width:100%;
height:100%;
color:white;
background-color: lightgray;
font-size: 20px;
}
.nav input{
display: inline-block;
width: 100%;
height: 28px;
opacity: 0;
position: absolute;
}
input:checked + em {
position: absolute;
left: 50%;
margin-left: -20px;
margin-top: -20px;
width: 1px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid gray;
}
input:checked ~ a {
background-color: gray;
}
.page-container{
position: fixed;
width:100%;
top:0px;
bottom:0px;
}
.show-container{
position: absolute;
width:100%;
height:500%;
}
section{
width:100%;
height:20%;
}
img{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="nav-container">
<div id="nav1" class="nav">
<input id="r1" name="nav" type="radio" checked="checked"/>
<em class="triangle"></em>
<a href="javascript:;">医疗</a>
</div>
<div id="nav2" class="nav">
<input id="r2" name="nav" type="radio" />
<em class="triangle"></em>
<a href="javascript:;">卫生</a>
</div>
<div id="nav3" class="nav">
<input id="r3" name="nav" type="radio" />
<em class="triangle"></em>
<a href="javascript:;">食品</a>
</div>
<div id="nav4" class="nav">
<input id="r4" name="nav" type="radio" />
<em class="triangle"></em>
<a href="javascript:;">旅游</a>
</div>
<div id="nav5" class="nav">
<input id="r5" name="nav" type="radio" />
<em class="triangle"></em>
<a href="javascript:;">教育</a>
</div>
<div class="page-container">
<div class="show-container">
<section id="sec1" class="show-sec">
<img src="data:images/1.jpg" />
</section>
<section id="sec2" class="show-sec">
<img src="data:images/2.jpg" />
</section>
<section id="sec3" class="show-sec">
<img src="data:images/3.jpg" />
</section>
<section id="sec4" class="show-sec">
<img src="data:images/4.jpg" />
</section>
<section id="sec5" class="show-sec">
<img src="data:images/5.jpg" />
</section>
</div>
</div>
</div>
<script src="jquery-2.0.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").on("click", function(){
var index = parseInt(this.id[1]);
var viewHeight = $(".page-container").height();
var top = -(index-1)*viewHeight;
$(".show-container").animate({top:top+"px"},800);
});
});
</script>
</body>
</html>
CSS jQuery 图片全屏切换的更多相关文章
- jquery简单的大背景banner图片全屏切换
详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...
- jQuery插件开发——全屏切换插件
这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...
- jQuery 扩展 全屏切换
(function ($) { //全屏切换方法 $.fn.toggleFullScreen = function (qp1, qp2) { var fullFlag = false; var _qp ...
- HTML+css实现图片全屏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery鼠标滚动垂直全屏切换代码
体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...
- jquery横向纵向鼠标滚轮全屏切换
html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- CSS之生成全屏背景图片
在CSS中背景图片的填充方法: background-position:x,y(背景图片x,y轴的定位) background-repeat:no-repeat(不平铺) background-rep ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 基于Ascensor.js全屏切换页面插件
今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- 2014-08-22 关于Response、Request等对象在cs文件中的使用
今天是在吾索实习的第33天.已经有一段时间没写过博客了,今天突然想起个值得分享的东西,所以又华丽地回归了. 废话不多说了,直奔主题.我们会发现,在我们在cs文件中,直接使用Response.Reque ...
- UVA10557- XYZZY(spfa+设置次数上限）
题意:有N个房间,刚开始你位于1号房间,有100的能量值,你要到达N号房间,每两个房间之间有单向门相连接,你到达某个房间可以加上该房间的能量值, 如果你在未到达N号房间之前能量值耗尽,则死亡,否则胜利 ...
- [转载]监控 Linux 性能的 18 个命令行工具
转自:http://www.kuqin.com/shuoit/20140219/338066.html 对于系统和网络管理员来说每天监控和调试Linux系统的性能问题是一项繁重的工作.在IT领域作为一 ...
- iOS面试贴士
iOS面试小贴士 ———————————————回答好下面的足够了------------------------------------- 多线程.特别是NSOperation 和 GCD 的内部原 ...
- Demon_打砖块（建造一面墙，发射子弹打砖块）
using UnityEngine; using System.Collections; public class CubeInit : MonoBehaviour { //砖块预设体 public ...
- 实用bootstrap 表格控件
http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html
- JS日期格式化函数性能优化篇
最近开发的软件中需要用到日志功能,其中有一个重要功能是显示日期和时间.于是网上搜了一把,搜到大量的日期格式化函数,不过比较了下,感觉代码都不够优雅,而且性能都不给力.对线上一些代码进行了评测,以下是一 ...
- CentOS 7 安装教程
参考资料: http://www.cnblogs.com/bobbylinux/articles/centos7.html
- 解决从源码编译ncurses6.0编译lib_gen.c报错的问题
直接从官网的源码编译时,会提示报错: gcc -DHAVE_CONFIG_H -I. -I../include -D_GNU_SOURCE -DNDEBUG -O2 --param max-inlin ...
- poj 2823 Sliding Window（单调队列）
/* 裸地单调队列.. 第一次写 写的好丑.... */ #include<iostream> #include<cstdio> #include<cstring> ...