教程集 > jQuery > jquery 教程 > 正文 js拖拉效果

js拖拉效果

发布时间：2023-12-24 编辑：jiaochengji.com

教程集为您提供js拖拉效果等资源，欢迎您收藏本站，我们将为您提供最新的js拖拉效果资源

提示：您可以先修改部分代码再运行

<html>  	<head></head>  	  	<body>  		<script type="text/javascript">  			 	(function(){  			 		 document.onmousedown = function(){  			 		 	  var isSelect = true;  			 		 	  var evt = window.event || arguments[0];  			 		 	  var startX = (evt.x || evt.clientX);  			 		 	  var startY = (evt.y || evt.clientY);  							var selDiv = document.createElement("div");  			 		 	  		selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;display:none;";  			 		 	  		selDiv.id = "selectDiv";  			 		 	  		document.body.appendChild(selDiv);  							var _x = null;  							var _y = null;  							  			 		 	  document.onmousemove = function(){  			 		 	  	var evt = window.event || arguments[0];  			   			 		 	  	 if(isSelect){  			 		 	  	 	if(selDiv.style.display == "none"){  			 		 	  	 		 selDiv.style.display = "";  			 		 	  	 	}  			 		 	  	  _x = (evt.x || evt.clientX);  			 		 	  	  _y = (evt.y || evt.clientY);  			 		 	  	 	  			 		 	  	 	if(_x >= startX && _y >= startY){  			 		 	  	 		selDiv.style.left = startX  "px";  			 		 	        selDiv.style.top = startY  "px";	 		  			 		 	  	 		selDiv.style.width  = (_x-startX)  "px";  			 		 	  		  selDiv.style.height = (_y-startY)  "px";  			 		 	  	 	}else   			 		 	  	 	if(_x >= startX && _y <= startY){  			 		 	  	 		selDiv.style.left = startX  "px";  			 		 	  	 		selDiv.style.bottom = startY  "px";  			 		 	  	 		selDiv.style.top = _y  "px";  			 		 	  	 		selDiv.style.width  = (_x - startX)  "px";  			 		 	  		  selDiv.style.height = (startY - _y)  "px";	  			 		 	  	 	}else   			 		 	  	 	if(_x <= startX && _y <= startY){  			 		 	  	 		selDiv.style.right = startX  "px";  			 		 	  	 		selDiv.style.bottom = startY  "px";  			 		 	  	 		selDiv.style.left = _x  "px";  			 		 	  			selDiv.style.top = _y  "px";  			 		 	  	 		selDiv.style.width  = (startX-_x)  "px";  			 		 	  		  selDiv.style.height = (startY-_y)  "px";	  			 		 	  	 	}else   			 		 	  	 	if(_x <= startX && _y >= startY){  			 		 	  	 		selDiv.style.right = startX  "px";  			 		 	  	 		selDiv.style.top = startY  "px";  			 		 	  	 		selDiv.style.left = _x  "px";  			 		 	  	 		selDiv.style.width  = (startX-_x)  "px";  			 		 	  		  selDiv.style.height = (_y-startY)  "px";	  			 		 	  	 	}  			 		 	  		  			 		 	  		evt = null;  			 		 	  	}  			 		 	  }  			 		 	    			 		 	  document.onmouseup = function(){  			 		 	  	 isSelect = false;  			 		 	  	 	document.body.removeChild(selDiv);	  			 		 	  	 _x = null,_y = null,selDiv = null,startX = null,startY = null, evt = null;  			 		 	  }  			 		 	    			 		 }  			 			  			 	})();  		</script>	  	</body>	  </html>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jQuery菜单插件 Smooth Navigational Menu
jQuery UI组件 jQuery UI
基于jquery的一行代码轻松实现拖动效果
 jquery div拖拽效果(兼容浏览器)
html5draggable属性是如何做到页面拖动效果的？方法总结在这里！
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
分享一个利用H5实现下拉顶部放大的实例代码
 js实现可拖动的对话框的几个例子
 js 完美拖拽特效代码
 详解HTML5拖放功能实例

上一篇：a 鼠标滑过链接出现的提示框下一篇：网易126上的登陆按钮

[关闭]

js拖拉效果

最近更新

浏览排行