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 #打开火 ...
随机推荐
- IdentityHashCodeTest
Java学习:identityHashCode和hashCode方法, System类提供了一个identityHashCode(Object x)方法,这个方法返回的是指定对象的精确hashCode ...
- SPAN, RSPAN, ERSPAN
该文档摘自:Home > CCIE Routing and Switching Study Group > Discussions 由 Deben 于 2015-2-6 上午6:50 创建 ...
- 7，请描述下cookies，sessionStorage和localStorage的区别
7,请描述下cookies,sessionStorage和localStorage的区别 首先,cookie是网站为了标识用户身份而储存在用户本地终端(client side,百科: 本地终端指与计算 ...
- 对于javaScript中的alert和document.write()的执行顺序的记录
代码: <script>//1----语句式的匿名函数创建以及调用 (function(name,age){ alert("name:"+name+",age ...
- python练习：假设s是一个字符串，返回s中十进制数字之和。例如，如果s是‘a2b3c’，则返回5。
python练习:假设s是一个字符串,返回s中十进制数字之和.例如,如果s是‘a2b3c’,则返回5. 重难点:字符串转化为字符序列.in的多种应用.try-except代码块的使用. print(& ...
- Vue.js开发去哪儿网WebApp
一.项目介绍 这个项目主要参考了去哪儿网的布局,完成了首页.城市选择页面.详情页面的开发. 首页:实现了多区域轮播的功能,以及多区域列表的展示: 城市选择页面:在这个页面实现了城市展示.城市搜索.城市 ...
- SQL 游标介绍及使用
游标 游标(cursor)是系统为用户开设的一个数据缓冲区,存放SQL语句的执行结果.每个游标区都有一个名字,用户可以用SQL语句逐一从游标中获取记录,并赋给主变量,交由主语言进一步处理. 游标是处理 ...
- Windows配置本地Hadoop运行环境
很多人喜欢用Windows本地开发Hadoop程序,这里是一个在Windows下配置Hadoop的教程. 首先去官网下载hadoop,这里需要下载一个工具winutils,这个工具是编译hadoop用 ...
- PyQt5剪切板操作
1.使用剪切板import sys,mathfrom PyQt5.QtWidgets import *from PyQt5.QtGui import *from PyQt5.QtCore import ...
- C#多个泛型约束问题
多个约束之间使用逗号隔开,但不重复T约束. 1. private void AddControl<T>(TabPage tabPage, T userControl) where T: U ...