获取一个元素到页面的距离，限定区域拖拽元素，放大镜布局实现淘宝放大镜

最新推荐文章于 2021-03-20 07:35:00 发布
最新推荐文章于 2021-03-20 07:35:00 发布
阅读量157 收藏 1
点赞数
文章标签： 限定区域拖拽元素 放大镜布局 淘宝放大镜
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45675879/article/details/101604939
版权
获取一个元素到页面的距离
		 function offset(dom) {
		            // 返回一个对象
		            var obj = {
		                left: 0,
		                top: 0
		            }
            // 先让这个对象加上 dom的自己得到定位父元素的距离
            obj.left = dom.offsetLeft;
            obj.top = dom.offsetTop;
            // 判定浏览器是否是IE8 
            var isIE8 = window.navigator.userAgent.indexOf("MSIE 8") != -1;
            // 循环往上走 累加每一个offsetParent的offsetLeft和clientLeft 
            // 加每一个offsetParent的offsetTop和clientTop
            var offsetParent = dom.offsetParent;
            while (offsetParent != document.body) {
                if (isIE8) {
                    obj.left += offsetParent.offsetLeft;
                    obj.top += offsetParent.offsetTop;
                } else {
                    obj.left += offsetParent.offsetLeft + offsetParent.clientLeft;
                    obj.top += offsetParent.offsetTop + offsetParent.clientTop;
                }
                offsetParent = offsetParent.offsetParent;
            }
            return obj;
        }
限定区域拖拽对象：
				<style>
				        * {
				            margin: 0;
				            padding: 0;
				        }
				        .box {
				            position: absolute;
				            width: 100px;
				            height: 100px;
				            background-color: red;
				        }
				        #wrap {
				            width: 400px;
				            height: 400px;
				            position: absolute;
				            top: 100px;
				            left: 100px;
				            border: 1px solid #000;
				        }
				    </style>
				</head>
				<body>
				    <div id="wrap">
				        <div class="box"></div>
				    </div>
				    <script>
				        // 获取元素
				        var wrap = document.getElementById("wrap");
				        var box = document.querySelector(".box");
				        // 绑定鼠标按下事件
				        box.onmousedown = function(e) {
				            /* 鼠标按下时 记住鼠标此时的在视口中的位置 */
				            var x = e.clientX;
				            var y = e.clientY;
				            // 记住鼠标按下时 元素的定位值
				            var left = box.offsetLeft;
				            var top = box.offsetTop;
				            console.log("鼠标按下");
				            document.onmousemove = function(e) {
				                var moved_x = e.clientX;
				                var moved_y = e.clientY;
				                var resultX = left + moved_x - x;
				                var resultY = top + moved_y - y;
				                if (resultX < 0) {
				                    resultX = 0;
				                } else if (resultX > wrap.clientWidth - box.clientWidth) {
				                    resultX = wrap.clientWidth - box.clientWidth;
				                }
				                if (resultY < 0) {
				                    resultY = 0;
				                } else if (resultY > wrap.clientHeight - box.clientHeight) {
				                    resultY = wrap.clientHeight - box.clientHeight;
				                }                
				                box.style.left =resultX + "px";
				                box.style.top = resultY + "px";
				                /* 鼠标移动之后记住鼠标移动后的位置 这两个值相减 就是鼠标移动的距离 这个距离就是box元素相对于鼠标按下时定位值的变化距离  */
				            }
				        }
				        document.onmouseup = function() {
				            document.onmousemove = null;
				        }   
				    </script>
				</body>
放大镜布局
				<style>
				        * {
				            margin: 0;
				            padding: 0;
				        }
				        .box {
				            position: absolute;
				            top: 0;
				            left: 0;
				            width: 230px;
				            height: 230px;
				            background: url(./images/dotpng.png)
				        }
				        #wrap {
				            width: 430px;
				            height: 430px;
				            position: absolute;
				            top: 100px;
				            left: 100px;
				            border: 1px solid #000;
				        }
				        #bigArea {
				            width: 430px;
				            height: 430px;
				            position: absolute;
				            top: 100px;
				            left: 550px;
				            background: url(./images/big.jpg);
				            border: 1px solid #000;
				        }
				    </style>
				</head>
				<body>
				    <div id="wrap">
				        <img src="./images/small.jpg" >
				        <div class="box"></div>
				    </div>
				 <div id="bigArea">
				    </div>
				    <script>
				        // 获取元素
				        var wrap = document.getElementById("wrap");
				        var box = document.querySelector(".box");
				        var bigArea = document.getElementById("bigArea");
				        // 计算系数  小的镜片 比 右边的放大镜
				        var r = (wrap.clientWidth - box.clientWidth) / (800 - bigArea.clientWidth);
				        // 绑定鼠标按下事件
				        box.onmousedown = function(e) {
				            /* 鼠标按下时 记住鼠标此时的在视口中的位置 */
				            var x = e.clientX;
				            var y = e.clientY;
				            // 记住鼠标按下时 元素的定位值
				            var left = box.offsetLeft;
				            var top = box.offsetTop;
				            console.log("鼠标按下");
				            document.onmousemove = function(e) {
				                var moved_x = e.clientX;
				                var moved_y = e.clientY;
				
				                var resultX = left + moved_x - x;
				                var resultY = top + moved_y - y;
				                if (resultX < 0) {
				                    resultX = 0;
				                } else if (resultX > wrap.clientWidth - box.clientWidth) {
				                    resultX = wrap.clientWidth - box.clientWidth;
				                }
				                if (resultY < 0) {
				                    resultY = 0;
				                } else if (resultY > wrap.clientHeight - box.clientHeight) {
				                    resultY = wrap.clientHeight - box.clientHeight;
				                }                
				                box.style.left = resultX + "px";
				                box.style.top = resultY + "px";
				                /* 鼠标移动之后记住鼠标移动后的位置 这两个值相减 就是鼠标移动的距离 这个距离就是box元素相对于鼠标按下时定位值的变化距离  */
				                bigArea.style.backgroundPositionX = -resultX / r + "px";
				                bigArea.style.backgroundPositionY = -resultY / r+ "px";
				            }
				        }
				        document.onmouseup = function() {
				            document.onmousemove = null;
				        }
				    </script>
				</body>
淘宝放大镜

代码如下：

					<style>
					        * {
					            margin: 0;
					            padding: 0;
					        }
					        .box {
					            display: none;
					            position: absolute;
					            top: 0;
					            left: 0;
					            width: 230px;
					            height: 230px;
					            /* background-color: #0f0; */
					
					            background: url(./images/dotpng.png)
					        }
					        #wrap {
					            width: 430px;
					            height: 430px;
					            position: absolute;
					            top: 100px;
					            left: 100px;
					            border: 1px solid #000;
					        }
					        #bigArea {
					            display: none;
					            width: 430px;
					            height: 430px;
					            position: absolute;
					            top: 100px;
					            left: 550px;
					            background: url(./images/big.jpg);
					            border: 1px solid #000;
					        }
					    </style>
					</head>
					<body>
					    <div id="wrap">
					        <img src="./images/small.jpg" >
					        <div class="box"></div>
					    </div>
					
					    <div id="bigArea">
					    </div>
					    <script>
					        // 获取元素
					        var wrap = document.getElementById("wrap");
					        var box = document.querySelector(".box");
					        var bigArea = document.getElementById("bigArea");
					        console.log(bigArea)
					        // 鼠标进入图片区域 才显示镜片和放大镜
				       		 wrap.onmouseenter = function() {
				            box.style.display = "block";
				            bigArea.style.display = "block";
				            var r = (wrap.clientWidth - box.clientWidth) / (800 - bigArea.clientWidth);
				            // 绑定mousemove事件
				            document.onmousemove = function(e) {
				                // 计算鼠标在页面中的距离
				                var mouseX =  e.pageX;
				                var mouseY = e.pageY;
				                // 计算元素在视口中的距离
				                var elementX = offset(wrap).left;
				                var elementY = offset(wrap).top;
				                // 计算鼠标在元素中的距离
				                var resultX = mouseX - elementX - wrap.clientLeft - box.clientWidth / 2;
				                var resultY = mouseY - elementY - wrap.clientTop - box.clientHeight / 2;
				                if (resultX < 0) {
				                    resultX = 0;
				                } else if (resultX > wrap.clientWidth - box.clientWidth) {
				                    resultX = wrap.clientWidth - box.clientWidth;
				                }
				                if (resultY < 0) {
				                    resultY = 0;
				                } else if (resultY > wrap.clientHeight - box.clientHeight) {
				                    resultY = wrap.clientHeight - box.clientHeight;
				                }
				                box.style.left = resultX + "px";
				                box.style.top = resultY + "px";
				                bigArea.style.backgroundPositionX = -resultX / r + "px";
				                bigArea.style.backgroundPositionY = -resultY / r + "px";
				            }
				        }
				        wrap.onmouseleave = function() {
				            box.style.display = "none";
				            bigArea.style.display = "none";
				        }
			        function offset(dom) {
				            // 返回一个对象
				            var obj = {
				                left: 0,
				                top: 0
				            }
				            // 先让这个对象加上 dom的自己得到定位父元素的距离
				            obj.left = dom.offsetLeft;
				            obj.top = dom.offsetTop;
				            // 判定浏览器是否是IE8 
				            var isIE8 = window.navigator.userAgent.indexOf("MSIE 8") != -1;
				            // 循环往上走 累加每一个offsetParent的offsetLeft和clientLeft 
				            // 加每一个offsetParent的offsetTop和clientTop
				            var offsetParent = dom.offsetParent;
				            while (offsetParent != document.body) {
				                if (isIE8) {
				                    obj.left += offsetParent.offsetLeft;
				                    obj.top += offsetParent.offsetTop;
				                } else {
				                    obj.left += offsetParent.offsetLeft + offsetParent.clientLeft;
				                    obj.top += offsetParent.offsetTop + offsetParent.clientTop;
				                }
				                offsetParent = offsetParent.offsetParent;
				            }
				            return obj;
				        }
				    </script>
小雨仔
关注
【虚拟仿真】Unity3D中实现控制物体的旋转、移动、缩放
CSDN博客专家，Unity3D高级软件工程师，《Unity 3D从入门到实战》作者。
05-15 2万+
以前转载了一篇关于在Unity3d中鼠标控制物体的旋转、移动、缩放的代码然后发现错误比较多，就重新写了一个代码，自我感觉简单实用。。。特意分享出来供大家参考原文章也贴出来吧【Unity3d 鼠标滚动拉近模型、鼠标右键旋转模型、鼠标中键拖拽模型】
ue4 android 地图瓦片,UE4中地图功能的实现（利用相对位置RenderTarget的办法）
weixin_29664739的博客
05-29 1241
UE4中的小地图有很多种实现办法，但是现在网上的办法大多是人物头顶绑摄像机，这样的办法大多low而且低效，不适合作为正式的游戏功能使用，这里使用RenderTarget渲染2D图片的办法，通过获得人物/npc/物体在现实世界中的位置以及地图边界位置，算出在2D地图上的相对位置，从而更新2D图标在地图上的位置。需要用到RenderTarget(渲染目标)具体参考了这位老哥给出的项目中的做法，并做出了...
jquery.imageScroller适合区域内拖拽查看长途特效
06-10
效果描述： jQuery插件——jquery.imageScroller.js 支持在正方形区域内查看比较长的图片效果 左下角有一个缩略图效果，拖拽缩略图的同时，大图对应比例的部分也会展示出来 效果相当不错   使用方法： 1、将css样式复制到你的网页中 2、将代码部分拷贝到body结束前即可 (图片、js采用绝对路径，不建议修改)
设置zedgraph鼠标拖拽和局部放大属性(转帖)
weixin_30624825的博客
01-09 210
说一下几个属性的意义和具体应用: (1)鼠标拖拽显示区域 PanModifierKeys ->> Gets or sets a value that determines which modifier keys will be used as a primary option to trigger a pan event. 意思就是调用一个拖拽命令时要添加的快捷键组合，比如我们使用...
区域内拖拽、放大，显示覆盖图片（不考虑兼容）
KTsensei的博客
11-20 186
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m
php拖拽原理,JavaScript_javascript实现完美拖拽效果，拖拽的原理 1.获取距离(鼠标 - phpStudy...
weixin_39888180的博客
03-20 143
javascript实现完美拖拽效果拖拽的原理1.获取距离(鼠标的位置-odiv的外边距)2.理解什么时候用onmousemove事件3.判断是否过界html代码：css代码：#div1{width:100px;height:100px;background:red;position:absolute}javascript代码：window.onload=function(){var oDiv=d...
js 获取当前元素距离窗口的距离
热门推荐
yuange
01-15 2万+
获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候，偶尔会需要用js来获取当前div到 body 左侧、顶部的距离。网上查一查，有很多都是通过offsetTop、offsetLeft来计算出来的。我按照网上的查到的资料用了一次，算出来了一堆错误答案。下面我要分享的这个方法，兼容性很好（ie4都ok），而且很方便，不会算错。 这个方法就是 ge...
成百上千个Java 源码DEMO 4(1-4是独立压缩包)
03-29
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
成百上千个Java 源码DEMO 3(1-4是独立压缩包)
03-29
5个目标文件，演示Address EJB的实现，创建一个EJB测试客户端，得到名字上下文，查询jndi名，通过强制转型得到Home接口，getInitialContext()函数返回一个经过初始化的上下文，用client的getHome()函数调用Home接口...
研究一下物理引擎，做了个游戏，文末有感
Cocos的博客
03-04 1295
原文首发于微信公众号：MinProgram 原作者：花叔 Cocos 已获得转载授权 前阵子过春节，在家看小孩没法出去玩，于是就码起来了，心血来潮想做个基于物理引擎的小游戏，于是愉快地打开了 Cocos Creator。 然后到这个周末，一个算是较为完整的游戏 demo 上线了。 负责的工作 一年多前，我开始学习小游戏开发，并尝试按全栈的方式去独立开发小游戏。由于做小游戏都抱着学习的心态，...
获取元素距离页面的距离
博客
01-23 3017
function offset(element){ var pos={left:0, top:0}; var parents=element.offsetParent; pos.left+=element.offsetLeft; pos.top+=element.offsetTop; while(parents && !/html|body/i.test(parent
touch事件完成h5拖拽元素到指定范围
judykang123的博客
09-24 1248
效果 在h5里，我们要拖拽一个元素（粉色块），使其中心点在指定范围（绿色块）内时返回√，如果没到指定范围就松手了，则位置返回到（0,0） 层级关系(html) 为了更好地去监测及获取数据，我们需要一个带定位的大盒子把他们包起来，一个停留的范围和一个带有中心点的拖拽元素 <!-- 一个带有定位的大盒子，为了确定位置 --> <div id="biggest_box"> <!-- 中心点停留的范围盒子 --> <div id="stay1"></d
js怎样获取元素滚动的距离
10-29 1万+
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...
移动端获取页面滚动条距离顶部的距离，以及拖动惯性问题
milli236的博客
02-07 2万+
document.getElementsByTagName('section')[0].addEventListener('touchmove',function(e){ console.log("开始滑动了touchstart"); let a = document.documentElement.scrollTop; console.log("滑动距离为：",a); });jq...
Python-selenium各种用法详解(元素拖拽，页面切换等)
chang995196962的博客
12-07 1691
单个元素选取 find_element_by_id find_element_by_name find_element_by_xpath find_element_by_link_text find_element_by_partial_link_text find_element_by_tag_name find_element_by_class_name find_elemen...
写一个ArrayList，添加10个元素，限定只能存入整型数
最新发布
05-18
以下是一个 Java 中的 ArrayList，只能存储整型数： ```java import java.util.ArrayList; public class IntArrayList { private ArrayList<Integer> list; public IntArrayList() { list = new ArrayList<Integer>(); } public void add(int element) { list.add(element); } public int get(int index) { return list.get(index); } public int size() { return list.size(); } public static void main(String[] args) { IntArrayList intList = new IntArrayList(); for (int i = 0; i < 10; i++) { intList.add(i); } for (int i = 0; i < intList.size(); i++) { System.out.print(intList.get(i) + " "); } } } ``` 在上面的代码中，我们使用了 Java 中的泛型来限定 ArrayList 中只能存储整型数。我们可以通过 `add` 方法向 ArrayList 中添加元素，通过 `get` 方法获取指定位置的元素，通过 `size` 方法获取 ArrayList 的大小。在 `main` 方法中，我们创建了一个 `IntArrayList` 对象，并向其中添加了 10 个元素，然后遍历 ArrayList 中的元素并输出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值