![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js事件
小李要努力呀~
这个作者很懒,什么都没留下…
展开
-
用JS写出JS事件中京东图片放大特效
图片放大特效 准备两张相同的图片,小图和大图。 小图显示在商品的展示区域。 大图用于鼠标在小图上移动时,按比例的显示大图中的对应区域。 编写HTML页面,展示小图、隐藏鼠标的遮罩及大图。 当鼠标在小图上移动时,显示鼠标的遮罩和大图。 当鼠标移动时,让遮罩跟着在小图中进行移动。 限定遮罩在小图中的可移动范围。 根据遮罩在小图中的覆盖范围,按比例的显示大图。 CSS页面代码: <style > * {.原创 2022-05-06 10:13:57 · 355 阅读 · 0 评论 -
用JS实现缓动的小球的效果。
缓动的小球 缓动的实现原理:通过定时器连续的修改当前DOM元素的某个样式值,达到一个动态的特效。 缓动动画公式: 计算每次缓动的步长 step = ( target - leader ) / 10 计算下次的起始点 leader = leader + step target 表示目标点。 leader 表示起始点。 step 表示从起始点到目标点每次缓动的步长。而缓动特效在实现时,随着距离 target 越来越近,s.原创 2022-04-27 16:09:35 · 1711 阅读 · 0 评论 -
用js编写,鼠标拖拽特效。
盒子的位置(left和top值)= 鼠标的位置(left和top值)- 鼠标按下时与盒子之间的距离(left和top值)。 编写HTML,设计弹框用于实现拖拽特效。 为拖拽条添加mousedown事件及其处理程序。 处理鼠标移动事件,实现鼠标的拖拽的特效。 处理释放鼠标按键的事件,实现鼠标按钮松开后,弹框不再移动。 css页面代码: <style> *{ margin: 0; padding: 0; ...原创 2022-04-27 13:41:56 · 1345 阅读 · 0 评论