Javascript实现网站常见动画
文章平均质量分 92
网站开发中常见的一些展示数据图片的操作功能
林二禾
千里之行,始于足下。
展开
-
原生js实现切换选项卡效果,点击某一选项展示对应内容【含完整html代码】
CSS1、左右布局,设置选项卡左浮动,内容右浮动。为防止当子元素设置浮动脱标后,父元素卡片塌陷,可以设置父元素overflow: hidden;,利用BFC机制消除浮动带来的影响。2、右侧内容展示区,文字和图片用一个包裹,设置display: none;,即默认不加载。再定义一个激活类,设置display: block;,激活状态下加载div。JavaScript1、利用事件委托,为父元素添加监听事件onclick,判断用户点击的是哪个选项卡。2、每次点击事件发生后,将点击的选项卡对原创 2023-02-25 12:03:34 · 1893 阅读 · 0 评论 -
原生js实现网页淘宝产品展示效果,鼠标移入小图展示对应大图(事件委托、事件传播、冒泡机制)【含完整代码】
淘宝网页产品展示模块如下:当鼠标移入小图,在上方会相应地展示大图当鼠标移入小图,在上方会相应地展示大图;且当鼠标移出,图片停留在移入时显示的图片,不会改变。本文实现效果如下(鼠标移入即改变,不用点击):定义图片列表,为列表添加鼠标移入事件(注意:此处不能使用,因为此方法不支持冒泡机制),当鼠标移入列表,判断移入的是具体哪张图,把这张图渲染到大图上。此例子利用了事件委托,即批量添加事件监听。当需要给每个子元素添加事件监听时,可以委托给父元素添加事件监听,然后通过e.target( )获取具体被点击的原创 2023-02-22 17:09:48 · 2717 阅读 · 0 评论 -
原生js实现复选框(全选/全不选/反选)效果【含完整代码】
1、勾选后,可以获取到所勾选的值组成的数组,并展示到页面;2、全部勾选,以及取消勾选时,要相应地更新全选框的状态及文字显示;3、点击反选,将所有选项的选择状态置换,并相应改变全选框的状态;定义一个数组checkValues,存放用户所勾选的内容。再定义一个函数,遍历选框数组checks,如果选框checks[i]被选择,则将value加入数组。遍历完成后,使用属性将数组展示到页面中。捕获选框的点击事件,当用户点击时,执行。2、更新全选框状态及文字显示定义一个判断是否全选的函数,遍历选框数组原创 2023-02-21 15:38:18 · 14333 阅读 · 1 评论 -
原生js实现相册效果(样例),手动切换上下张图片【含代码】
原生js实现图片点击切换的效果原创 2023-02-20 16:26:24 · 717 阅读 · 0 评论 -
原生js实现渐出渐入式(呼吸式)轮播图【含完整代码】
原生javascript实现图片的渐出渐入式轮播。使多张图片层叠在一起,结合定时器,在切换图片时改变相邻图片的透明度,从而实现渐变轮播效果。原创 2023-02-20 15:17:07 · 984 阅读 · 0 评论 -
js实现左右切换轮播图效果
js实现图片跑马灯式轮播效果,可点击切换上下张,下方有定位圆点随图片切换激活状态原创 2023-02-19 12:24:43 · 4657 阅读 · 3 评论 -
js实现图片连续滚动播放
图片连续滚动播放效果原创 2023-02-18 23:17:02 · 3482 阅读 · 2 评论