自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(1)
  • 收藏
  • 关注

原创 web前端大学生期末作业设计网页(html、css、js)-哈尔的移动城堡,实现轮播图、图片跟随鼠标移动、人物小卡片(附源码)

首页页面有三个部分,分别是动漫简介、动漫评价、精彩图集,精彩图集还可以通过轮播图点击左右按钮实现播放剧照,红色方框的logo是图片跟随鼠标移动(截图原因无法显示鼠标)。页面有6个人物小卡片,每个卡片上有人物的名字和照片。鼠标移动到小卡片上图片缩小成圆形状,显示被图片覆盖住的文字,内容是人物的名字、性格,若有联网,点击“了解更多”还可以跳转到百度百科页面。鼠标移动到卡片上显示。

2023-12-08 13:32:28 1477 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关注的人

提示
确定要删除当前文章?
取消 删除