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.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- 【数学】【模拟】XMU 1044 伪伪随机数产生器
题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1044 题目大意: 求首项为0,公比为x的等差数列组成的数字条的第y位数字是几.(x,y ...
- HDOJ 2072 单词数
Problem Description lily的好朋友xiaoou333最近很空,他想了一件没有什么意义的事情,就是统计一篇文章里不同单词的总数.下面你的任务是帮助xiaoou333解决这个问题. ...
- HDU_1429——胜利大逃亡续,十位二进制状态压缩,状态判重
Problem Description Ignatius再次被魔王抓走了(搞不懂他咋这么讨魔王喜欢)……这次魔王汲取了上次的教训,把Ignatius关在一个n*m的地牢里,并在地牢的某些地方安装了带锁 ...
- 线性表（gcc实现）
线性结构: ①存在一个唯一的被称为“第一个”的数据元素: ②存在一个唯一的被称为“最后一个”的数据元素: ③除第一个元素外,每个元素均有唯一一个直接前驱: ④除最后一个元素外,每个元素均有唯一一个直接 ...
- banana pro 板子
http://www.lemaker.org/cn/article-23-1.html
- 使用cocoapods导入第三方后 报错_OBJC_CLASS_$_XXX
我们手动导入第三方库的时候,感觉管理不是很方便,于是会选择使用Cocoapods管理.现在记录一下使用心得,当使用cocoapods导入afnetworking或者其他框架的时候,发现调用的时候总是报 ...
- Linux负载均衡软件LVS之二（安装篇）[转]
Linux负载均衡软件LVS之二(安装篇) 2011-04-26 16:01:47 标签:lvs安装配置 linux lvs 休闲 linux高可用 原创作品,允许转载,转载时请务必以超链接形式标明文 ...
- ubuntu12.04软件中心打开错误和 ubuntu 包管理之“:E: 读错误 - read (5: 输入/输出错误) E: 无法解析或打开软件包的列表或是状态文件。”的解决
执行ubuntu软讲中心时打不开.老是崩溃,从终端也下载不了软件. 执行包管理的update或者search等等会报错: E: 读错误 - read (5: 输入/输出错误) E: 无法解析或打开软件 ...
- Linux磁盘设备文件(sda,sdb,sdc…)变化问题
在Linux下往往会碰到这样的问题,磁盘的设备文件,比如/dev/sda, sdb, sdc等等在某些情况下会混乱掉,比如sda变成了sdb或者sdc变成了sdb等等,这样无形中会导致磁盘设备管理的混 ...
- STL之Errors and Exceptions
Error Handling STL设计的目标是性能最优化,而不是最安全. 错误检查是极其浪费时间的,因此,STL对于错误处理几乎没有做处理,因此,这对STL的使用者的要求就非常高. 为什么不采取错误 ...