用JS实现放大镜特效
本文最后更新于 1124 天前,其中的信息可能已经有所发展或是发生改变。

课程地址:https://www.imooc.com/learn/32

效果分析

  1. 一张小图,一张大图
  2. 图片大小等比进行计算

结构分析

  1. 页面结构
  2. 技术点
    1. 事件捕获
    2. 定位
    3. 相关位置计算
    4. 。。。

要用到的知识点

事件相关

  1. onmouseover :会在鼠标指针移动到指定的对象.上时发生。
  2. onmouseout :会在鼠标指针移出指定的对象时发生。
  3. onmousemove :会在鼠标指针移动时发生。

距离相关, 演示地址: https://github.xiaodongxier.com/demo/知识点/定位属性

  1. offsetLeft:元素在左外边框至包含元素的左内边框之间的像素距离。
  2. offesetTop:元素在上外边框至包含元素的上内边框之间的像素距离。
  3. offsetWidth:元素在水平方向上占用的空间大小,以像素计。包括元素的高度、(可见的)垂直滚动条的宽度、左边框宽度和有边框宽度。
  4. offsetHeight:元素在垂直方向上占用的空间大小,以像素计。包括元素的高度、(可见的)水平滚动条的高度、左边框高度和右边框高度。
  5. even.clientX
  6. even.clientY

标题:用JS实现放大镜特效
地址:https://xiaodongxier.com/93.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇