我亏一点 - 动画
type: channel
link: https://000081.xyz/index.php/tag/动画/
items: HTML5+CSS3+JavaScript实现放大镜功能
items: HTML5+CSS3+JavaScript实现拖曳并按照原轨迹返回
items: HTML5+CSS3+JavaScript实现大图滚动轮播功能
items: HTML5+CSS3+JavaScript实现触碰边界自动反向运动的小球

HTML5+CSS3+JavaScript实现放大镜功能
type: item
date: 2022-04-13T02:57:00+00:00
description: AI摘要 本文介绍了如何利用HTML5、CSS3和JavaScript实现网页图片放大镜功能。通过设置容器布局、定义放大镜样式，并结合鼠标移动事件动态计算坐标与缩放比例，实现了鼠标悬停时显示局部放大效果，提供了完整的代码示例。 此内容根据文章生成，仅用于文章内容的解释与总结 HTML5+CSS3+JavaScript实现放大镜功能预览{anote icon="" href="https://000081.xyz/html/227.html" type="success" content="点我预览"/}源代码 放大

HTML5+CSS3+JavaScript实现拖曳并按照原轨迹返回
type: item
date: 2022-04-12T16:02:00+00:00
description: AI摘要 本文介绍了如何利用HTML5、CSS3和JavaScript实现元素的拖曳功能，并记录拖曳轨迹，在鼠标松开后自动按原轨迹返回初始位置。通过数组记录坐标点及定时器回放，实现了平滑的轨迹还原效果。 此内容根据文章生成，仅用于文章内容的解释与总结 HTML5+CSS3+JavaScript实现拖曳并按照原轨迹返回预览{anote icon="" href="https://000081.xyz/html/224.html" type="success" content="点我预览"/}源代码 拖曳并按照原轨迹返回

HTML5+CSS3+JavaScript实现大图滚动轮播功能
type: item
date: 2022-04-12T15:20:00+00:00
description: AI摘要 本文介绍了如何使用HTML5、CSS3和JavaScript实现大图滚动轮播功能。通过CSS布局控制图片排列，利用JavaScript定时器实现自动滚动与循环播放，并支持鼠标悬停暂停及手动切换滚动方向，提供了完整的代码示例。 此内容根据文章生成，仅用于文章内容的解释与总结 HTML5+CSS3+JavaScript实现大图滚动轮播功能预览{anote icon="" href="https://000081.xyz/html/219.html" type="success" content="点我预览"/}源代码 大图滚动

HTML5+CSS3+JavaScript实现触碰边界自动反向运动的小球
type: item
date: 2022-03-29T11:10:00+00:00
description: AI摘要 本文介绍了如何利用HTML5、CSS3和JavaScript实现小球在容器内自动运动的效果。通过JavaScript定时器不断更新小球坐标，并检测其是否触碰边界，若触碰则将速度反向，从而实现小球在边界间的自动反弹运动。 此内容根据文章生成，仅用于文章内容的解释与总结 HTML5+CSS3+JavaScript实现触碰边界自动反向运动的小球 .wp { width: 600px; height: 300px; position: relative; border: 1px solid black; } .box { position: absolute; width: 50px; height: 50px; background-color: rgb(216, 21, 21); border-radius: 50%; left: 0px; top: 0px; transition: all 0.1s; } //横速度 var width_speed = 10; //纵速度 var height_speed = 10; //绑定小球和外边盒子对象 var out = document.getElementById("out"); var box = document.getElementById("box"); //外边盒子宽高 var out_width = out.clientWidth; var out_height = out.clientHeight; console.log(out_width); console.log(out_height); //小球当前位置 var cache_width = box.offsetLeft; var cache_height = box.offsetTop; //定时器动画 var timer = setInterval(function () { cache_width += width_speed; cache_height += height_speed; //如果触碰到边界，速度乘以-1，反向运动 if (cache_width >= out_width - box.offsetWidth || cache_width = out_height - box.offsetHeight || cache_height