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 #打开火 ...
随机推荐
- 论STA | 工艺、工具、分析的本与末
人类从漫长的蒙昧中觉醒之后,不再依靠着奇装异服的巫师通灵来指导生活,巫师进化成了科学家,他们试图对周遭的一切进行概括.分类.抽象,于是有了化学.物理.数学等基科.比如一粒沙,它的化学组成是什么,物理特 ...
- Hadoop架构: HDFS中数据块的状态及其切换过程，GS与BGS
该系列总览: Hadoop3.1.1架构体系——设计原理阐述与Client源码图文详解 : 总览 首先,我们要提出HDFS存储特点: 1.高容错 2.一个文件被切成块(新版本默认128MB一个块)在不 ...
- idea项目更改git地址
第一步:idea打开项目,菜单栏找VCS - Git - Remotes 点进去,弹出对话框,选中,点击编辑 弹出编辑框,更改地址,点击ok 弹出输入账号密码编辑框,输入自己的账号密码,点击确认 完成 ...
- (办公)记事本_linux网络命令
参考谷粒学院的linux视频教程:http://www.gulixueyuan.com/course/300/task/7091/show 阿里云ECS云服务器更换公网IP的方法:https://yq ...
- opencv：图像直方图相似性比较
void hist_compare(Mat src1, Mat src2) { int histSize[] = { 256, 256, 256 }; int channels[] = { 0, 1, ...
- Could not find result map com.youotech.tl_cons_credit_rating.entity.Result
后端报错如下: java.lang.IllegalArgumentException: Result Maps collection does not contain value for com.yo ...
- spark streaming读取kakfka数据手动维护offset
在spark streaming读取kafka的数据中,spark streaming提供了两个接口读取kafka中的数据,分别是KafkaUtils.createDstream,KafkaUtils ...
- vue axios路由跳转取消所有请求 和 防止重复请求
直接上干货 在发送第二次请求的时候如果第一次请求还未返回,则取消第一次请求,以保证后发送的请求返回的数据不会被先发送的请求覆盖. 或者是跳转路由的时候取消还未返回的请求 第一步: axios 怎么取消 ...
- Educational Codeforces Round 76 (Rated for Div. 2)E（最长上升子序列）
#define HAVE_STRUCT_TIMESPEC#include<bits/stdc++.h>using namespace std;int a[200007],b[200007] ...
- python时间模块time，datetime
时间模块time.datetime 模块(module)是 Python 中非常重要的东西,你可以把它理解为 Python 的扩展工具.换言之,Python 默认情况下提供了一些可用的东西,但是这些默 ...