JQuery 实现PPT效果，点跳目标页及翻页（待改进）
2024-09-05 18:29:15
实现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>
最新文章
- bzoj1079--记忆化搜索
- Arcmap中加载互联网地图资源
- POJ 2387 Til the Cows Come Home（最短路 Dijkstra/spfa）
- 25M电子琴实现
- Windows Phone 二、WP控件
- Linux（CentOS）常用操作指令（一）
- LeetCode Find Minimum in Rotated Sorted Array II
- Bootstrap的标题
- ASP.NET运行机制原理
- Android——TableLayout
- 寻找对象在父元素下的index
- wdlinux 编译pdo_mysql
- POJ题目细究
- form里两个submit按钮，在onsubmit中判断哪个被点
- QtQuick桌面应用程序开发指南 4)动态管理Note对象_B 5)加强外观 6)许多其他的改进
- java 计算源码的行数
- c语言中的#ifdef和#ifndef
- Java Web之验证码
- 数位dp 模板
- 菜鸟脱壳之脱壳的基础知识（五）——利用内存断点寻找OEP