当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 关于页面banner一种形式的相关代码（1）

关于页面banner一种形式的相关代码（1）

2020年07月22日  | 移动技术网IT编程  | 我要评论

首先我们要实现这种页面效果
当鼠标移入每张图片时，相对应的图片占满剩余空间

  1. 首先我们要做一些准备工作（将图片用标签展示到页面上，此时你可以使用HTML和css将相关代码写好，或者使用js生成相关节点和元素内容，在这里我们使用第一种方法）
  2. HTML设置好我们需要的标签和内容。由于我们需要的效果是每张图片有一部分展示到页面上，剩下的一部分需要隐藏，所以我们选择将图片添加到li标签中，给li标签设置一个尺寸
  3. CSS代码，此时我们需要给ul元素添加一个 overflow: hidden;规则，超出部分隐藏，因为我们的图片比设计稿上的宽要大一点
    HTML代码，设置好我们需要的标签和内容。由于我们需要的效果是每张图片有一部分展示到页面上，剩下的一部分需要隐藏，所以我们选择将图片添加到li标签中，给li标签设置一个尺寸
    CSS代码，此时我们需要给ul元素添加一个 overflow: hidden;规则，超出部分隐藏，因为我们的图片比设计稿上的宽要大一点

2、使用JS实现页面的交互效果，主要应用鼠标检测触发事件来实现。（实现了以上样式后，我们就要实现我们的移入移出效果了）此时我们可以考虑为li添加一个flex=1的规则，即如CSS中26行代码样式，我们需要通过在js中增加属性来控制鼠标移入移出是否相对应的图片占满剩余空间。两种方式如上：1、遍历li，将所有的classname=“yiru”都清空。2、控制鼠标移出，修改节点的classname=“”。
js的相关代码，此时我们可以考虑为li添加一个flex=1的规则，即如CSS中26行代码样式，我们需要通过在js中增加属性来控制鼠标移入移出是否相对应的图片占满剩余空间。两种方式如上：1、遍历li，将所有的classname=“yiru”都清空。2、控制鼠标移出，修改节点的classname=“”。
小小总结，不周正之处，望不吝赐教！感谢。

本文地址：https://blog.csdn.net/fingerartist/article/details/107489347

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网