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

jquery中鼠标移上和移开的动作是什么,第1张

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

1 mouseenter:不冒泡。只有在鼠标穿过备选元素的时候,才会触发mouseenter事件

2 mouseover:冒泡。不论鼠标指针穿过被选元素或者其子元素,都会触发mouseover事件

3 为了阻止mouseover,mouseout反复触发,我们需要用到event的relaedtarget,这个属性用来判断mouseover和mouseout事件目标节点的相关节点的属性。分别代表鼠标刚刚离开的那个节点。鼠标移向的那个节点。由于MSIE不支持这个属性,不过有替代的属性。fromElemenet,toElement。通过判断这个属性,我们就可以知道鼠标是从哪个对象移过来,又要移动到哪个对象,然后判断这个相关联的兑现过是否在我们要触发的事件的对象的内容,然后来判断我们是否真的要触发这个事件。

4

1 mouseleave:不冒泡

2 mouseout:冒泡

可以按以下思路步骤来实现:

1、声明一个变量(如el),用来存放鼠标所在的元素节点。

2、在body元素上增加一个鼠标事件监听

3、使用事件对象中的target属性,每当鼠标经过一个元素时,就把它赋值给el变量

任何时候,读取el变量的值即为鼠标当前所在的元素。

示例代码:

var el = windowdocumentbody;//声明一个变量,默认值为body

windowdocumentbodyonmouseover = function(event){

  el = eventtarget;//鼠标每经过一个元素,就把该元素赋值给变量el

  consolelog('当前鼠标在', el, '元素上');//在控制台中打印该变量

}

documentonmouseover=function(event){ var e=event||windowevent; var tget= esrcElement||eventtarget; if(tgettagName=="LABEL"){ alert(tgetinnerHTML); } };或$("label")mouseover(function(evnet){ var e=event||windowevent; var tget= esrcElement||eventtarget; if(tgettagName=="LABEL"){ alert(tgetinnerHTML); }});

简单的说, 宏就是创建一连串的命令集,通过鼠标点击或按下键盘某个按键就让电脑自动执行这一系列命令。

在进入游戏之前,特别是用全屏模式进行游戏的,需要掌握一些基本知识。曾经在网吧看过一位玩家做宏,他把网站上别人写好的宏用一张纸抄写下来,然后进入游戏宏设置中一字字敲下,途中发现某些宏用不了,又退出游戏打开网站查询,拿笔记在纸上再次进入游戏尝试。。。。。。

看到这里可能玩转电脑的高手们会笑,但确实是这样,不是亲眼目睹我也不敢相信还有人用这样原始的做宏方法。

所以,首先有必要说明在 *** 作系统平台下或游戏中,当不能使用鼠标右键d出选项菜单时几个键盘组合键功能:

1“Ctrl”控制键+“C”键---复制

2“Ctrl”控制键+“V”键---粘贴

3“Ctrl”控制键+“X”键---剪切

4“Ctrl”控制键+“A”键---全选

5“Windows”键(即 *** 作系统图标的按键一般位于“Ctrl”控制键与“Alt”换档键之间)+“D”键---最小化所有任务到任务栏并显示桌面。

6“Windows”键+“Tab"制表键---在任务栏打开的各项任务间进行切换。

下面让我们在游戏中一步步设置宏命令:

一进入游戏后按“Esc”键或点主菜单图标可打开游戏主选单,点选“宏命令设置”。

当然亦可敲下“回车”键在对话框中输入/MACRO也能打开宏命令设置界面。

二打开宏命令设置面板后,如果想建立的是角色专用宏,还必须先点上方“通用宏”旁边的角色“专用宏”,在选“新建”后打开建立新宏的面板:

三输入宏的名字,选取一个宏图标后点“确定”,就建立了一个新宏。

这里需要注意的是,当选取的是第一个“?”号形的图标时,该宏图标将以宏内容中输入的法术技能图标显示。

四点击宏命令主面板上方中的宏图标,在下方输入宏内容,然后将这个宏图标拖放到快捷技能栏里,就能使用了。

五宏命令内容的输入:

1宏的内容中每项命令以分行的形式隔开,这里说的分行并不是说宏面板上写到一定数量后顺列到下行,而是指在宏内容中敲下“回车”键后所进行的分行。在中文版的WOW中不论是输入中文或英文命令,只要输入字符正确均能使用,一般在宏中使用英文不必区分大小写。想把某个技能写进宏中,只需打开技能面板后点击宏内容中想要输入的地方,然后按住“Shift”上档键同时点击法术技能图标就可以;想把背包中某件物品名写进宏中亦是同理。

例:暗夜精灵在喝水的同时施放影遁(宏中的斜杠/+“use"+空格+物品名是物品使用宏的一般格式,当然后面的物品名也可换成魔法面包等等)

/坐下

/use 魔法晶水

/施放 影遁(种族特长)

2行为命令宏内容的一般书写格式:斜杠/+空格键+技能名(或行为内容)

书写技能的时候若在后面加上(等级X),将使用特定等级的法术,仅书写技能名时默认使用最高等级的法术

例:猎人在标记敌对目标的同时喊话提醒队友

/大喊 我已进行标记大家集中火力消灭他!

/施放 猎人印记

在写宏中大家以后还会经常用到“%t”这个字符,“%t”表示你当前目标的名字。

例:猎人在标记一只野猪的同时喊话提醒队友

/大喊 我已标记 %t 大家集中火力消灭他!

/施放 猎人印记

3在TBC中当某个技能带有公共CD时(近战一般是1秒,法系15秒),也就是施放某个法术时其他大部分技能图标也会跟着绕一圈的时间,这种带有公共CD的技能在宏内容中仅仅依靠简单分行顺序施放的方法是不行的。

例如:战士想通过连续按宏在压制不能使用时施放英勇打击(在TBC的宏规则中当“压制”处于冷却时间或不可用导致施放失败后,第二次按该宏就会继续重复运行第一行的“/施放 压制”,不能自动跳过尚未放出的技能转到第二行宏命令)

所以,下面这个宏是失败的:

/施放 压制

/施放 英勇打击

但是,仍可通过简单分行顺序施放编在同个宏中的技能命令,条件是“技能为瞬发并且这几个技能间不同享公共CD”,比如冷血和伏击 。

例:战士在施放血性狂暴,当血性狂暴技能尚未冷却时再次运行该宏就施放战斗怒吼(“cast”等于“施放”)

/cast 血性狂暴

/cast 战斗怒吼

另外,虽然同享公共CD,但释放条件不同的技能仍然可用各种宏函数串接起来顺序施放,在以后的教程中会谈到这类宏内容的设置。

4选择和切换目标宏,这在游戏中是较为频繁使用的!

目标选择宏一般书写格式为:宏函数+空格+目标内容

例:不论当前目标是什么或者没有目标,立即切换到指定目标加BUFF

/target 角色名字

/cast 奥术智慧(等级3)

一些常用的目标选择宏函数有:

target 选定目标,例如 /target 冬狼

targettarget 目标的目标,例如 /target targettarget 指目标立即切换到当前目标的目标

pet 宠物,例如 /click [pet] PetActionButton1 指的是使用宠物技能栏中第一个技能

partyX表示第X个小队队友,例如party1,party2。。。。。。

partypetX 表示第X个小队队友的宠物,例如partypetX1,partypetX2。。。。。。

raidX 表示第X个团队队友,例如raid1,raid2。。。。。。

/cleartarget 清除当前目标

/targetlasttarget 选定上一个目标

/startattack 对当前目标进行连续性攻击直到目标死去或消失,这个宏对近战和带宠职业非常有用!

5其它一些常用宏命令:

/AFK 暂离,当然也可以输入中文 /暂离

/DND 请勿打扰,还可进行自动回复,例如 /DND 我有事离开一下,待会再谈!

/1 将聊天频道切换为综合频道

/6 将聊天频道切换为寻求组队频道

例:需要离开电脑一段时间,想把信息传到综合和寻求组队频道,同时令角色马上处于暂离状态并自动回复宏

/1 我的朋友们注意啦,我有事要离开一会,等会来了再找大伙聊哈

/6 我的朋友们注意啦,我有事要离开一会,等会来了再找大伙聊哈

/DND 我有事离开一下,待会再谈!

/AFK

大家也可以在游戏中查询命令:打开对话框后键入斜杠/,再输入中文单字或英文字母,然后陆续按下“Tab”制表键,会在对话框中分别列出以这个字开头的所有命令。

例如键入字母“/a ”后按几次“Tab”制表键,会依次显示出以字母“a”开头的/assist,/afk,/announce,/ann,/agree等等命令!

6用 *** 作系统中的“记事本”程序,打开游戏目录中宏的记录文件可直接对宏命令进行编辑。

通用宏文件夹位置: World of Warcraft → WTF → Account → 以您游戏帐号命名的文件夹 → macros-cachetxt

角色专用宏文件夹位置:World of Warcraft → WTF → Account → 以您游戏帐号命名的文件夹 → 以您游戏角色所在服务器命名的文件夹 → 以您游戏角色名称命名的文件夹 → macros-cachetxt

<head>

<meta charset="UTF-8">

<title>无缝滚动</title>

<style type="text/css">

body,ul,li{margin:0;padding:0}

ul{list-style:none;}

slide{

width:500px;

height:100px;

border:1px solid #ddd;

margin:20px auto 0;

position:relative;

overflow:hidden;

}

slide ul{

position:absolute;/相对于slide进行绝对定位/

width:1000px;/比slide宽度大一倍,做这种连续滚动效果的时候,要在后面把内容复制一份/

height:100px;

left:0;/可以改变该值让其动起来/

top:0;

}

slide ul li{

width:90px;

height:90px;

margin:5px;

background-color:#ccc;

line-height:90px;

text-align: center;

font-size:30px;

float:left;

}

btns{

width:500px;

height:50px;

margin:10px auto 0;

}

</style>

<script type="text/javascript" src="/js/jquery-1124minjs"></script>

<script type="text/javascript">

$(function(){

var $ul = $('#slide ul');

var left = 0;

var deraction = 2;//每次滚动的距离

//内容为两套li

$ulhtml($ulhtml() + $ulhtml());

//反复循环定时器,30ms动一下可以看起来比较平滑

var timer = setInterval(move, 30);

function move(){

left -= deraction;

//当第2套li完全显示出来的时候,整个移回原点重新移动,实现向左连续滚动

if(left < -500){

left = 0;

}

//瞬间跳回,实现向右连续滚动

if(left > 0){

left = -500;

}

$ulcss({left: left});

}

$('#btn1')click(function() {

deraction = 2;

});

$('#btn2')click(function() {

deraction = -2;

});

$('#slide')mouseover(function() {

clearInterval(timer);

});

$('#slide')mouseout(function() {

timer = setInterval(move,30);

});

})

</script>

</head>

<body>

<div class="btns">

<input type="button" name="" value="向左" id="btn1">

<input type="button" name="" value="向右" id="btn2">

</div>

<div class="slide" id="slide">

<ul>

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

<li>5</li>

</ul>

</div>

</body>

鼠标移入要做的事情mouseover

鼠标移出要做的事情mouseout

<head>

    <meta charset="UTF-8">

    <title>鼠标移入移出</title>

    <style type="text/css">

        box{

            width: 200px;

            height: 200px;

            background-color: gold;

            margin: 100px auto 0;

        }

        son{

                width: 100px;

                height: 100px;

                background-color: green;

        }

    </style>

    <script type="text/javascript" src="js/jquery-1124minjs"></script>

    <script type="text/javascript">

         $(function(){

        /进入子元素也触发/

        /$('#div1')mouseover(function() {

        $(this)animate({marginTop: 50});//stop()

        });

        $('#div1')mouseout(function() {

        $(this)animate({marginTop: 100});//stop()

    });/

        /进入子元素不触发/

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

        $(this)stop()animate({marginTop: 50});//

        });

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

        $(this)stop()animate({marginTop: 100});//

        });/

        /通过hover(mouseenter+mouseleave)实现简写/

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

        $(this)stop()animate({marginTop: 50});

        }, function() {

        $(this)stop()animate({marginTop: 100});

            });

        })

    </script>

</head>

<body>

        <div id="div1" class="box">

                <div class="son"></div>

        </div>

</body>

创建一个子元素 促使鼠标移入到子元素才能移动

是由于时间mouse影响

则要使用mouseenter和mouseleave进行改变

也可以运用hover简化

autofocus

表单元素的值发生变化

<head>

                <meta charset="UTF-8">

                <title>input框事件</title>

                <style type="text/css">

                </style>

                <script type="text/javascript" src="js/jquery-1124minjs"></script>

                <script type="text/javascript">

                     $(function(){

                    // //一开始就获取焦点,相当于设置了autofocus自动获取焦点了(HTML5 新增表单控件属性)

                    // $('#txt01')focus();

                    // //文本框获取焦点的时候(有光标闪烁的时候)

                    // $('#txt01')focus(function() {

                    // alert('focus');

                    // });

                    // //失去焦点的时候(光标离开的时候)

                    // $('#txt01')blur(function() {

                    // alert('blur');

                    // });

                    // //输入框内容发生变化的时候,失去焦点后触发,可用于注册时验证用户名是否已存在

                    // $('#txt01')change(function() {

                    // alert('change');

                    // });

                    //松开键盘按键就触发

                    $('#txt01')keyup(function() {

                    alert('keyup');

                    });

                })

                </script>

</head>

<body>

        <input type="text" id="txt01">

</body>

<head>

            <meta charset="UTF-8">

            <title>jQuery其他事件</title>

            <style type="text/css">

            </style>

            <script type="text/javascript" src="js/jquery-1124minjs"></script>

            <script type="text/javascript">

            // // JS原生写法

            // windowonload = function(){

            // }

            // / /jQuery写法,等同于上面写法

            // $(window)load(function(){

            // })

            // //ready的写法

            // $(document)ready(function(){

            // })

            // //ready的简写

            // $(function(){

            // })

            // 窗口改变尺寸的时候,会高频触发

            $(window)resize(function() {

            consolelog('3');

            });

            </script>

</head>

<body>

            <div id="div1"></div>

</body>

鼠标移入要做的事情mouseover

鼠标移出要做的事情mouseout

function f2(){

asstylebackgroundImage='url(/img/3gif)'

}

<div class="as" id="as" onMouseOver="f2()" // // 用函数来做可以

onMouseout="thisstylebackgroundImage='url(/img/0011jpg)'"></div> // // 直接在里面也行

// // 直接在<div ></div>标签里面做,,就不用定义它的 Id=""

<div class="as1" name="b2" ></div>

以上就是关于jquery中鼠标移上和移开的动作是什么全部的内容,包括:jquery中鼠标移上和移开的动作是什么、鼠标mouse事件、js 判断当前鼠标在哪个元素上等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/9523036.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-29
下一篇 2023-04-29

发表评论

登录后才能评论

评论列表(0条)

保存