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