JQuery 实现PPT效果，点跳目标页及翻页（待改进）
实现PPT效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test 10</title>
<style>
.container {
width: 100%;
height: 100%;
} .contentDiv {
margin: 20px auto;
width: 100%;
height: 1200px;
} .contentDiv2 span {
font-size: 30px;
text-align: left;
} .leftDiv {
width: 20%;
height: 100%;
display: inline;
float: left;
} .rightDiv {
width: 80%;
height: 100%;
display: inline;
float: left;
} .title2 {
font-size: 40px;
text-align: center;
font-weight: bold;
} .contentDiv2 {
display: none;
} #mulu span {
font-size: 30px;
} .listFontSize {
font-size: 20px;
} a:link {
font-size: 20px;
color: #000000;
text-decoration: none;
} a:visited {
font-size: 20px;
color: #000000;
text-decoration: none;
} a:hover {
font-size: 20px;
color: #000000;
text-decoration: none;
} .container {
background-color: lightgray;
}
</style>
</head>
<body> <div class="container"> <div class="leftDiv">
<a href="#" id="" onclick="Show('step1');">一、目 录</a> <br />
<a href="#" id="" onclick="Show('step2');"><span class="listFontSize">1、评估原则</span></a> <br />
<a href="#" id="" onclick="Show('step3');"><span class="listFontSize">2、评估方法</span></a> <br />
<a href="#" id="" onclick="Show('step4');"><span class="listFontSize">3、评估指标</span></a> <br />
<br /><br /><br /><br /><br /><br /><br /><br /> <a href="#" id="previousStep">上一页</a> <br />
<a href="#" id="nextStep">下一页</a> <br />
</div> <div class="rightDiv"> <div>
<div id="mulu" class="step step1" style="text-align:left">
<br /><br /><h1 class="title2" style="font-size:50px"> 目 录 </h1><br /><br /><br /><br /> <span>▶ 1111111111111111111111 </span><br /><br />
</div>
</div> <div>
<div class="contentDiv2 step step2">
<br /><br /><div style="text-align:center"><label class="title2"> 评估原则 </label></div><br /><br /><br /><br />
<span>▶ 22222222222222 </span><br /><br />
</div>
</div> <div>
<div class="contentDiv2 step step3">
<br /><br /><div style="text-align:center"><label class="title2"> 评估方法 </label></div><br /><br /><br /><br />
<span>▶ 3333333333333333333 </span><br /><br />
</div>
</div> <div>
<div class="contentDiv2 step step4">
<br /><br /><div style="text-align:center"><label class="title2"> 评估指标 </label></div><br /><br /><br /><br />
<span>▶ 4444444444444444444 </span><br /><br /> </div>
</div> </div> </div> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<!--<script src="../../Script/plugins/jquery/jquery-1.9.1.min.js"></script>-->
<script>
$(function () {
$("#previousStep").click(function () {
previousStepclick();
}); $("#nextStep").click(function () {
nextStepclick();
});
}); function previousStepclick() {
stepFunc("prev");
} function nextStepclick() {
stepFunc("next");
} function stepFunc(prevOrNext) {
var steps = $(".step");
for (var i = 0; i < steps.length; i++) {
var step = steps[i];
var b1 = $(step).is(":hidden");
if ($(step).is(":hidden")) { } else {
var e;
if (prevOrNext == "prev") {
e1 = $(step).parent().prev().children(".step")[0];
}
else if (prevOrNext == "next") {
e1 = $(step).parent().next().children(".step")[0];
}
if (typeof (e1) != 'undefined') {
$(step).hide();
$(e1).show();
break;
}
}
}
} function Show(step) {
$(".step").each(function () {
$(this).hide();
});
$("." + step).show();
} </script>
</body>
</html>
JQuery 实现PPT效果，点跳目标页及翻页（待改进）的更多相关文章
- 第十二篇、OC_仿淘宝商品详情页的翻页
// // GFBProductViewController.m // elmsc // // Created by MAC on 2016/11/26. // Copyright © 2016年 G ...
- DEDEcms手机网站添加详情内页上一页/下一页的翻页功能
修改文件include/arc.archives.class.php文件. 1.搜索 function GetPreNext($gtype='') 2.将这个函数的所有内容替换为 function G ...
- 10款无限滚动自动翻页jquery插件
2012年3月29日 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的 结果,改变了一直以来只能通过点击下一页来翻页 ...
- Android 滑动效果高级篇（七）—— 华丽翻页效果
By 何明桂(http://blog.csdn.net/hmg25) 转载请注明出处 之前看到像ipad上的ibook的模拟书籍翻页的特效感觉很炫,在android上也有像laputa和ireader ...
- HTML5 book响应式翻页效果
翻页,HTML5源码下载,HTML5响应式翻页效果,鼠标移到右上角会看到翻页效果,需要鼠标拖动后翻页,支持ie9+,html5浏览器. 单页和双页. 自动播放和暂停. 点击左右翻页. 鼠标点击左右页面 ...
- c#翻页效果
用c#和GDI+实现杂志翻页动画效果时间:2010-01-13 blog.csdn.net 周公 - 说明:以前本人参与个一个电子杂志项目,当时要求实现模拟现实生活中的杂志翻页动画效果,别人推荐了这篇 ...
- 6个超炫酷的HTML5电子书翻页动画
相信大家一定遇到过一些电子书网站,我们可以通过像看书一样翻页来浏览电子书的内容.今天我们要分享的HTML5应用跟电子书翻页有关,我们精选出来的6个电子书翻页动画都非常炫酷,而且都提供源码下载,有需要的 ...
- gridView AspNetPager 翻页时 弹出窗体关闭报错
gridView AspNetPager 翻页后,你右击刷新或F5会发现弹出一个刷新页面. 这是因为默认翻页都是用dopostback方式回发的.因为这时的页面已经不是原来的页面.所以会弹出提示. 这 ...
- 使用Python在自己博客上进行自动翻页
先上一张代码及代码运行后的输出结果的图! 下面上代码: # coding=utf-8 import os import time from selenium import webdriver #打开火 ...
随机推荐
- htm5实现 文件夹上传
观察百度云上传,可以看到input type=file 的标签上加个一个属性“webkitdirectory”,加上次属性即可选择整个文件夹.
- 「JSOI2015」染色问题
「JSOI2015」染色问题 传送门 虽然不是第一反应,不过还是想到了要容斥. 题意转化:需要求满足 \(N + M + C\) 个条件的方案数. 然后我们就枚举三个数 \(i, j, k\) ,表示 ...
- javascipt——jQuery
1.首先需要导入jQuery1.12.4.js文件,把文件和当前目录放同一目录下.在<body>中写上<script scr = 'jQuery1.12.4.js'><s ...
- spring简要回顾
spring内容 spring容器: @Repository @Service @Controller @Component <bean id="类名首字母小写">默认 ...
- iOS多线程编程的知识梳理
多线程编程也称之为并发编程,由于其作用大,有比较多的理论知识,因此在面试中也是受到面试官的青睐.在日常项目开发中,至少网络请求上是需要使用到多线程知识的,虽然使用第三方的框架比如AFNetworkin ...
- 笔记本电脑插上耳机声音依然外放解决方法 为什么插入HDMI线，电脑的音响就没有声音了
笔记本电脑插上耳机声音依然外放解决方法: 下载一个驱动大师,安装声卡驱动.(驱动人生安装的驱动有可能不能用) 为什么插入HDMI线,电脑的音响就没有声音了 参考:https://zhidao.baid ...
- 单例模式的Java泛型实现方式
import java.util.HashMap; import java.util.Map; /** * Created by zhao.wu on 2016/11/18. */ public cl ...
- pipreqs （找当前项目依赖的包）
pipreqs pipreqs可以帮你找到当前项目的所有组件及其版本.就是当别人给你一个程序的时候,你要在自己电脑上运行起来,就需要安装程序所依赖的组件,总不能自己一个一个找吧. # 安装 pip3 ...
- T114048 [RC-02] yltx数对 (打表）
这题如果全部打表的话,文件大小会有65kb,超了,所以只打出一半,前一半用程序算就可以了,并不会超时. 如果算法优化的好,其实可以打的更少. #include <bits/stdc++.h> ...
- JavaSE复习~开发环境的搭建 与 HelloWorld
JDK的下载 访问Oracle官网,下载jdk,目前来说用的最多的是 8 版本 https://www.oracle.com/technetwork/java/javase/downloads/ind ...