实验要求
使用JQuery和AJAX，以及之前所学关于html, css, javascrip等的知识，实现如附件gif所示的网页阅读器，要求：
必须实现附件gif展示的所有功能和效果；
在满足要求1的基础上可以自行做美观方面、功能方面的拓展，酌情加分；
关于宽、高、位置、颜色等具体参数只要求大致相似，不严格要求相同；
效果动画
实验目的
- 学习jQuery相关知识并运用，实现网页的动态效果
- 复习之前所学的html，css，JavaScript的知识
实验内容
- 使用2.1.1版本的jQuery
<script src="http://code.jquery.com/jquery-2.1.1.min.js">
</script>
- 设置网页的基本css样式，用一个flex布局，实现阅读器的基本样式。
<style type="text/css">
#box {
display: flex;
flex-direction: column;
/* background-color: seagreen; */
}
#up {
width: 0px;
/*设为0，在JQuery中动画赋值*/
height: 32px;
background-color: red;
}
#middle {
width: 650px;
height: 700px;
display: flex;
flex-direction: row;
/*按列排版*/
}
#middle-left {
height: 0%;
width: 5%;
background-color: red;
}
#middle-right {
height: 0%;
width: 5%;
background-color: black;
}
#center {
height: 100%;
width: 90%;
text-align: center;
}
#bottom {
height: 32px;
width: 0px;
background-color: black;
}
- Html部分的代码，其中，四个页面的内容分别放在4个div中，id为1st-4th
<button id="start">开始阅读</button>
<div id="box">
<div id="up"></div>
<div id="middle">
<div id="middle-left"></div>
<div id="center">
文本
</div>
<div id="middle-right"></div>
</div>
<div id="bottom"></div>
</div>
<br>
<button id="page1">第一页</button>
<button id="page2">第二页</button>
<button id="page3">第三页</button>
<button id="page4">第四页</button>
- 编写script部分的代码，首先，让下面的阅读器的内容以及页面按钮全部隐藏
$("#1st").hide();
$("#2nd").hide();
$("#3rd").hide();
$("#4th").hide();
$("#page1").hide();
$("#page2").hide();
$("#page3").hide();
$("#page4").hide();
- 设置start按钮的事件，让第一页以及四个按钮显示，start隐藏，并设置加载的动画效果
$("#start").click(function () {
var div = $("#1st");
div.slideDown();
$("#start").hide();
$("#page1").show();
$("#page2").show();
$("#page3").show();
$("#page4").show();
$("#up").animate({ width: '650px' }, "slow");
$("#bottom").animate({ width: '650px' }, "slow");
$("#middle-left").animate({ height: '100%' }, "slow");
$("#middle-right").animate({ height: '100%' }, "slow");
$("#flip").show();//后面会提到
})
- 分别设置四个转页按钮的事件，隐藏和显实不同的界面即可
$("#page1").click(function () {
$("#1st").show();
$("#2nd").hide();
$("#3rd").hide();
$("#4th").hide();
})
$("#page2").click(function () {
$("#2nd").show();
$("#1st").hide();
$("#3rd").hide();
$("#4th").hide();
})
$("#page3").click(function () {
$("#3rd").show();
$("#2nd").hide();
$("#1st").hide();
$("#4th").hide();
})
$("#page4").click(function () {
$("#4th").show();
$("#2nd").hide();
$("#3rd").hide();
$("#3st").hide();
})
- 效果展示
- 功能添加
添加了一个读者评论界面，点击标签，向下滑动出现文本域进行评论
HTML：
<div id="flip"><b>读者有话说</b></div>
<div id="panel"><i>朱砂痣：</i><br>
<textarea name="" id="" cols="80" rows="6" background-color="gray"></textarea>
</div>
使用box-size属性进行盒子尺寸设置
CSS：
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: gray;
border: solid 1px #c3c3c3;
width: 640px;
display: none;
}
#panel {
padding: 20px;
display: none;
box-sizing: border-box;
}
jquery:
$("#flip").click(function () {
$("#panel").slideDown("slow");
});
记得在点击开始按钮之后显示此部分内容。
10. 界面美化：
将文本内容进行美化：
CSS：
p.title {
font-family: serif;
font-size: 2vw;
}
p.author {
font-size: 1vw;
font-family: fantasy;
color: red;
}
p.content {
font-family: serif;
}
- 最终效果：
实验效果
如上
实验完整代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
#box {
display: flex;
flex-direction: column;
/* background-color: seagreen; */
}
#up {
width: 0px;
/*设为0，在JQuery中动画赋值*/
height: 32px;
background-color: red;
}
#middle {
width: 650px;
height: 700px;
display: flex;
flex-direction: row;
/*按列排版*/
}
#middle-left {
height: 0%;
width: 5%;
background-color: red;
}
#middle-right {
height: 0%;
width: 5%;
background-color: black;
}
#center {
height: 100%;
width: 90%;
text-align: center;
}
#bottom {
height: 32px;
width: 0px;
background-color: black;
}
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: gray;
border: solid 1px #c3c3c3;
width: 640px;
display: none;
}
#panel {
padding: 20px;
display: none;
width: 653px;
box-sizing: border-box;
}
p.title {
font-family: serif;
font-size: 2vw;
}
p.author {
font-size: 1vw;
font-family: fantasy;
color: red;
}
p.content {
font-family: serif;
}
</style>
<title>阅读器</title>
</head>
<body>
<button id="start">开始阅读</button>
<div id="box">
<div id="up"></div>
<div id="middle">
<div id="middle-left"></div>
<div id="center">
<div id="1st">
<div>
<div>
<p class="title">早寒有怀</p>
<p class="author">唐 孟浩然</p>
</div>
<p class="content">
<br>木落雁南度，北风江上寒<br>
我家襄水曲，遥隔楚云端<br>
乡泪客中尽，孤帆天际看<br>
迷津欲有问，平海夕漫漫<br><br><br>
</p>
</div>
<div>
<div>
<p class="title">宫词</p>
<p class="author">唐 薛逢</p>
</div>
<p class="content">
<br>十二楼中尽晓妆，望仙楼上望君王<br>
锁衔金兽连环冷，水滴铜龙昼漏长<br>
云髻罢梳还对镜，罗衣欲换更添香<br>
遥窥正殿帘开处，袍袴宫人扫御床
</p>
</div>
</div>
<div id="2nd">
<div>
<div>
<p class="title">声声慢</p>
<p class="author">宋 李清照</p>
</div>
<p class="content">
<p>寻寻觅觅，冷冷清清，凄凄惨惨戚戚。乍暖还寒时候，最难将息。三杯两盏淡酒，怎敌他、晚来风急？雁过也，正伤心，却是旧时相识。</p>
<p>满地黄花堆积。憔悴损，如今有谁堪摘？守着窗儿，独自怎生得黑？梧桐更兼细雨，到黄昏、点点滴滴。这次第，怎一个愁字了得！</p><br><br><br>
</p>
</div>
<div>
<p class="title">春江花月夜</p><br>
<p class="author">唐 张若虚</p><br>
</div>
<p class="content">
春江潮水连海平，海上明月共潮生。<br>
滟滟随波千万里，何处春江无月明！<br>
江流宛转绕芳甸，月照花林皆似霰。<br>
空里流霜不觉飞，汀上白沙看不见。<br>
江天一色无纤尘，皎皎空中孤月轮。<br>
江畔何人初见月？江月何年初照人？<br>
人生代代无穷已，江月年年只相似。<br>
不知江月待何人，但见长江送流水。<br>
白云一片去悠悠，青枫浦上不胜愁。<br>
谁家今夜扁舟子？何处相思明月楼？<br>
可怜楼上月徘徊，应照离人妆镜台。<br>
玉户帘中卷不去，捣衣砧上拂还来。<br>
此时相望不相闻，愿逐月华流照君。<br>
鸿雁长飞光不度，鱼龙潜跃水成文。<br>
昨夜闲潭梦落花，可怜春半不还家。<br>
江水流春去欲尽，江潭落月复西斜。<br>
斜月沉沉藏海雾，碣石潇湘无限路。<br>
不知乘月几人归，落月摇情满江树。
</p>
</div>
<div id="3rd">
<div>
<p class="title">色论</p><br>
<p class="author">当代 木心</p>
</div>
<p class="content">
<p>淡橙红<br>
大男孩用情<br>
容易消褪<br>
里里外外罗密欧<br>
</p>
<p>淡绿是小女孩<br>
有点儿不着边际<br>
你索性绿起来算了<br>
</p>
<p>
粉红缎匹铺开<br>
恍惚香气流溢<br>
那个张爱玲就说了出来
</p>
<p>
紫自尊，覃思<br>
既紫，不复作他想
</p>
<p>
黄其实很稚气、横蛮
</p>
<p>
金黄是帝君<br>
柠檬黄是王子<br>
稻麦黄是古早的人性
</p>
<p>
蓝，智慧之色<br>
消沉了的热诚<br>
而淡蓝，仿佛在说<br>
又不是我自己要蓝啰
</p>
<p>
白的无为<br>
压倒性的无为<br>
宽宏大量的杀伐之气<br>
</p>
</p>
</div>
<div id="4th">
<p class="content">
<p>
黑保守吗<br>
黑是攻击性的<br>
在绝望中求永生
</p>
<p>
古铜色是思想家<br>
淡咖啡，平常心<br>
米黄最良善，驯顺
</p>
<p>
玫瑰红得意非凡<br>
娇艳独步<br>
一副色无庞旁贷的样子
</p>
<p>
青莲只顾自己<br>
小家气，妖气
</p>
<p>
钻蓝是闷闷不乐的君子<br>
多情，独身，安那其
</p>
<p>
土黄傻，不成其色
</p>
<p>
朱红比大红年轻<br>
朱红朱在那里不肯红
</p>
<p>
灰色是旁观色<br>
灰色在偷看别的颜色
</p>
<p>
大红配大绿<br>
顿起喜感<br>
红也豁出去了<br>
绿也豁出去了
</p>
</p>
</div>
</div>
<div id="middle-right"></div>
</div>
<div id="bottom"></div>
</div>
<br>
<button id="page1">第一页</button>
<button id="page2">第二页</button>
<button id="page3">第三页</button>
<button id="page4">第四页</button>
<br>
<br>
<div id="flip"><b>读者有话说</b></div>
<div id="panel"><i>朱砂痣：</i><br>
<textarea name="" id="" cols="80" rows="6" background-color="gray"></textarea>
</div>
<script>
$("#1st").hide();
$("#2nd").hide();
$("#3rd").hide();
$("#4th").hide();
$("#page1").hide();
$("#page2").hide();
$("#page3").hide();
$("#page4").hide();
$("#flip").click(function () {
$("#panel").slideDown("slow");
});
$("#start").click(function () {
var div = $("#1st");
div.slideDown();
$("#start").hide();
$("#page1").show();
$("#page2").show();
$("#page3").show();
$("#page4").show();
$("#up").animate({ width: '650px' }, "slow");
$("#bottom").animate({ width: '650px' }, "slow");
$("#middle-left").animate({ height: '100%' }, "slow");
$("#middle-right").animate({ height: '100%' }, "slow");
$("#flip").show();
})
$("#page1").click(function () {
$("#1st").show();
$("#2nd").hide();
$("#3rd").hide();
$("#4th").hide();
})
$("#page2").click(function () {
$("#2nd").show();
$("#1st").hide();
$("#3rd").hide();
$("#4th").hide();
})
$("#page3").click(function () {
$("#3rd").show();
$("#2nd").hide();
$("#1st").hide();
$("#4th").hide();
})
$("#page4").click(function () {
$("#4th").show();
$("#2nd").hide();
$("#3rd").hide();
$("#3st").hide();
})
</script>
</body>
</html>
扫一扫
792
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
