精华内容
下载资源
问答
  • jquery鼠标滚轮事件

    热门讨论 2011-05-13 13:41:43
    jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件jquery鼠标滚轮事件
  • jQuery鼠标移动事件

    千次阅读 2020-01-16 19:58:52
    jQuery鼠标移动事件是最常用的鼠标事件之一,当用户使用鼠标在指定的元素上移动时即与该元素产生交互,就会触发鼠标移动事件,比如:鼠标在指定元素上移入、移出、悬停等等操作,都属于鼠标移动事件的范围。...

    概念

    个人理解:

    jQuery鼠标移动事件是最常用的鼠标事件之一,当用户使用鼠标在指定的元素上移动时即与该元素产生交互,就会触发鼠标移动事件,比如:鼠标在指定元素上移入、移出、悬停等等操作,都属于鼠标移动事件的范围。

    mouseenter()&mouseleave() 事件函数

    说明:

    当鼠标指针穿过(进入)被选元素时,会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件,或添加当发生 mouseenter 事件时运行的函数。
    当鼠标指针离开被选元素时,会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件,或添加当发生 mouseleave 事件时运行的函数。

    通常mouseenter事件与mouseleave事件一起搭配使用。

    语法:

    触发被选元素的 mouseentermouseleave 事件:

    $(selector).mouseenter()
    $(selector).mouseleave()
    

    添加函数到 mouseentermouseleave 事件:

    $(selector).mouseenter(function)
    $(selector).mouseleave(function)
    

    解释:

    mouseenter()mouseleave()事件函数的参数是回调函数,可选项,当mouseenter事件与mouseleave事件被触发时,该回调函数就会执行。

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script src="jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("p").mouseenter(function(){
                    $("p").css("background-color","yellow");
                  });
                  $("p").mouseleave(function(){
                    $("p").css("background-color","lightgray");
                  });
                });
            </script>
        </head>
        
        <body>
        	<p>鼠标移动到该段落。</p>
        </body>
    </html>
    
    

    mouseover()&mouseout() 事件函数

    说明:

    当鼠标指针位于元素上方时,会发生 mouseover 事件。mouseover() 方法触发 mouseover 事件,或添加当发生 mouseover 事件时运行的函数。
    当鼠标指针离开被选元素时,会发生 mouseout 事件。mouseout() 方法触发 mouseout 事件,或添加当发生 mouseout 事件时运行的函数。

    通常mouseover事件与mouseout事件会一起搭配使用。

    语法:

    触发被选元素的 mouseovermouseout事件:

    $(selector).mouseover()
    $(selector).mouseout()
    

    添加函数到 mouseovermouseout 事件:

    $(selector).mouseover(function)
    $(selector).mouseout(function)
    

    解释:

    mouseover()mouseout()事件函数的参数是回调函数,可选项,当mouseover事件与mouseout事件触发时,该回调函数执行。

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"> 
            <script src="jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("p").mouseover(function(){
                    $("p").css("background-color","yellow");
                  });
                  $("p").mouseout(function(){
                    $("p").css("background-color","lightgray");
                  });
                });
            </script>
        </head>
        
        <body>
        	<p>鼠标移动到这个段落上。</p>
        </body>
    </html>
    

    鼠标移入与移出事件对比

    mouseenter与mouseover事件的区别:

    • mouseover 事件在鼠标移动到选取的元素及其子元素上时触发 。
    • mouseenter 事件只在鼠标移动到选取的元素上时触发。

    mouseleave与mouseout事件的区别:

    • mouseout 事件在鼠标离开任意一个子元素及选的元素时触发。
    • mouseleave 事件只在鼠标离开选取的的元素时触发。

    详细解释可以查看jQuery事件冒泡相关词条。

    mousemove() 事件函数

    说明:

    当鼠标指针在指定的元素中移动时,就会发生 mousemove 事件。mousemove() 方法触发 mousemove 事件,或添加当发生 mousemove 事件时运行的函数。
    用户把鼠标移动一个像素,就会发生一次 mousemove 事件。处理所有 mousemove 事件会耗费系统资源。请谨慎使用该事件。

    语法:

    触发被选元素的 mousemove 事件:

    $(selector).mousemove()
    

    添加函数到 mousemove 事件:

    $(selector).mousemove(function)
    

    解释:

    mousemove()函数的参数是回调函数,可选项,当mousemove事件触发时,该函数就会被执行。

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"> 
            <script src="jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $(document).mousemove(function(event){
                    $("span").text(event.pageX + ", " + event.pageY);
                  });
                });
            </script>
        </head>
        <body>
        	<p>鼠标指针的坐标是: <span></span>.</p>
        </body>
    </html>
    

    经验分享

    鼠标移动事件在做网页特效开发时是最常用的事件之一,也是实现用户交互的基本事件,所以掌握好常用的鼠标移动事件,对以后做网页中的特效有很大的帮助。

    微信交流:zzxingyun

    展开全文
  • jQuery鼠标事件

    2019-02-23 14:33:15
    jQuery鼠标事件 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 开发工具与关键技术:Visual Studio 2015 jQuery 作者:林敏静 撰写时间:2019年2月7日 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^...

    jQuery鼠标事件

    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    开发工具与关键技术:Visual Studio 2015 jQuery
    作者:林敏静
    撰写时间:2019年2月7日
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    这里来复习jQuery中的鼠标事件,下面写了六种事件,是我们经常会遇到的。

    在这里插入图片描述
    在这里插入图片描述
    click单击事件顾名思义,鼠标点击一次就会弹出框架,
    在这里插入图片描述
    dblclick双击事件,鼠标双击两次弹出框架
    在这里插入图片描述
    mouseup弹起事件,鼠标按下松开后弹出框架
    在这里插入图片描述
    mousedown按下事件,鼠标按下即刻弹出框架
    在这里插入图片描述
    mouseover移入事件,鼠标移入即刻弹出框架
    在这里插入图片描述
    mouseover移出事件,鼠标移入再移出后弹出框架
    在这里插入图片描述

    注:以上内容来自老师上课内容,以及个人学习总结

    展开全文
  • jQuery鼠标点击事件

    千次阅读 2020-01-16 19:57:14
    jQuery鼠标点击事件是最常用的事件之一,当用户使用鼠标在浏览器窗口或元素上进行点击交互时触发的事件,都属于鼠标点击事件的范围。常见的鼠标操作有:单击、双击、右键等等。 click() 事件函数 说明: 当用户...

    概念

    个人理解:

    jQuery鼠标点击事件是最常用的事件之一,当用户使用鼠标在浏览器窗口或元素上进行点击交互时触发的事件,都属于鼠标点击事件的范围。常见的鼠标操作有:单击、双击、右键等等。

    click() 事件函数

    说明:

    当用户单击鼠标左键时触发click()函数,每触发一次匹配元素的click事件,该事件函数就会被调用。

    语法:

    触发被选元素的click事件:

    $(selector).click()
    

    添加函数到click事件:

    $(selector).click(function)
    

    解释:

    click()函数的参数为回调函数,可选项,当click事件发生时运行的函数。

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"> 
            <script src="jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("p").click(function(){
                   alert("段落被点击了。");
                  });
                });
            </script>
        </head>
        
        <body>
        	<p>点击这个段落。</p>
        </body>
    </html>
    

    dblclick() 事件函数

    说明:

    当用户双击鼠标左键时触发dblclick()事件,dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数。dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素,则会产生问题。

    语法:

    触发被选元素的 dblclick 事件:

    $(selector).dblclick()
    

    添加函数到 dblclick 事件:

    $(selector).dblclick(function)
    

    解释:

    dblclick()函数的参数是一个回调函数,可选项,当dblclick事件触发时运行该函数。

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"> 
            <script src="jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("p").dblclick(function(){
                   alert("这个段落被双击。");
                  });
                });
            </script>
        </head>
        
        <body>
        	<p>双击这个段落。</p>
        </body>
    </html>
    

    鼠标右击事件

    在jQuery中没有提供鼠标右击事件函数,我们可以通过其他函数来事件鼠标右击事件的监听。

    方法一: 使用contextmenu事件

    代码示例:

    点击鼠标右键禁止出现默认菜单

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <script src="jquery.min.js"></script>
            <script type="text/javascript">
                $(document).ready(function(){
                    $(document).contextmenu(function(e){
                        e.preventDefault();//阻止默认行为
                        console.log('this:'+this);
                        console.log('e:'+e);
                        console.log('e.target:'+e.target);
                    });	
                });
            </script>
        </head>
        
        <body>
        </body>
    </html>
    

    解释:

    使用contextmenu事件自定义右键弹出菜单,使用event对象的preventDefault()函数阻止默认行为的发生,即可间接实现鼠标右键控制。

    方法二:使用bind事件绑定

    代码示例:

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <script src="jquery.min.js"></script>
            <script type="text/javascript">
            $(document).ready(function(){
                $(document).bind("contextmenu", function (e) {
                    e.preventDefault();//阻止默认行为
                    console.log('this:'+this);
                    console.log('e:'+e);
                    console.log('e.target:'+e.target);
                });
            });
            </script>
        </head>
        
        <body>
        </body>
    </html>
    

    mousedown()&mouseup() 事件函数

    说明:

    当鼠标指针移动到元素上方,并按下鼠标左键时,会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件,或添加当发生 mousedown 事件时运行的函数。

    当鼠标指针移动到元素上方,并松开鼠标左键时,会发生 mouseup 事件。mouseup() 方法触发 mouseup 事件,或添加当发生 mouseup 事件时运行的函数。

    该方法通常mousedown()mouseup() 方法一起使用。

    语法:

    触发被选元素的 mousedownmouseup 事件:

    $(selector).mousedown()
    $(selector).mouseup()
    

    添加函数到 mousedownmouseup 事件:

    $(selector).mousedown(function)
    $(selector).mouseup(function)
    

    解释:

    mousedown()mouseup()函数的参数是一个回调函数,可选项,当 mousedown 事件或mouseup事件被触发时运行相应的回调函数。

    示例:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"> 
            <script src="jquery.min.js"></script>
            <script>
                $(document).ready(function(){
                  $("div").mouseup(function(){
                    $(this).after("<p style='color:green;'>释放鼠标按钮。</p>");
                  });
                  $("div").mousedown(function(){
                    $(this).after("<p style='color:purple;'>按下鼠标按钮。</p>");
                  });
                 });
            </script>
        </head>
        
        <body>
        	<div>在这个 div 元素中按下和释放鼠标按钮。</div>
        </body>
    </html>
    

    监听鼠标按键

    我们在实现某些特定的需求时,需要监听到鼠标点击,并且要知道是鼠标的哪个键被按下,针对这样的需求,我们可以通过鼠标按下事件mousedown来事件监听。

    示例:

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<script src="jquery.min.js"></script>
    		<script type="text/javascript">
    		$(document).ready(function(){
    			$(document).mousedown(function(e) {
    		         // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
    		         console.log(e.which);
    	     	})
    		});
    		</script>
    	</head>
    	
    	<body>
    	</body>
    </html>
    

    经验分享

    鼠标点击事件在做网页特效开发时是最常用的事件之一,也是实现用户交互的基本事件,所以掌握好常用的鼠标点击事件,对以后做网页中的特效有很大的帮助。

    微信交流:zzxingyun

    展开全文
  • jQuery鼠标事件与hover事件

    千次阅读 2019-05-17 08:35:37
    在我学到jQuery鼠标事件,我知道了jQuery鼠标事件列表中有很多事件,它们分别是:1.click 单击事件、2.dbclick 双击事件、3.mousedown 鼠标按下事件、4.mouseup鼠标弹起事件、5. mouseenter 鼠标进入事件、6....

    (作者:老薛,撰写时间:2019年5月13日)
    在我学到jQuery鼠标事件,我知道了jQuery鼠标事件列表中有很多事件,它们分别是:1.click
    单击事件、2.dbclick
    双击事件、3.mousedown
    鼠标按下事件、4.mouseup鼠标弹起事件、5. mouseenter 鼠标进入事件、6.mouseleave 鼠标离开事件。
    说到jQuery鼠标事件,我也不得不提到click与dbclick事件,而click与dbclick事件有一句代码是click([[data], fn]),这里面代码的参数说明:fn 在每一个匹配元素的click事件中绑定的处理函数。data是click([Data], fn) 可传入data供函数fn处理。
    而fn是在每一个匹配元素的click事件中绑定的处理函数。所以代码又可以是dblclick([[data],fn])参数说明同上。
    我上面所说的内容也就是下面的截图列子:
    在这里插入图片描述
    图1
    大家也看到图1,第一个按钮的点击事件,这里面写的是click的单击事件,要写出为选中第一个按钮的方法,并为他添加点击事件。
    还有一个是jQuery鼠标事件之mouseenter与mouseleave事件的截图:
    在这里插入图片描述
    图2
    讲完了jQuery鼠标事件,接下来就是hover事件。hover事件是一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态。
    hover事件代码是hover([over,]out),意思也就是当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。而且,会伴随着对鼠标是否仍然处在特定元素中的检测(例如,处在div中的图像),如果是,则会继续保持“悬停”状态,而不触发移出事件(修正了使用mouseout事件的一个常见错误)。也就是下面这张截图:
    在这里插入图片描述

    展开全文
  • jquery 鼠标悬停显示信息提示框,但是提示框会影响其他块的布局位置(其他块会向下滑动),要怎么修改才可以让提示框覆盖在最上层显示而不影响其他块的布局 ``` <!DOCTYPE html> 鼠标悬停显示提示信息窗口 ...
  • jQuery鼠标经过显示大图

    千次阅读 2019-01-29 14:04:36
    jQuery鼠标经过显示大图 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta http-equiv="content-type" content="text/html; charset=...
  • Jquery鼠标滚轮放大缩小图片

    千次阅读 2015-11-10 10:37:56
    使用Jquery鼠标点击图片,划动鼠标滚轮放大缩小图片。 鼠标滚轮放大图片 img{ border:2px solid #000000; margin:10px; } body{ font-family:Verda
  • jQuery鼠标移入,移出事件 mouseenter 鼠标指针穿过被选元素或其子元素时 mouseleave 鼠标移出被选元素内部时 mouseover 鼠标指针穿过被选元素或其子元素时 mouseout 鼠标指针离开被选元素或其子元素时 ...
  • jquery鼠标移动图片上实现放大效果

    千次阅读 2017-06-25 08:33:16
    jquery鼠标移动图片上实现放大效果 首先界面上要有图片,下面是图片 其次在script代码段中加入如下代码,进行适量修改即可 $(document).ready(function () { var x = 10; var y = 20; $("#big-circle")....
  • jQuery鼠标悬停半透明遮罩效果,jquery,鼠标悬停,半透明,遮罩效果,jQuery鼠标悬停半透明遮罩效果是一款实用的jquery特效,实现了鼠标悬停显示,代码量很少,主要运用了jquery的动画方法animate.
  • jQuery 鼠标滚轮插件 mousewheel

    千次阅读 2017-11-24 13:51:30
    &lt;!...gt; ...jQuery 鼠标滚轮插件 mousewheel&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt
  • JQuery鼠标点击事件

    千次阅读 2019-04-17 10:50:12
    JQuery点击事件有以下几种: Click鼠标单击事件 Dblclick 鼠标双击事件 Mousedown鼠标按下事件 Mouseup鼠标弹起事件 Mouseenter鼠标进入事件 Mouseleave鼠标移出事件 下面是这些事件的示例代码 <style> ...
  • jquery鼠标经过延时处理

    千次阅读 2012-12-10 15:20:20
    jquery鼠标经过延时处理 在jquery实际开发中,我们有时会用到鼠标经过显示隐藏层这样的效果,其实这种效果随处可见,在jquery中有一个hover事件可以完成类是效果,代码很简单,如下: $(document).ready...
  • jQuery 鼠标指针 悬浮在文字上提示信息 var message = $('#unmatch-request-message').val(); var hint = '&lt;div id="hint-message"&gt;' + message + '&lt;/div&gt;'; $('.mentee-...
  • 这段代码经过演示,可以达到标题...jquery鼠标经过淡入显示提示框 演示 .div{ border:1px solid #0000FF; float:left; width:200px; height:200px; margin:10px;} div#tip{ position:absolute; width:100px; heig
  • /*鼠标拖拽*/ $.baseball({ handle accepter:".passjicnt",//容器的集合 target:".mid",//希望能拖动的元素块,也就是(.passjicnt中的.mid)的子元素 handle:$(".mid ul") // 元素块拖动的鼠标入口,此参数不...
  • [url=http://www.huiyi8.com/jiaoben/]jQuery[/url]鼠标移到图片悬浮提示,jQuery,提示工具,悬浮效果,响应式,jQuery鼠标移到图片悬浮提示是一款基于jquery实现的响应式大图悬浮弹窗提示工具. [img]...
  • Jquery鼠标右键点击弹出菜单

    千次阅读 2016-02-25 15:16:54
    今天分享一个Jquery鼠标右键点击弹出菜单的组合功能。在项目中,主要是用在表格中,点击单元格, 弹出右键菜单,选择下一步的功能。 首先是,右键点击事件的获取: 鼠标的事件e,e.which: 1 = 鼠标左键 left; 2 ...
  • jquery鼠标经过弹出层写法 新闻中心 公司新闻 媒体报道 $(".navitem").hover(function(){ $(this).children('a').next('.navitemlist').fadeIn(); },function(){ $(this).children('a')....
  • jQuery鼠标悬停放射出炫幻效果,jQuery,鼠标悬停,CSS3,HTML5,jQuery鼠标悬停放射出炫幻效果是一款基于jQuery+CSS3+HTML5实现的超炫幻边框放射特效.JQuery特效 网页特效代码 javascript特效  ...
  • 78.聚光灯特效(JQuery鼠标移动特效)

    千次阅读 2020-08-21 08:15:33
    前端特效 78】聚光灯特效(JQuery鼠标移动特效) 视频地址一:https://www.ixigua.com/6861891713456144899/ 视频地址二:https://www.bilibili.com/video/BV1sA411n7us/ 源码 index.html <!DOCTYPE html> &...
  • jquery鼠标停止移动事件

    千次阅读 2013-12-22 07:45:45
    jquery鼠标停止移动事件。 复制代码代码如下: (function($){  $.fn.moveStopEvent = function(callback){  return this.each(function() {  var x = 0,  y = 0,  x1 = 0,  y1 = 0,  isRun =...
  • jQuery鼠标事件列表: 1、click 单击事件 ; 2、dbclick 双击事件; 3、mousedown 鼠标按下事件; 4、mouseup鼠标弹起事件; 5、mouseenter 鼠标进入事件 ; 6、mouseleave 鼠标离开事件; 举例: HTML代码: CSS...
  • jquery鼠标悬停图片上下滚动切换

    千次阅读 2015-01-21 10:24:07
    jquery鼠标悬停图片上下滚动切换 .toll_img{ float:left;width:200px;height:514px;} .toll_info{ float:left;width:200px;height:514px;} $(function(){ $('div').mouseover(function(){ //alert('...
  • jQuery 鼠标滚轮实现图片缩放

    千次阅读 2014-11-02 17:40:07
    合理的使用鼠标滚轮能很好的提高用户体验,今天就让我们看看 jQuery 鼠标滚轮实现图片的缩放。首先,直接给出缩放方法如下: function zoomImg(o) { var zoom = parseInt(o.style.zoom, 10) || 100; zoom += ...
  • 新手求问一个jquery鼠标指向控制显示隐藏菜单问题,求大神解答 代码如下: $( "#user_inf" ).empty(); var user_name="admin"; $( "#user_inf" ).append("<div><a>"+user_name+"</a><img src='"+...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 86,714
精华内容 34,685
关键字:

jquery鼠标