js:拖动效果（解析及代码）

最新推荐文章于 2023-07-26 17:33:34 发布

一染星辰

最新推荐文章于 2023-07-26 17:33:34 发布

阅读量138

点赞数

分类专栏： p2代码 p2 原生js 笔记文章标签： html5 html css js

本文链接：https://blog.csdn.net/weixin_59519449/article/details/120730027

版权

p2 原生js 同时被 3 个专栏收录

62 篇文章 3 订阅

订阅专栏

笔记

46 篇文章 1 订阅

订阅专栏

p2代码

19 篇文章 0 订阅

订阅专栏

基础知识：

可视宽度：且兼容

var view = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

活动区域

var areaW = view - img.offsetWidth;

以下为所有代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: url(img/cc.gif) no-repeat center;
				background-size: 100%;
				position: fixed;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div></div>
		<script type="text/javascript">
			var img = document.querySelector("div");
			
			// 可视宽度
			var view = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
			
			// 活动区域
			var areaW = view - img.offsetWidth;
			
			// 鼠标按下
			img.onmousedown = function(e){
				var ev = e || window.event;
				
				// 获取鼠标指针到图片左边缘和上边缘的距离
				var disX = ev.clientX - img.offsetLeft;
				var disY = ev.clientY - img.offsetTop;
				
				// 鼠标移动
				img.onmousemove = function(e){
					var ev = e || window.event;
					
					// 获取鼠标指针的位置
					var left1 = ev.clientX - disX;
					var top1 = ev.clientY - disY;
					
					// 设置活动区域
					if(left1 <= 0){
						left1 = 0;
					}else if(left1 >= areaW){
						left1 = areaW;
					}
					
					// 改变图片定位位置
					img.style.left = left1 + "px";
					img.style.top = top1 + "px";
					
				}
			}
			
			// 鼠标松开
			img.onmouseup = function(){
				img.onmousemove = null;
			}
			
			
			
			
			
			
			
			
			
		</script>
	</body>
</html>

一染星辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js:拖动效果（解析及代码）

基础知识：可视宽度：且兼容var view = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;活动区域var areaW = view - img.offsetWidth; 以下为所有代码：<!DOCTYPE html><html> <head> <meta charset="utf-8">
复制链接

扫一扫

专栏目录