【免费】web前端大学生期末作业设计网页（html、css、js）-哈尔的移动城堡，实现轮播图、图片跟随鼠标移动、人物小卡片

共57个文件

webp：13个

jpeg：11个

jpg：9个

需积分: 0 110 浏览量更新于2023-12-07 13 收藏 10.37MB ZIP 举报

本实例是基于前端web的html、css、js，以哈尔的移动城堡为主题设计的一个动漫主题网站，需要的同学可以直接更换内容进行修改，也可以来直接问博主问题，博主会仔细回答。本实例一共6个页面，每个图文搭配合理，简洁明了。通过使用CSS和JavaScript实现了轮播图功能，使得图片能够自动切换展示。同时，通过CSS创建了人物小卡片，当鼠标悬停在图片上时，图片会放大显示。此外，还使用了JavaScript实现鼠标点击获取图片的功能，并创建了一个填写表单，按钮以及弹窗响应。具体来说，CSS用于设置轮播图的样式和动画效果，使其能够自动切换图片。而JavaScript则负责处理用户的交互操作，如鼠标点击、表单提交等。在鼠标悬停图片时，通过CSS的transform属性将图片放大；而在鼠标点击图片时，通过JavaScript获取选中的图片，并创建一个填写表单供用户填写相关信息。最后，通过JavaScript的alert函数弹出一个弹窗，向用户展示提交成功的信息。本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习

收起资源包目录

哈尔的移动城堡.zip （57个子文件）

哈尔的移动城堡

pages

yinyue.html 3KB

jieshuo.html 8KB

bizhi.html 2KB

jiaoliu.html 5KB

renwu.html 5KB

js.js 2KB

jiaoliu.js 957B

bizhi.js 350B

css

style.css 4KB

yinyue.css 2KB

bizhi.css 2KB

jiaoliu.css 2KB

jieshuo.css 2KB

renwu.css 3KB

index.html 4KB

images

img033.jpeg 147KB

img020.jpeg 112KB

img010.jpeg 67KB

img012.jpeg 424KB

img027.jpg 22KB

img031.jpg 23KB

img038.webp 17KB

img017.webp 150KB

img018.webp 114KB

bg01.jpg 333KB

img023.webp 87KB

img002.png 446KB

img016.png 950KB

img015.webp 152KB

img024.jpg 38KB

img005.png 372KB

logo001.png 12KB

img025.webp 61KB

img014.webp 83KB

img011.jpg 50KB

img036.webp 75KB

img032.jpeg 61KB

img006.webp 88KB

img030.jpeg 27KB

img022.png 71KB

img026.jpeg 62KB

img021.webp 46KB

img035.jpeg 105KB

img037.jpg 186KB

img001.png 437KB

img008.webp 58KB

img004.png 412KB

img029.jpeg 103KB

m01.mp3 4.03MB

img007.webp 127KB

img034.jpeg 125KB

img013.jpeg 143KB

img019.jpg 230KB

img009.webp 88KB

img039.jpg 32KB

img028.jpg 22KB

img003.png 358KB

资源推荐

资源预览

资源评论

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="../css/jieshuo.css" /> <title>剧情解说</title> </head> <body> <div class="wrapin">  <img src="../images/bg01.jpg" class="imgtop"> <header> <ul class="nav clearfix"> <li><a href="../index.html">首页</a></li> <li><a href="renwu.html">人物介绍</a></li> <li><a href="jieshuo.html">剧情解说</a></li> <li><a href="yinyue.html">音乐鉴赏</a></li> <li><a href="bizhi.html">精美壁纸</a></li> <li><a href="jiaoliu.html">写信交流</a></li> </ul> </header>  <div class="con"> <div class="top clearfix"> <div class="text"> <h2>➤战争的起因</h2> <p>苏菲(主角)是一个在一家帽子店工作的年轻女子。此刻，苏菲的国家正与另一个王国交战。战争始于另一个国家贾斯廷王子的失踪。那个王国把责任推到苏菲的国家身上，于是他们互相宣战。</p> <h2>➤谁是哈尔?</h2> <p>他是一个有好几个化名的强大巫师。哈尔拥有一个移动城堡，由一个名叫卡西法的火恶魔提供能量。哈尔家的门本质上是通往不同城市的入口，在每个城市里，人们都知道哈尔的不同名字。</p> <p>许多年前，哈尔与荒野女巫有过一段短暂的恋情。他遇见她时，她还是一个年轻貌美的女子，但是当他发现这一切都是假象时，他就跑掉了。</p> <h2>➤荒野女巫的传说</h2> <p>荒野女巫也是王国里最强大的魔法师之一。然而，五十年前，国王把她送到了“荒野”，并禁止她进入王国，因为他认为她很危险。尽管哈尔对她完全不感兴趣，但荒野女巫坚持跟踪哈尔，并尽其所能来夺取他的心。</p> </div> <div class="pic"> <img src="../images/img028.jpg"/> </div> <br> <div class="pic"> <img src="../images/img027.jpg"/> </div> </div> <div class="text"> <h2>➤苏菲离家</h2> <p>苏菲是个内向的小女孩。在她去见妹妹莱蒂的路上，两个皇家卫兵拦住了她。他们骚扰她，但一个名叫哈尔的年轻人来了，并把她从这种情况下解救出来。在拜访了蕾蒂之后，苏菲就回家了。</p> <p>在帽店，一个被称为荒野女巫的女人走了进来。这个女人对苏菲施了魔法，把她变成了一个很老的女人。由于害怕家人的反应，苏菲离开了家，前往乡下。</p> <p>在旅途中，她遇到了一个萝卜头的稻草人。她和稻草人成了朋友，他带着她来到哈尔的城堡。苏菲走进房间，遇到了一个名叫卡西法的火魔。他提议帮助苏菲解除诅咒，前提是她同意帮助他解除诅咒，也就是互相解开诅咒。第二天，索菲遇到了一个叫马鲁克的小男孩，他是哈尔的学徒。哈尔回家后，苏菲介绍自己是清洁女工。</p> <div class="tupian"> <ul class="clearfix"> <li><img src="../images/img029.jpeg"/></li> <li><img src="../images/img030.jpeg"/></li> <li><img src="../images/img031.jpg"/></li> </ul> </div> </div> <div class="text"> <h2>➤哈尔的内心</h2> <p>哈尔经常离开家来阻止两个王国之间的战争。国王召唤所有强大的巫师战斗，包括哈尔，但他拒绝了。因此，他作为和平使者，以一人之力对抗双方，以阻止冲突升级。在清洁过程中，索菲换了几个哈尔的瓶子(染发产品)。这个操作使哈尔的头发改变了颜色，这使他非常心烦。在他平静下来之后，他承认自己无法面对他人，并且习惯逃避问题。</p> <h2>➤苏菲首次了解哈尔诅咒</h2> <p>哈尔反对战争，但他太害怕面对国王。因此，哈尔派苏菲(作为他的母亲)去说服国王，她的“儿子”太懦弱，不敢战斗。在去王宫的路上，苏菲遇到了荒野女巫，显然她收到了国王的邀请，正要去见国王。与此同时，一只老狗跟随苏菲去见国王。在皇宫里，苏菲遇到了莎莉曼夫人，她是国王的巫师，也是哈尔以前的导师。在他们的会面中，苏菲了解到了哈尔的诅咒(他没有心)。</p> <h2>➤莎莉曼的计划</h2> <p>莎莉曼透露了她想要剥夺哈尔的力量，就像她对荒野女巫所做的那样。然而，苏菲对莎莉曼的话并不认同，她为哈尔进行辩护。然后，哈尔他乔装成国王把苏菲带出了宫殿。他的乔装计划失败了，因为真正的国王走了过来，他别无选择，只能现出真身。莎莉曼试图阻止他们，但是最终还是让他们逃跑了出去。后来，哈尔给了苏菲一个指向卡西法(城堡的位置)的戒指。</p> <div class="tupian"> <ul class="clearfix"> <li><img src="../images/img032.jpeg"/></li> <li><img src="../images/img033.jpeg"/></li> <li><img src="../images/img034.jpeg"/></li> </ul> </div> <h2>➤哈尔的心之谜</h2> <p>哈尔最终了解到，哈尔经常变成一只鸟，在战争的双方进行战斗。然而，他每变形一次，要变回人形就变得越来越困难。同时，哈尔改变了城堡的内部，使它看起来像苏菲的老家。后来，敌人轰炸了苏菲的城镇。哈尔把苏菲从攻击和莎莉曼的追随者手中救了出来。不久之后，它又出发去保护他们，但可惜双拳难敌众手，绝望的苏菲试图把她的朋友们都带出城堡。然而，当她移除卡西法时，整个城堡倒塌了。在这个过程中，荒野女巫意识到卡西法是一个持有哈尔的心的火魔，不假思索，她抓住卡西法的同时，感觉到了哈尔的心。苏菲看到女巫着火了，就把水倒在她身上，把卡西法浇了下去。没有了一个活跃的火魔，城堡一分为二，索菲也离开了队伍。</p> <h2>➤穿越时空，了解真相</h2> <p>这枚魔法戒指把苏菲带到了过去。她看到哈尔抓住了一颗陨落的流星(就是卡西法)，并把自己的心给了他。在看到这个之后，苏菲掉进了一个黑暗的深渊，这个深渊将她传送回了现在。然后，她发现哈尔在等她，并告诉她带他们去见卡西法。苏菲与她的朋友们重聚，恳请荒野女巫把哈尔的心还给她，她答应了。苏菲拿起这颗心，把它放回了原来的地方。</p> <p>哈尔恢复了身体，卡西法现在自由了。虽然火妖飞走了，但它最终还是因为不舍回来了。苏菲重拾青春。因为坠落造成的严重损害，萝卜头几乎失去了生命。苏菲吻了他，结果他变成了一个英俊的男子，他透露出自己就是失踪的贾斯汀王子，他停止了战争，回到了自己的王国。老狗向莎莉曼报告了这件事，国王的巫师决定结束战争。随着战争的结束，哈尔，苏菲和其他人飞在一个新的移动城堡中。</p> <div class="tupian"> <ul class="clearfix"> <li><img src="../images/img035.jpeg"/></li> <li><img src="../images/img036.webp"/></li> <li><img src="../images/img037.jpg"/></li> </ul> </div> </div> </div>  <footer>They say that the harsher the environment, the brightest the flames will be.</footer> </div> <script type="text/javascript" src="../js/js.js"></script> </body> </html>