JavaScript+jQuery课程设计

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

JavaScript+jQuery
开发框架课程设计
题目htm15海贼王单页时差滚动特效
院（系）信息工程学院
专业班级
学生姓名
学号
设计地点 4号实验楼104
指导教师陈洋
起止时间：2015年6月8日至2015年6月12日
目录
1 前言 (3)
1.1课程设计思路 (3)
1.2课程设计目标 (3)
2 关键技术 (4)
2.1 内容 (4)
2.2 要求 (5)
3 总体设计 (5)
4 详细设计 (6)
5 运行结果 (17)
6 结束语 (18)
7 参考文献 (19)
1 前言
能更好的融入进HTML5网页中。

能使HTML5的网页动态效果更佳。

Javascript是一种非常好的语言。

使我们的浏览网页更丰富多彩。

、
1.1课程设计思路
理解在html5网页中插入javascript的方法
1.2课程设计目标
1.能够熟练javascript，通过咨询和考察，最终确定并实现网页布局。

同时使用动态样式表甚至可以让图片的切换获得多种转场效果。

2．熟练使用javascript和css中的内建对象最终实现视差滚动的特效。

2 关键技术
2.1 内容
Javascript在网页的用法
Javascript加入网页有两种方法：
1、直接加入HTML文档
这是最常用的方法，大部分含有Javascript的网页都采用这种方法，如：
<script language="Javascript">

</script>
在这个例子中，我们可看到一个新的标签：<script>……</script>，而<script language="Javascript”> 用来告诉浏览器这是用Javascript编写的程序，需要调动相应的解释程序进行解释。

HTML的注释标签：用来去掉浏览器所不能识别的Javascript源代码的，这对不支持Javascript 语言的浏览器来说是很有用的。

//-Javascript结束：双斜杠表示Javascript的注释部分，即从//开始到行尾的字符都被忽略。

至于程序中所用到的document．write（）函数则表示将括号中的文字输出到窗口中去，这在后面将会详细介绍。

另外一点需要注意的是，<script>……</script>的位置并不是固定的，可以包含在< head>......</head> 或<body>.....</body>中的任何地方。

2、引用方式如果已经存在一个Javascript源文件（以js为扩展名），则可以采用这种引用的方式，以提高程序代码的利用率。

其基本格式如下：
<script src＝url language="Javascript"></script>
其中的Url就是程序文件的地址。

同样的，这样的语句可以放在HTML文档头部或主体的任何部分。

如果要实现“直接插入方式”中所举例子的效果，可以首先创建一个Javascript 源代码文件“Script.js”，其内容如下：
document.writeln("这是Javascript！采用直接插入的方法！");
在网页中可以这样调用程序：<script src＝"Script.js" language="Javascript"></script> 。

2.2 要求
在html5中插入javascript脚本文件。

实现HTML5的视差滚动特效的实现
3 总体设计
利用自己对海贼王的喜欢。

在此介绍网页中。

HTML5中添加了javascript的特效。

实现了时差滚动的特效。

使更多人能更好的接受海贼王这个动漫。

更使整个页面更加的美观。

传播更好的动漫文化。

总体将javascript更好的融入到HTML5内。

使网页更出彩
4 详细设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CS-ONPICE!</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link href="css/datouwang.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/munbers.js"></script>
<style type="text/css">

</style>
</head>
<body>
<div class="top">
<div class="top_main center">
<ul id="scene" class="scene">
<li class="layer" data-depth="0.10"><img class=" top_img02" src="images/top_img03.png"></li>
<li class="layer" data-depth="0.40"><img class=" top_img04" src="images/top_img04.png"></li>
<li class="layer" data-depth="0.60"><img class=" top_img05" src="images/top_img05.png"></li>
<li class="layer" data-depth="0.90"><img class=" top_img06" src="images/top_img06.png"></li>
<li class="layer" data-depth="0.20"><img class=" top_img07" src="images/top_img04.png"></li>
<li class="layer" data-depth="0.60"><img class=" top_img08" src="images/top_img05.png"></li>
<li class="layer" data-depth="0.40"><img class=" top_img09" src="images/top_img06.png"></li>
<li class="layer" data-depth="0.10"><img class=" top_img10" src="images/top_img05.png"></li>
<li class="layer" data-depth="0.60"><img class=" top_img11" src="images/top_img06.png"></li>
<li class="layer" data-depth="0.50"><img class=" top_img12" src="images/top_img04.png"></li>
<li class="layer" data-depth="0.40"><img class=" top_img13" src="images/top_img04.png"></li>
<li class="layer" data-depth="0.20"><img class=" top_img14" src="images/top_img06.png"></li>
<li class="layer" data-depth="0.10"><img class=" top_img15" src="images/top_img05.png"></li>
</ul>
<img class="lx01" src="images/lx01.png">
<img class="lx02" src="images/lx02.png">
<img class="lx03" src="images/lx03.png">
<img class="lx04" src="images/lx02.png">
<img class="lx05" src="images/lx03.png"> </div>
</div>
<div class="section1">
<div class="sec_c1">
<h1>关于海贼王</h1>
<hr style="border:3 double #987cb9; margin-bottom:40px; box-shadow:0 0 5px yellow" width="100%" color=yellow SIZE=3;>
<p>航海王（日本尾田荣一郎创作的漫画）</p>
<p>拥有财富、名声、权力，这世界上的一切的男人“海贼王”哥尔·D·罗杰，在被行刑受死之前说了一句话，让全世界的人都涌向了大海。

“想要我的宝藏吗？如果想要的话，那就到海上去找吧，我全部都放在那里。

”，世界开始迎接“大海贼时代”的来临。

</p>
<p>时值“大海贼时代”，为了寻找传说中海贼王罗杰所留下的大秘宝“ONE PIECE”，无数海贼扬起旗帜，互相争斗。

一个叫路飞的少年为了与因救他而断臂的香克斯的约定而出海，在旅途中不断寻找志同道合的伙伴，开始了以成为海贼王为目标的伟大冒险旅程</p>
</div>
</div>
<!-- <div class="section2">
<div class="sec_c2">
<h1>人生中有些事你不竭尽所能去做，你永远不知道你自己有多出色。

</h1>
<p>by.海贼王</p>
</div>
</div> -->
<div class="section3">
<div id="carousel_container" class="carousel slide full_height">
<div class="carousel-inner full_height">
<div id="m_01" class="page item active" progress="150">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>【船长】“草帽”蒙奇·D·路飞（蒙其·D·鲁夫）（モンキーD·ルフィ/Monkey D. Luffy）</p>
<p>年龄：17岁→19岁（漫画598话开始的“两年后”）</p>
<p>生日：5月5日（日本男孩节）</p>
<p>星座：金牛座</p>
<p>身高：172cm，174cm（两年后）</p>
<p>故乡：东海风车村</p>
<p>身份：草帽海贼团船长/草帽团三主力之一</p>
<p>喜欢的食物：肉</p>
<p>爱好：喜欢探险，感兴趣于新奇怪异的事物</p>
<p>身世：革命家蒙奇·D·龙的儿子，海军中将蒙奇·D·卡普的孙子，波特卡斯·D·艾斯及萨博的义弟。

</p>
<p>恶魔果实：超人系橡胶果实</p>
<p>霸气：霸王色霸气、武装色霸气、见闻色霸气</p>
<p>悬赏：3千万（可可亚西村事件）→1亿（阿拉巴斯坦事件）→3亿（司法岛事件)→4亿（顶上战争后）</p>
<p>声优：田中真弓</p>
</div>
</div>
</div>
</div>
<div id="m_02" class="page item" progress="300">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>【战斗员】“海贼猎人”罗罗诺亚·索隆（罗诺亚·卓洛/罗罗诺亚·佐罗）(ロロノア·ゾロ/Roronoa Zoro)</p>
<p>年龄：19岁→21岁（漫画598话开始的“两年后”）</p>
<p>生日：11月11日</p>
<p>星座：天蝎座</p>
<p>身高：178cm，181cm（两年后）</p>
<p>故乡：东海霜月村</p>
<p>身份：草帽海贼团剑士/草帽团三主力之一/海贼猎人</p>
<p>喜欢的食物：白米，海兽的肉，适合下酒的食物</p>
<p>爱好：睡觉、修炼、喝酒。

</p>
<p>缺点：路痴</p>
<p>霸气：武装色霸气、见闻色霸气</p>
<p>武器：和道一文字（古伊娜的刀）、雪走（在司法岛上被吃了锈锈果实的上校锈断了）、三代鬼彻、黑刀秋水（与武士龙马战斗后得到）</p>
<p>悬赏：6千万（阿拉巴斯坦事件）→1亿2000万（司法岛事件）</p>
<p>声优：中井和哉</p>
</div>
</div>
</div>
</div>
<div id="m_03" class="page item" progress="450">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>【航海士】“小贼猫”娜美（奈美）（ナミ/Nami）</p>
<p>年龄：18岁→20岁（漫画598话开始的“两年后”）</p>
<p>生日：7月3日</p>
<p>星座：巨蟹座</p>
<p>身高：169cm，170cm（两年后）</p>
<p>故乡：东海可可亚西村</p>
<p>身份：草帽海贼团航海士</p>
<p>喜欢的食物：都不错，但最喜欢橘子</p>
<p>爱好：钱，橘子，风车，地图</p>
<p>特长：绘制地图，观测天气，偷东西</p>
<p>武器：三截式长棍→天候棒→完全版天候棒（由乌索普所发明）→魔法天候棒（由气象岛学者改良）</p>
<p>悬赏：1600万（司法岛事件）</p>
<p>声优：冈村明美</p>
</div>
</div>
</div>
</div>
<div id="m_04" class="page item" progress="600">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>【狙击手】乌索普（骗人布/乌索布）（ウソップ/Usopp）</p>
<p>年龄：17岁→19岁（漫画598话开始的“两年后”）</p>
<p>生日：4月1日</p>
<p>星座：白羊座</p>
<p>身高：174cm,176cm(两年后)</p>
<p>故乡：东海西罗普村</p>
<p>身份：乌索普海贼团船长→草帽海贼团狙击手</p>
<p>喜欢的食物：秋岛的秋刀鱼，旺季的鱼类</p>
<p>爱好：发明各种东西、制造武器</p>
<p>霸气：见闻色霸气</p>
<p>绰号：狙击王、长鼻子</p>
<p>武器：弹弓、橡皮筋、铁锤、大独角仙（巨型弹弓）、“狙击王”的面具、黒兜（鱼人岛龙宫国战斗使用</p>
<p>悬赏：3000万（以“狙击王”的身份在司法岛事件中）</p>
<p>声优：山口胜平</p>
</div>
</div>
</div>
</div>
<div id="m_05" class="page item" progress="750">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>【厨师】“黑足”山治（香吉士/香吉/山智）（サンジ/Sanji）</p>
<p>年龄：19岁→21岁（两年后）</p>
<p>生日：3月2日（TV版为3月4日）</p>
<p>星座：双鱼座</p>
<p>身高：177cm，180cm(两年后)</p>
<p>故乡：北海</p>
<p>身份：草帽海贼团厨师/草帽团三主力之一</p>
<p>喜欢的食物：辣味海鲜面，适合红茶的食物</p>
<p>爱好：下厨，抽烟，浪漫幻想</p>
<p>能力：脚技、刀法、烹饪、月步</p>
<p>霸气：见闻色霸气、武装色霸气</p>
<p>绰号：白痴卷眉、厨子、色情厨子、鼻血厨师、海贼A （索隆所取），圈圈眉，褶子靓卷眉，好色河童，7号（在两年后肥皂泡群岛索隆叫的指到集中地点的先后顺序，索隆取的），黑足</p>
<p>悬赏：7700万（司法岛事件）</p>
<p>声优：平田广明/大谷育江（小时候）</p>
</div>
</div>
</div>
</div>
<div id="m_06" class="page item" progress="900">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>【船医】“爱吃棉花糖的驯鹿”托尼托尼·乔巴（多尼多尼·乔巴）（トニートニーチョッパー/Tony Tony Chopper）</p>
<p>年龄：15岁→17岁（漫画598话开始的“两年后”）</p>
<p>生日：12月24日</p>
<p>星座：摩羯座</p>
<p>身高：因身体变化而变化</p>
<p>故乡：伟大航路磁鼓王国（路飞赶走瓦波尔国王后改名樱花王国）</p>
<p>身份：草帽海贼团船长/草帽团三主力之一</p>
<p>身份：草帽海贼团船医</p>
<p>喜欢的食物：棉花糖，巧克力，所有甜的食物
绰号：蓝鼻子的怪物，喜欢棉花糖的宠物，怪物
恶魔果实：动物系人人果实</p>
<p>能力：8段变形，现能控制暴走形态需食用蓝波球</p>
<p>悬赏：50贝利（司法岛事件）</p>
<p>声优：大谷育江</p>
</div>
</div>
</div>
</div>
<div id="m_07" class="page item" progress="1050">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>【考古学家】“恶魔之子”妮可·罗宾（尼可·鲁宾）（ニコ·ロビン/Nico Robin）</p>
<p>年龄：28岁→30岁（漫画598话开始的“两年后”）</p>
<p>生日：2月6日</p>
<p>星座：水瓶座</p>
<p>身高：180cm</p>
<p>故乡：西海．考古之岛奥哈拉</p>
<p>身份：草帽海贼团考古学家</p>
<p>喜欢的食物：三明治，不太甜的蛋糕，适合咖啡的食物</p>
<p>恶魔果实：超人系花花果实</p>
<p>悬赏：7900万贝利（奥哈拉事件）→8000万贝利（司法岛事件）</p>
<p>声优：山口由里子</p>
</div>
</div>
</div>
</div>
<div id="m_08" class="page item" progress="1200">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>【船匠】“改造人（铁人）”弗兰奇（福兰奇/佛朗基，原名卡迪·佛兰姆）（フランキー/Franky）</p>
<p>年龄：34岁→36岁（漫画598话开始的“两年后”）</p>
<p>生日：3月9日</p>
<p>星座：双鱼座</p>
<p>身高：226（改造前），240cm（改造后）</p>
<p>故乡：伟大航路·七水之都water seven</p>
<p>身份：草帽海贼团船匠</p>
<p>喜欢的食物：汉堡包，炸薯条，搭配可乐的食物</p>
<p>绰号：人造人，变态</p>
<p>武器：除了后背外浑身都是武器（因为摸不到后背，两年后后背也改造了）</p>
<p>悬赏：4400万贝利（司法岛事件）</p>
<p>声优：矢尾一树/野田顺子（小时候）</p>
</div>
</div>
</div>
</div>
<div id="m_09" class="page item" progress="1350">
<div id="main">
<div id="splash">
<div class="container splash-container">
<p>【音乐家】“鼻歌”&“灵魂之王”布鲁克（ブルック/Brook）</p>
<p>年龄：88岁(50年前38岁) 40岁时战死，一年后复活。

(尾田在SBS的回答是88岁理由同第一句)</p>→90岁（漫画598话开始的“两年后”）
<p>生日：4月3日</p>
<p>星座：白羊座</p>
<p>身高：266CM(帽子约20公分)</p>
<p>体重：58Kg</p>
<p>故乡：西海</p>
<p>身份：草帽海贼团音乐家/剑士</p>
<p>爱好：演奏，喝红茶，牛奶，说骷髅冷笑话</p>
<p>特长：乐器、剑术</p>
<p>恶魔果实：超人系黄泉果实</p>
<p>绰号：灵魂之王，鼻歌</p>
<p>武器：丧魂之剑（拐杖）</p>
<p>悬赏：3300万贝利（50年前）</p>
<p>声优：长岛雄一</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="sec3_footer" >
<div id="navbar">
<div id="dash" ></div>
<div id="progress"></div>
<div id="navbtns" class="container" >
<div class="navbtn">
<a href="javascript:switchPage(0)">
<img src="images/c_01.png">
<div><p style="line-height:20px; color:#fff;">【船长】<br/>蒙奇·D·路飞</p></div>
</a> </div>
<div class="navbtn">
<a href="javascript:switchPage(1)">
<img src="images/c_02.png">
<div><p style="line-height:20px; color:#fff;">【战斗员】<br/>罗罗诺亚·索隆</p></div>
</a> </div>
<div class="navbtn">
<a href="javascript:switchPage(2)">
<img src="images/c_03.png">
<div><p style="line-height:20px; color:#fff;">【航海士】<br/>娜美</p></div>
</a> </div>
<div class="navbtn">
<a href="javascript:switchPage(3)">
<img src="images/c_04.png">
<div><p style="line-height:20px; color:#fff;">【狙击手】<br/>乌索普</p></div>
</a> </div>
<div class="navbtn">
<a href="javascript:switchPage(4)">
<img src="images/c_05.png">
<div><p style="line-height:20px; color:#fff;">【厨师】<br/>山治</p></div>
</a> </div>
<div class="navbtn">
<a href="javascript:switchPage(5)">
<img src="images/c_06.png">
<div><p style="line-height:20px; color:#fff;">【船医】<br/>托尼托尼·乔巴</p></div>
</a> </div>
<div class="navbtn">
<a href="javascript:switchPage(6)">
<img src="images/c_07.png">
<div><p style="line-height:20px; color:#fff;">【考古学家】<br/>妮可·罗宾</p></div>
</a> </div>
<div class="navbtn">
<a href="javascript:switchPage(7)">
<img src="images/c_08.png">
<div><p style="line-height:20px; color:#fff;">【船匠】<br/>弗兰奇</p></div>
</a> </div>
<div class="navbtn">
<a href="javascript:switchPage(8)">
<img src="images/c_09.png">
<div><p style="line-height:20px; color:#fff;">【音乐家】<br/>布鲁克</p></div>
</a> </div>
</div>
</div>
</div>
</div>
<script src="js/parallax.min.js"></script>
<script>
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p> </p>
<p class="STYLE1">CS 制作</p>
</div>
</body>
</html>
5 运行结果
图1 顺序表插入
6 结束语
本次课程设计已完成，我想我需要对自己这段时间内完成的课程设计做一个总结。

这几天有条不紊的课程设计，使我有机会对本专业的基本理论、专业知识和基本技术有了更深入的了解和体会，使我在一学期中所学到的知识得到了系统和升华，真正达到了学以致用。

从心态方面来说：在整个论文设计的过程中我学到了做任何事情所要有的态度和心态，首先我明白了做学问要一丝不苟，对于出现的任何问题和偏差都不要轻视，要通过正确的途径去解决，在做事情的过程中要有耐心和毅力，不要一遇到困难就打退堂鼓，只要坚持下去就可以找到思路去解决问题的。

在工作中要学会与人合作的态度，认真听取别人的意见，这样做起事情来就可以事倍功半。

（2）从实践方面来说：在本次的论文设计中，我充分的体会到了“实践出真知”这一点，书本上的知识是不够的，只有把理论与实践相结合才能够真正的学到
7 参考文献
1、李战《悟透JavaScript》电子工业出版社第１版 (2008年12月1日)
2、张利国.Java实用教程案例.北京：清华大学出版社，2003.10
3、李尊朝.Java语言程序设计.北京：中国铁道出版社
4、《Javascript开发王》/张亚飞编著——北京电子工业出版社深入浅出
5、周晓聪，等.面向对象程序设计与Java语言. 程序设计与北京：机械工业出版社，2004.3
6、JavaScript Christian Heilmann 著牛海彬等译人民邮电出版社。