js-小实例（共三个）

js小实例

共含有三个

• 滑动滚动条，获取到当前的x和y坐标，并显示
• div跟随鼠标移动
• 拖拽

实例一：滑动滚动条，获取到当前的x和y坐标，并显示

实现效果

实现核心代码

<script type="text/javascript">
 		window.onload = function(){
 			/*
 			当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标
 			*/
 			// 1 先获取两个Div
 			var areaDiv = document.getElementById('areaDiv');
 			var showMsg = document.getElementById('showMsg');

 			// 2 当鼠标在areaDiv中移动时，事件才触发
 			areaDiv.onmousemove = function(event){
 				// 在showMsg中显示坐标
 				// console.log('X:'+event.clientX +', Y:' + event.clientY);
 				var x = event.clientX;
 				var y = event.clientY;
 				showMsg.innerHTML = '(X:'+ x+', Y:' + y +')';
 			};

 		};		
	</script>

注：完整代码见github

实例二：div跟随鼠标移动

实现效果

核心代码

<script type="text/javascript">
 		window.onload = function(){
 			/*
 			使得div随着鼠标移动
 			*/
 			// 1 先获取box1
 			var box1 = document.getElementById('box1');

 			// 2 绑定鼠标移动事件
 			document.onmousemove = function(event){
 				// 2.1获取鼠标坐标
 				// event.pageX / pageY 获取鼠标相对于当前页面的坐标
 				var left = event.pageX;
 				var top = event.pageY;
 				// 2.2设置div的偏移量
 				box1.style.left = left + 'px';
 				box1.style.top = top + 'px';
 			};
 		};		
	</script>

注：完整代码见github

实例三：拖拽

实现效果

实现核心代码

<script type="text/javascript">
 		window.onload = function(){
 			/*
 			* 拖拽box1元素
			* - 拖拽的流程
					1.当鼠标在被拖拽元素上按下时，开始拖拽
					2.当鼠标移动时被拖拽元素开始跟随鼠标移动
					3.当鼠标松开时，被拖拽元素固定在当前位置
 			*/
 			var box1 = document.getElementById('box1');
 			// 为box1绑定一个鼠标按下事件
 			box1.onmousedown = function(event){
 				/* 
				- div的偏移量 鼠标.clientX - 元素.offsetLeft
				-  div的偏移量 鼠标.clientY - 元素.offsetTop
				*/ 
 				var ol = event.clientX - box1.offsetLeft;
 				var ot = event.clientY - box1.offsetTop;
 				// 为documnet绑定一个onmousemove事件
 				document.onmousemove = function(event){
 					// 当鼠标移动时被拖拽元素开始跟随鼠标移动
 					// - 先获取鼠标的坐标
 					/*
						此处可以保证鼠标点击哪则鼠标显示就落在哪
 					*/
 					var left = event.clientX - ol;
 					var top = event.clientY - ot;
 					console.log('left:',left,'top:',top);
 					// 修改box1的位置
 					
 					box1.style.left = left +'px';
 					box1.style.top = top +'px';
 				};
 				document.onmouseup = function(){
 					// 当鼠标松开时，被拖拽元素固定在当前位置
 					// - 取消document.onmousemove事件
 					document.onmousemove = false;
 				};
 				/*
 				- 当拖拽一个网页的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能的异常，这是浏览器的默认行为。
 				- 如果不希望发生这个行为，可以通过return false 来取消默认行为。
 				*/
 				return false;
 			};
 		};

	</script>

注：完整代码见github