HTML 层（DIV） 随鼠标事件移动

<div class="drag" rel="drag" id="drag1" style="left:30px;top:10px;" onmousedown="dargit(this,event);">

<div class="da" ><span class="x">x</span>拖动区1</div>

文字1

</div>

<script type="text/javascript">

var ey=0,ex=0,lx=0,ly=0,canDrg=false,thiso=null;//

var x, y,rw,rh;

var divs=documentgetElementsByTagName("div");

for (var i=0;i<divslength;i++){

if(divs[i]getAttribute("rel")=="drag"){

divs[i]onmousemove=function(){

thismove(this);//实时得到当前对象与鼠标的值以判断拖动及关闭区域;

}

}

}

function thismove(o){

rw=parseInt(x)-parseInt(ostyleleft);

rh=parseInt(y)-parseInt(ostyletop);

documenttitle=rw+"=文本区域="+rh;

if(rh<=20 && rw>=180)documenttitle=rw+"||2020||"+rh;//右上角2020的关闭区域

if(rh<=20 && rw<180 )documenttitle=rw+"||可选||"+rh;//绝对拖动条选择区域;

}

function dargit(o,e){

thiso = o;

canDrg = true;

if(!documentall){

lx = eclientX; ly = eclientY;

}else{

lx = eventx; ly = eventy;

}

if(documentall) thisosetCapture();

st(o);//置前或置后

}

documentonmousemove = function(e){

if(!documentall){ x = eclientX; y = eclientY; }else{ x = eventx; y = eventy; }

if(canDrg){

//if(rh<=20 && rw<180 ){//如果要设定拖动区域可以作判断

var ofsx = x - lx;

thisostyleleft = parseInt(thisostyleleft) + ofsx;

lx = x;

var ofsy = y - ly;

thisostyletop = parseInt(thisostyletop) + ofsy;

ly = y;

//}else{canDrg=false;}

}

}

documentonmouseup=function(){

canDrg=false;//拖拽变量设为false

if(documentall && thiso != null){

//ie下，将清捕获;

thisoreleaseCapture();

thiso = null;

}

}

function set(obj){

obj=objparentNodeparentNode;

if(objgetAttribute("rel"));

//objstylezIndex=1;

}

function st(o){

var p = oparentNode;

if(plastChild != o){

pappendChild(o);

}

if(rh<=20 && rw>=180){

canDrg=false;

windowstatus=rw+"|"+rh;

if(pfirstChild == o) return;

pinsertBefore(o, pfirstChild);

}

}

</script>

HTML5+JavaScript+CSS3实现下拉列表以及折叠功能

[javascript] view plain copy

function show(id){

var d = $('#content'+id)css('display');

if(d == 'block'){

$('#content'+id)css('display','none');

$('#img'+id)attr('src','img/bottompng');

}else if(d == 'none'){

$('drop_down_content')each(function(){

$(this)css('display','none');

$('drop_down_list img')attr('src','img/bottompng');

});

$('#content'+id)css('display','block');

$('#img'+id)attr('src','img/toppng');

}

[html] view plain copy

<div class="drop_down_list" onclick="show('1');">

<a>svg</a>

<img id="img1" src="img/toppng"/>

</div>

<ul class="drop_down_content" id="content1" style="display:block;">

<li>姓名 <a>李雷</a></li>

</ul>

<div class="drop_down_list" onclick="show('2');">

<a>动画</a>

<img id="img2" src="img/bottompng"/>

</div>

<ul class="drop_down_content" id="content2" style="display:none;">

<li>父亲 <a>李大宝</a></li>

</ul>

[css] view plain copy

ul{

list-style-type: none;

-webkit-margin-before: 0px;

-webkit-margin-after: 0px;

-webkit-margin-start: 0px;

-webkit-margin-end: 0px;

-webkit-padding-start: 0px;

-webkit-padding-after: 0px;

}

drop_down_list{

width:100%;

height:44px;

border-bottom: 1px solid #D9D9D9;

}

drop_down_list a{

display: inline-block;

height:44px;

width:100px;

background: url(/img/biaozhupng) 0px 13px no-repeat;

background-size: 6px 20px;

padding-left: 25px;

padding-top: 12px;

color: #0085d0;

}

drop_down_list img{

float: right;

height:15px;

margin: 15px 20px;

}

drop_down_content a{

color: #AAAAAA;

display: inline-block;

float: right;

margin-right: 8%;

}

drop_down_content li{

height:38px;

width:94%;

color: #353535;

margin-left: 3%;

margin-right: 3%;

padding-top: 15px;

padding-left: 20px;

border-bottom: 1px solid #D9D9D9;

}

分别是：动作事件就是某个行为发生在特定的时间段。键盘事件就是你对键盘的 *** 作，如敲击某个键，按住某个键不放，按组合快捷键，这些都是键盘事件。鼠标事件是移动时发生的事件，对某控件的此事件进行编程，则当鼠标移过此控件时就会触发此事件，执行其相应代码。超文本标记语言缩写为HTML，标准通用标记语言下的一个应用。HTML是一种标记语言，是网页制作所必备的工具。页面事件指该事件在页面第一次加载时触发，如果页面是从浏览器缓存中读取的，则不会触发。事件是可以被控件识别的 *** 作，如按下确定按钮，选择某个单选按钮或者复选框。每一种控件有自己可以识别的事件。

以上就是关于HTML 层（DIV） 随鼠标事件移动全部的内容，包括:HTML 层（DIV） 随鼠标事件移动、单纯用css3 html5实现下拉表单的鼠标经过事件怎么弄、动作事件键盘事件鼠标事件HTML页面事件分别是哪些等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！