JS
Taco taco
这个作者很懒,什么都没留下…
展开
-
在JavaScript中实现商品图片的局部放大(放大镜)
对商品实现放大镜效果其实是拖拽事件的拓展。 在电商网站等购买东西的时候,我们经常会预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节。本文将带领大家写一个这样简单的功能! 实现原理: 当鼠标移入某一图片内部时,图片上部会出现一个类似于扫描的框,这个框内的图片部分,会以方大形式展示在右边,如下图: 完整代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">原创 2020-07-09 20:12:15 · 929 阅读 · 0 评论 -
Javascript中拖拽功能的实现(已对IE低版本进行兼容化处理)
在拖拽div的基础上,加了对图片拖拽的捕获处理,并对IE低版本浏览器的兼容性问题进行了处理。 该拖拽功能分为三个事件组成: 1.鼠标按下事件 onmousedown; 2.鼠标移动事件 onmousemove; 3.鼠标抬起事件 onmouseup。 效果图如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta原创 2020-07-08 20:33:47 · 293 阅读 · 0 评论 -
Javascript中的事件委托机制
** 事件委托机制 ** 事件委托的原理是事件添加元素父节点(原理:事件的冒泡机制)。 将事件添加到父元素上,当事件发生时,父元素会找到对应触发事件的子元素去处理,后期添加的子元素,依然有这个事件。 我通过一个在列表添加、修改和删除事件来展示一下事件委托。 案例的HTML代码 <ul> <li>列表1 <span class="del">删除</span> <span class="update">修改</span>&l原创 2020-07-08 09:56:12 · 209 阅读 · 0 评论