JavaScript经典案例：网页元素跟踪移动

红太狼 2022-12-23 06:12 156阅读 0赞

效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]  
CSS代码：

<style type="text/css">
    	#target {
    		/* 拖动元素的前提是该元素脱离文档流 */
    		position: absolute;
    		width: 150px;
    		height: 80px;
    		line-height: 80px;
    		text-align: center;
    		border: 0;
    		border-radius: 10px;
    		background: tomato;
    	}
    </style>

HTML + JavaScript代码：

<div id="target">工具人</div>
    <script type="text/javascript">
    	window.onload = function() {
    		var target = document.getElementById("target");
    		document.onmousemove = function(event) {
    			event = event || window.event; // 兼容不同浏览器
    			var distanceX = document.body.scrollLeft || document.documentElement.scrollLeft;
    			var distanceY = document.body.scrollTop || document.documentElement.scrollTop;
    			target.style.left = event.pageX + distanceX + "px"; // 获取鼠标横向位置的值
    			target.style.top = event.pageY + distanceY + "px"; // 获取鼠标垂直位置的值
    		}
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/a5e936a3e2b3494bb2d09adaf205671c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，156人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript经典案例：添加/删除元素类名

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

客官°小女子只卖身不卖艺/ 2022年12月24日 10:59/ 0 赞/ 155 阅读

相关 JavaScript经典案例：键盘控制元素移动

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

淡淡的烟草味﹌/ 2022年12月23日 12:25/ 0 赞/ 175 阅读

相关 JavaScript经典案例：页面元素拖拽

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

小鱼儿/ 2022年12月23日 11:14/ 0 赞/ 199 阅读

相关 JavaScript经典案例：用户协议确认

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

偏执的太偏执、/ 2022年12月23日 06:13/ 0 赞/ 140 阅读

相关 JavaScript经典案例：网页元素跟踪移动

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

红太狼/ 2022年12月23日 06:12/ 0 赞/ 157 阅读

相关 JavaScript经典案例：表格节点操作

效果展示: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

逃离我推掉我的手/ 2022年12月23日 03:22/ 0 赞/ 39 阅读

相关 JavaScript闭包面试经典案例

案例一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁借莪１个温暖的怀抱￠/ 2022年12月12日 13:41/ 0 赞/ 152 阅读

相关 JavaScript跟踪-Piwik

1、先决条件：使用新版本的JavaScript跟踪代码 2、JavaScript跟踪代码的功能（1）自定义在Piwik中显示的页面名称（2）手动触发目标转化

曾经终败给现在/ 2022年05月15日 11:24/ 0 赞/ 209 阅读

相关 JavaScript - 实现数组元素上下移动

前言通过js中数组的`splice()`函数实现 splice() 方法 JavaScript splice() 方法注释

客官°小女子只卖身不卖艺/ 2021年09月30日 11:48/ 0 赞/ 407 阅读

相关 JavaScript经典案例之按下拖拽、跟随鼠标移动

<!DOCTYPE html> <html> <head lang="en"> <meta charset="GBK">

￡神魔★判官ぃ/ 2021年07月24日 21:46/ 0 赞/ 419 阅读