js： 复制代码 代码如下: var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - parseInt(fdiv.style.top); document.onmousemove = mousemove; } document.onmouseup = function() { document.onmousemove = null; } function mousemove(ev) { if(ev==null) ev = window.event;//IE fdiv.style.left = (ev.clientX - posX) + "px"; fdiv.style.top = (ev.clientY - posY) + "px"; } html： 复制代码 代码如下: <div class="divBody" id="divBody" style="left: 29px; top: 14px;"> <!--这里要加style="left: 29px; top: 14px;" 否则有问题--> <div class="divHead" id="divHead" style="cursor: move;"> </div> <div class="content"> </div> <div class="tail"> </div> </div> css: 复制代码 代码如下: .divBody{ //margin-top:20px; border: solid #CCC 1px; width:500px; height:400px; position:relative; z-index:0; margin-left:auto; margin-right:auto; } .divHead{ width:500px; height:50px; background-color:#CCC; } .content { width:500px; height:300px; } .tail{ background:#CCC; height:50px; width:500px; display:table-cell; vertical-align:middle; }

　　推荐阅读

　　THREE.JS入门教程(1)THREE.JS使用前了解

Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。 国外网>>>详细阅读

本文标题：js+html+css实现鼠标移动div实例

地址：http://www.17bianji.com/kaifa2/JS/22439.html

 1/2    1