- 博客(1)
- 收藏
- 关注
原创 web前端大学生期末作业设计网页(html、css、js)-哈尔的移动城堡,实现轮播图、图片跟随鼠标移动、人物小卡片(附源码)
首页页面有三个部分,分别是动漫简介、动漫评价、精彩图集,精彩图集还可以通过轮播图点击左右按钮实现播放剧照,红色方框的logo是图片跟随鼠标移动(截图原因无法显示鼠标)。页面有6个人物小卡片,每个卡片上有人物的名字和照片。鼠标移动到小卡片上图片缩小成圆形状,显示被图片覆盖住的文字,内容是人物的名字、性格,若有联网,点击“了解更多”还可以跳转到百度百科页面。鼠标移动到卡片上显示。
2023-12-08 13:32:28
4319
4
web前端大学生期末作业设计网页(html、css、js)-哈尔的移动城堡,实现轮播图、图片跟随鼠标移动、人物小卡片
本实例是基于前端web的html、css、js,以哈尔的移动城堡为主题设计的一个动漫主题网站,需要的同学可以直接更换内容进行修改,也可以来直接问博主问题,博主会仔细回答。
本实例一共6个页面,每个图文搭配合理,简洁明了。通过使用CSS和JavaScript实现了轮播图功能,使得图片能够自动切换展示。同时,通过CSS创建了人物小卡片,当鼠标悬停在图片上时,图片会放大显示。此外,还使用了JavaScript实现鼠标点击获取图片的功能,并创建了一个填写表单,按钮以及弹窗响应。
具体来说,CSS用于设置轮播图的样式和动画效果,使其能够自动切换图片。而JavaScript则负责处理用户的交互操作,如鼠标点击、表单提交等。在鼠标悬停图片时,通过CSS的transform属性将图片放大;而在鼠标点击图片时,通过JavaScript获取选中的图片,并创建一个填写表单供用户填写相关信息。最后,通过JavaScript的alert函数弹出一个弹窗,向用户展示提交成功的信息。
本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习
2023-12-07
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人