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.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...
随机推荐
- （2015年郑州轻工业学院ACM校赛题）I 旋转图像
矩阵旋转,写一个转 90° 的函数就行了, 注意每次要将 长和宽的值进行交换就行了. #include<stdio.h> #include<iostream> #include ...
- HDOJ 1098 Ignatius's puzzle
Problem Description Ignatius is poor at math,he falls across a puzzle problem,so he has no choice bu ...
- 均价 和 最新价格 是啥意思 什么是MACD DIFF DEA 指标？
均价=当前时刻成交的总价格/成交的总量 最新价格=当前时刻的价格 一.平滑异同平均线(Moving Average Convergence Divergence)原理:MACD(Moving Aver ...
- M - Jamie's Contact Groups - poj 2289（二分图多重匹配）
题意:某个人通讯录有很多人,现在他想把这个人分组,给的数据是可以把这个人分在那些组里面,现在他想知道分组后,人最多的那个组至少有多少人. 分析:因为没有给组限制有多少人,可以使用二分求出来最小的那个, ...
- codeforces 341C Iahub and Permutations(组合数dp)
C. Iahub and Permutations time limit per test 1 second memory limit per test 256 megabytes input sta ...
- jquery and js 判断一个元素是否存在
一.javascript中判断一个元素是否存在 if(document.getElementById('example')){ // do sth } 二.jquery中判断一个元素是否存在 < ...
- [Openstack]使用devstack自己主动化安装
os环境为: ubuntu14.04 安装步骤: 更新系统软件包: sudo apt-get dist-upgrade #出现无法訪问到ubuntu官网的错误. 安装git: sudo apt-get ...
- Android 自定义CheckBox样式
1.首先在drawable文件夹中添加drawable文件checkbox_style.xml. <selector xmlns:android="http://schemas.and ...
- hdu 3631 Shortest Path（Floyd）
题目链接:pid=3631" style="font-size:18px">http://acm.hdu.edu.cn/showproblem.php?pid=36 ...
- SlidingMenu导入编译用法--Eclipse和IDEA
非常多側滑的应用都用的是开源库SlidingMenu, 效果不错,下面是我用上的效果图,因为近期换成了IDEA(IntelliJ)编辑器,昨天上网找了全部的教程都是关于在Eclipse导入的方法,摸索 ...