- 博客(10)
- 收藏
- 关注
RSS订阅原创 原生js实现切换选项卡效果，点击某一选项展示对应内容【含完整html代码】
CSS1、左右布局，设置选项卡左浮动，内容右浮动。为防止当子元素设置浮动脱标后，父元素卡片塌陷，可以设置父元素overflow: hidden;，利用BFC机制消除浮动带来的影响。2、右侧内容展示区，文字和图片用一个包裹，设置display: none;，即默认不加载。再定义一个激活类，设置display: block;，激活状态下加载div。JavaScript1、利用事件委托，为父元素添加监听事件onclick，判断用户点击的是哪个选项卡。2、每次点击事件发生后，将点击的选项卡对
2023-02-25 12:03:34
1908
原创 什么是BFC机制，如何触发BFC（消除浮动带来的父元素塌陷、垂直方向margin重叠、嵌套块级元素父元素margin塌陷）
简单来说，BFC提供了一个独立的布局环境，BFC中的元素布局不受外部元素的影响，也不会影响到外部元素。触发BFC的几种方式1、给元素设置浮动 float: left | right2、给元素设置脱离文档流的定位 position: absolute | fixed3、给元素设置内容溢出 overflow: hidden | scroll |auto4、给元素设置 display: flex | inline-block | table-cell。几种常见问题：1、父级外边距折叠塌陷问题2、margi
2023-02-25 11:53:52
2012
原创 原生js实现网页淘宝产品展示效果，鼠标移入小图展示对应大图（事件委托、事件传播、冒泡机制）【含完整代码】
淘宝网页产品展示模块如下：当鼠标移入小图，在上方会相应地展示大图当鼠标移入小图，在上方会相应地展示大图；且当鼠标移出，图片停留在移入时显示的图片，不会改变。本文实现效果如下（鼠标移入即改变，不用点击）：定义图片列表，为列表添加鼠标移入事件（注意：此处不能使用，因为此方法不支持冒泡机制），当鼠标移入列表，判断移入的是具体哪张图，把这张图渲染到大图上。此例子利用了事件委托，即批量添加事件监听。当需要给每个子元素添加事件监听时，可以委托给父元素添加事件监听，然后通过e.target( )获取具体被点击的
2023-02-22 17:09:48
2724
原创 原生js实现复选框（全选/全不选/反选）效果【含完整代码】
1、勾选后，可以获取到所勾选的值组成的数组，并展示到页面；2、全部勾选，以及取消勾选时，要相应地更新全选框的状态及文字显示；3、点击反选，将所有选项的选择状态置换，并相应改变全选框的状态；定义一个数组checkValues，存放用户所勾选的内容。再定义一个函数，遍历选框数组checks，如果选框checks[i]被选择，则将value加入数组。遍历完成后，使用属性将数组展示到页面中。捕获选框的点击事件，当用户点击时，执行。2、更新全选框状态及文字显示定义一个判断是否全选的函数，遍历选框数组
2023-02-21 15:38:18
14452
1
原创 原生js实现渐出渐入式（呼吸式）轮播图【含完整代码】
原生javascript实现图片的渐出渐入式轮播。使多张图片层叠在一起，结合定时器，在切换图片时改变相邻图片的透明度，从而实现渐变轮播效果。
2023-02-20 15:17:07
990
原创 【html】消除html代码回车换行导致的网页元素之间的空隙
在设置外边距margin和内边距padding为0的前提下，渲染出的页面元素之间仍然存在空隙，可以设置父元素font-size为0px
2022-05-03 18:09:41
1474
原创 【CSS】记踩坑-图片3D旋转设置景深perspective
为了使图片具有3D旋转rotateX的立体效果，设置了perspective属性，但发现图片的旋转角度发生了偏移,并没有在垂直方向旋转。
2022-04-14 22:40:37
914
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人