文章目录

• 一、遇到的问题？
• 二、解决问题
• 三、开发环境
• 四、部分源码展示
• 五、部分成果展示
• 总结

一、遇到的问题？

1. 怎样让图片滚动起来？
2. 在展示Logo图片的时候，总是展示不全？例如：
   这种情况，图片下半部分没有展示出来，如果全部展示出来又太大了。

---

二、解决问题

1.通过在CSDN上查找办法，找到了用<marquee>标签的方法。它的基本语法是：

<marquee>
滚动内容
</marquee>

例如：

<marquee behavior="scroll" scrollamount="10" οnmοuseοver="this.stop()" οnmοuseοut="this.start()">
		<img src="./Image/display/1.jpg" width="500" height="300" border="0" alt="1" title="1"/>
		<img src="./Image/display/2.jpg" width="500" height="300" border="0" alt="2" title="2"/>
</marquee>

可以利用<marquee>的direction属性控制方向；scrollamount属性控制速度；onMouseOver="this.stop( )"的作用是当鼠标移动到滚动区域时，滚动内容将暂停滚动；onMouseOut="this.start( )"的作用是当鼠标移出滚动区域时，滚动内容将继续滚动。

2.最终，我采用了一种看图软件，将图片的尺寸进行了修改，最终展示出来就比较细长，看起来更加美观，也达到了我的目的。

---

三、开发环境

惠普64位笔记本一台，软件采用的是Visual Studio Code.

---

四、部分源码展示

4.1 HTML文件

4.2 CSS文件

4.3 JS文件
这个文件的功能就是通过选择不同的人物，进而展示人物的相关信息。

---

五、部分成果展示

这是首页的样子

这是图片展示，每行滚动的速度不同，当鼠标放上去的时候会停止滚动

这是部分相关剧场版的简介和观看链接，在页面最下方还有总的简介和观看链接

---

总结

这次的网页做的比较简单，并没有太多亮眼的地方。但是，通过这次对网页的开发，也让我对网页开发的整个过程有了更深的认识，对于HTML、CSS、JavaScript之间如何联系起来也更加的熟悉。虽然在此过程中遇到了一点点的小问题，但是通过各种搜索途径，也是找到了相应的方法来解决。从这次网页的开发中，我也找到了一些乐趣，发现前端开发是一件很有趣的事情。因为这次只是做了一个很简单的静态网站，我想通过进一步的学习，了解更多的前端知识，然后做一个更加完美的网站。

标签：Web,网页,展示,结业,当鼠标,课程,开发,滚动,图片
来源： https://blog.csdn.net/m0_59416558/article/details/118000808