概述
- 基本放大镜效果
- 首先是放大镜的追随效果,通过在原图注册的
onmousemove
事件获取事件的clientY
和clientX
配合其它参数值计算出放大镜在其父元素:原图的top
、left
属性的值。 - 放大图中的图片的
margin-top
、margin-left
属性去上面top
、left
的相反值
- 二次放大效果
- 为原图注册onmousewheel事件获取事件的wheeldelta判断放大还是缩小,配合CSS3的
transform
属性的scale()
值
代码
首先先介绍一个简单的工具函数 封装工具函数原文
封装工具函数
//返回元素对象到浏览器窗口偏移量
function offset(obj, direction) {
var offsetDir = 'offset' + direction[0].toUpperCase() + direction.substring(1);
var realNum = obj[offsetDir];
var positionParent = obj.offsetParent;
while (positionParent != null) {
realNum += positionParent[offsetDir];
positionParent = positionParent.offsetParent;
}
return realNum;
}
下面是完整代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>放大镜3.0</title>
<style>
* {
margin: 0;
padding