jquery 如何判断鼠标滑入和划出的方向_框架

$("#wrap")bind("mouseenter mouseleave",

function(e) {

var w = $(this)width();

var h = $(this)height();

var x = (epageX - thisoffsetLeft - (w / 2)) (w > h (h / w) : 1);

var y = (epageY - thisoffsetTop - (h / 2)) (h > w (w / h) : 1);

var direction = Mathround((((Mathatan2(y, x) (180 / MathPI)) + 180) / 90) + 3) % 4;

var eventType = etype;

var dirName = new Array('上方','右侧','下方','左侧');

if(etype == 'mouseenter'){

$(this)html(dirName[direction]+'进入');

}else{

$(this)html(dirName[direction]+'离开');

}

});

switch (direction) {

case 0:

$(this)html('上方进入');

break;

case 1:

$(this)html('右侧进入');

break;

case 2:

$(this)html('下方进入');

break;

case 3:

$(this)html('左侧进入');

break;

}

</script>

<style>

{

margin: 0%;

padding: 0%;

}

box{

width: 340px;

border: 1px solid blue;

margin: 10px auto;

}

box h1{

height: 40px;

color: #fff;

padding-left: 15px;

background-color: blue;

font-size: 25px;

}

ul li{

padding-left: 15px;

list-style-type: none;

line-height: 45px;

border-bottom: 1px dashed #ccc;

}

ul li:last-child{

border-bottom: none;

}

</style>

</head>

<body>

<h1>

祝福冬奥

</h1>

<ul>

</ul>

</div>

/ jQuery的链式调用 /

/ $('div')$('div')text('我是学生')css('color','red')attr({name:'zhangsan',age:30}) /

/ 链式调用的原理jq里面的方法都会return this 把当前调用者return出去实现链式调用 /

/ $('ul li')first()css('background','yellow')end()eq(1)css('background','red') /

/ 获取的只是content里面的距离,不包括padding margin border里面的距离 /

/ 返回以像素为单位的top和left的坐标,仅对可见元素有效 /

/ top和left值都会包括自己的margin和父元素border的值 /

consolelog($('div2')offset()top);

consolelog($('ul')width());

consolelog($('ul')height());

/ offsetParent 返回最近的自己定位的祖先元素 /

consolelog($('div2')offsetParent());

/ position() 返回第一个匹配元素相对于父元素的位置 /

consolelog($('div')position());

/ scrollLeft([position]) 参数可选,设置返回匹配元素相对滚动条左侧的偏移/

/ 设置滚动条的距离 /

$(window)scrollLeft(100)

/ 获取滚动条的距离 /

$(window)scroll(function(){

consolelog($(document)scrollLeft());

})

</script>

<style>

div1{

width: 300px;

height: 300px;

border: 1px solid red;

}

div2{

width: 200px;

height: 200px;

background-color: red;;

}

</style>

</head>

<body>

</div>

/ mouseenter mouseleave 在进入子元素区域时不会触发

mouseover 和mouseout 会触发 /

/ $('div1')mouseenter(function(){

$(this)css('background','green')

})

$('div1')mouseleave(function(){

$(this)css('background','yellow')

}) /

/ 由mouseenter 和mouseleave组成 /

$('div1')hover(function(){

$(this)css('background','yellow')

consolelog(1);

})

</script>

<style>

{

margin: 0%;

padding: 0%;

}

box{

width: 340px;

border: 1px solid blue;

margin: 10px auto;

}

box h1{

height: 40px;

color: #fff;

padding-left: 15px;

background-color: blue;

font-size: 25px;

}

ul li{

padding-left: 15px;

list-style-type: none;

line-height: 45px;

border-bottom: 1px dashed #ccc;

}

ul li:last-child{

border-bottom: none;

}

</style>

</head>

<body>

<h1>

祝福冬奥

</h1>

<ul>

</ul>

</div>

/ $('li:eq(0)')mouseenter(function(){

$(this)css('background','red')

})

$('li:eq(0)')mouseout(function(){

$(this)css('background','')

}) /

$('li')hover(function(){

/ css('background','')不会改变元素原来bgc样式 /

$('li')first()css('background','red')siblings()css('background','')

})

$('li:eq(1)')mouseenter(function(){

$(this)css('background','yellow')

})

$('li:eq(1)')mouseout(function(){

$(this)css('background','')

})

</script>

<style>

box{

margin: 30px auto;

width: 500px;

height: 300px;

border: 1px solid cyan;

position: relative;

}

img-list img{

width: 500px;

height: 300px;

display: block;

position: absolute;

left: 0;

top: 0;

}

</style>

</head>

<body>

</div>

/ 定时器过2s 显示一张图显示最后一张图的时候再跳回第一张 /

/ let i = 0

$('img')eq(0)show()siblings()hide();

setInterval(function(){

i++;

if(i==$('img')length){

i=0

} /

/ 淡入淡出 /

/ $('img')eq(i)fadeIn('slow')siblings()fadeOut('slow')

},2000) /

let i = 0;

let timer = null

$('img')eq(i)show()siblings()hide();

/ 自动播放 /

show();

$('left')click(function(){

/ 先清空定时器阻止自动播放 /

clearInterval(timer);

i--;

/ 防止减到-1找不到对应的 /

if(i == -1){

i=$('img')length - 1

}

/ 展示当前对应的其他淡出 /

$('img')eq(i)show()siblings()hide();

/ 继续开始自动播放 /

show();

})

$('right')click(function(){

/ 先清空定时器阻止自动播放 /

clearInterval(timer);

i++;

/ 防止减到-1 找不到对应的 /

if(i==$('img')length){

i=0

}

/ 展示当前对应的其他淡出 /

$('img')eq(i)show()siblings()hide();

/ 继续开始自动播放 /

show()

/ 定时器过两秒显示一张图显示最后一张图的时候

再跳到第一张 /

})

function show(){

timer = setInterval(function (){

i++;

if(i == $('img')length){

i = 0

}

/ fadeIn 淡入 fadeOut淡出 /

$('img')eq(i)fadeIn()siblings()fadeOut();

},2000)

}

</script>

<body>

用户名:<input type="text"><br>

密码: <input type="password">

/ 按下键盘 /

/ $('input[type=text]')keydown(function(){

alert('我按下了')

}) /

/ 抬起键盘 /

/ $('input[type=password]')keyup(function(){

alert('我抬起了')

}) /

/ keypress 连续敲击键盘 /

/ $('input[type=text]')keypress(function(){

alert('连续打字')

}) /

$(window)keyup(function(e){

if(ekeyCode==13){

alert('已提交')

}

})

</script>

</body>

用jQuery实现div随鼠标移动而移动方法：

让div随着鼠标走，需要知道几个关键点

如何获取鼠标的横纵坐标。如何让div在别的html代码上移动。

var xx = eoriginalEventx || eoriginalEventlayerX || 0;

var yy = eoriginalEventy || eoriginalEventlayerY || 0;

$('#month')css({top: yy, left: xx});//注意这是用css的top和left属性来控制div的。

还有个注意的地方，div要设置成绝对位置才可以。

position: absolute;

只有这样div才能在其他的显示元素上面随便移动。

$(document)bind('mousewheel', function(event, delta) { return false; });

绑定滚轮事件，然后返回false就可以。

return true;可以恢复。

根据实际情况运用即可。

获取当前位置代码如下：

<html>

<head>

<meta >

采用以下方法：

jQuery slideDown()

jQuery slideUp()

jQuery slideToggle()

参考：>

以上就是关于jquery 如何判断鼠标滑入和划出的方向全部的内容，包括:jquery 如何判断鼠标滑入和划出的方向、jQuery链式调用、鼠标移入移出、轮播、键盘事件、如何用jQuery实现div随鼠标移动而移动等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9690080.html

jquery 如何判断鼠标滑入和划出的方向

发表评论

评论列表（0条）