jquery鼠标移动,jquery鼠标移动触发

jquery中鼠标移上和移开的动作是什么？

mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，mouseout事件于用户把鼠标移出一个元素时触发。\x0d\x0a下面为你详细介绍下jquery中的鼠标事件：\x0d\x0a(1):click事件：click事件于用户在元素敲击鼠标左键，并在相同元素上松开左键时触发；\x0d\x0a$('p').click(function(){\x0d\x0aalert('click function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(2):dbclick事件：dbclick事件在用户完成迅速连续的两次点击之后触发，双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用；\x0d\x0a$('p').dbclick(function(){\x0d\x0aalert('dbclick function is running\x0d\x0a!');\x0d\x0a});\x0d\x0a(3):mousedown事件：mousedown事件在用户敲击鼠标键时触发，跟keydown事件不一样，该事件仅在按下鼠标时触发；\x0d\x0a$('p').mousedown(function(){\x0d\x0aalert('mousedown function is\x0d\x0arunning !');\x0d\x0a});\x0d\x0a(4):mouseup事件：mouseup事件在用户松开鼠标时触发，如果在与按下鼠标的元素相同元素上松开，那么click事件也会触发；\x0d\x0a$('p').mouseup(function(){\x0d\x0aalert('mouseup function is running\x0d\x0a!');\x0d\x0a}).click(function(){\x0d\x0aalert('click\x0d\x0afunction is running too !');\x0d\x0a});\x0d\x0a(5):mouseover事件：mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发，如果需要知道来自那个元素可以使用，relatedTagrget属性；\x0d\x0a(6):mouseout事件：mouseout事件于用户把鼠标移出一个元素时触发，这包括从父元素移动到子元素上，或者使用键盘跳到元素上。

成都创新互联公司自2013年起，是专业互联网技术服务公司，拥有项目成都网站建设、做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元秦州做网站,已为上家服务,为秦州各地企业和个人服务,联系电话:028-86922220

JQUERY鼠标移动显示相应内容

我猜会继续提问

script type="text/javascript"

var t;

$('.same-name span').animate({top: "0px", opacity: "0"});

$('.same-name i img').hover(function(){

//ImgToggle($(this),true);

$(this).parent().parent().children("span").stop().animate({top: "-16px", opacity: "1"})

},function(){

t=setTimeout("ImgToggle("+$(this).parent().parent().index()+")",400);

console.log($(this).parent().parent().index());

}

)

$('.same-name span').hover(function(){clearTimeout(t)},function(){

$(this).stop().animate({top: "0px", opacity: "0"});

})

function ImgToggle(i){

$('.same-name').parent().children().eq(i).find('span').animate({top: "0px", opacity: "0"});

} 

/script

JQUERY 鼠标移动到某个图标上显示对应DIV

思路：

获取移动2个元素

给第一个元素加上鼠标移入移除事件，

当鼠标移入时，显示div

当鼠标移除时，隐藏div

代码：

head lang="en"

meta charset="UTF-8"

title/title

style

div {width: 100px; height: 100px; background: #ccc;}

#div2 {display: none;}

/style

script src="js/jquery-1.7.2.js"/script

/head

body

div id="div1"/div

div id="div2"/div

/body

script

function over(){

if(!$("#div2").is(":visible")){

$("#div2").show();    //如果元素为隐藏,则将它显现

}else{

$("#div2").hide();     //如果元素为显现,则将其隐藏

}

}

$('#div1').hover(over,over)

/script

jquery判断鼠标移动位置的变化

!DOCTYPE html

html

head 

meta http-equiv="Content-Type" content="text/html; charset=utf-8"

script type="text/javascript" src=""/script

/head 

body 

script type="text/javascript" 

$(document).ready(function(){

$('#mo').mousemove(function(e){

n=$('#xxx').val()-50;

m=$('#yyy').val()-50;

$('#mo').css({top:m+'px', left:n+'px'});

});

});

function mouseMove(ev)

{

Ev= ev || window.event;

var mousePos = mouseCoords(ev);

document.getElementById("xxx").value = mousePos.x;

document.getElementById("yyy").value = mousePos.y;

}

function mouseCoords(ev)

{

if(ev.pageX || ev.pageY){

return {x:ev.pageX, y:ev.pageY};

}

return{

x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,

y:ev.clientY + document.body.scrollTop - document.body.clientTop

};

}

document.onmousemove = mouseMove; 

/script 

鼠标X轴:

input id='xxx' type='text'

鼠标Y轴:

input id=yyy type=text 

div id='mo' style='position:absolute;width:200px;height:200px;background:red'111/div

/body

/html

jquery实现鼠标移动效果

楼上几位代码太多了,也不是纯正的JQUERY代码script type="text/javascript"

$(document).ready(function(){

$("li").mousemove(function (){

$(this).css("backgroundColor","grey");

});

$("li").mouseout(function (){

$(this).css("backgroundColor","");});

});

/script

Jquery鼠标移入和移出、点击事件,点击变色，鼠标移出又变回原来的样式

你只要明白事件触发的顺序就知道原因了：当你鼠标移到div上的时候，触发mouseenter事件，点击的时候触发click事件，然后鼠标移走触发mouseleave事件。

例如：var

test=0;

$("#div1").delegate("a",

"mouseenter",

function()

{

test=1;

}).delegate("a",

"mouseleave",

function()

{

test=2;

});

$("#div1").delegate("a",

"click",

function()

{

test=3;

});

当你鼠标移动到div上点击之后鼠标再移走，最后触发的事件是mouseleave事件，此时test是2而不是三。你可以测试一下