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.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- 高性能JSON工具-FastJson处理超大JSON文本
使用阿里开源类库FastJson,当需要处理超大JSON文本时,需要Stream API,在fastjson-1.1.32版本中开始提供Stream API.文档参考GitHub:https://gi ...
- E - Swap - hdu 2819(简单二分图匹配)
题意:如果可以交换行列,问主对角线能不能全为1 分析:要想主对角线全为1很明显要有N个行列不想同的点就行了,可以用二分图匹配计算出来多能有几个.如果小与N就不能.输出要是对的就行,不必和答案一样 ** ...
- K - Transformation-hdu 4578（多操作混合区间更新）线段树
题意:有四种操作 1, 区间 [l, r] 的值都加上 C 2, 区间 [l, r] 的值都乘上 C 3, 区间 [l, r] 的值都变为C 4, 求区间 [l, r]所有数的p次方的和 分析 ...
- 在网页中在线浏览ppt文档
方法一: 把ppt文件的扩展名直接修改为pps,嵌入到网页中 缺点:这种方式浏览器会提示是打开,还是下载,选择打开的话会直接在浏览器中打开,并且客户端一定要安装Office PowerPoint才能打 ...
- 手机端H5点击类目自动定位到相应内容
_obj = {}; /*点击弹出分类*/_obj.openZZ=function(){ document.getElementById("app_screen01").style ...
- 【AngularJS入门】用ng-repeat指令实现循环输出
循环输出列表很多项目在web服务端做,前端做好模版后后端写jsp代码,双方需要紧密合作,分清责任.有些项目由后端提供restful方法,前端用ajax调用自己循环,这种一般是大把的jquery拼字符串 ...
- apache 配置https(转)
主要讲述在windows下apache配置SSL以实现http转换为https SSL: SSl是为Http传输提供安全的协议,通过证书认证来确保客户端和网站服务器之间的数据是安全.也就是说在SSL下 ...
- 招一位安防软件project师，嵌入式开发project师
岗位职责 1.负责海思平台IPC产品应用层软件设计及维护 2.私有平台协议对接及为第三方提供技术支持. 任职资格: 1.较强的学习.领悟能力,能够高速熟悉公司现有代码. 2.熟练掌握C.C++开发语言 ...
- C++ int转string
一.使用atoi 说明: itoa( int value, char *string, int radix ); 第一个参数:你要转化的int; 第 ...
- Java分页类 Page
import java.io.UnsupportedEncodingException; import java.net.URLEncoder; import java.util.Iterator; ...