鼠标移动延迟 hoverIntent.js使用

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html  xmlns ="http://www.w3.org/1999/xhtml" >

< head >

< title >仿Flash的jquery横向滑动菜单_网页代码站 </ title >

< script  type ="text/javascript"  src ="themes/script/jquery.js" ></ script >

< script  type ="text/javascript" >

( function ($) {

    $.fn.hoverIntent  =   function (f,g) {

         //  default configuration options

         var  cfg  =  {

            sensitivity:  7 ,

            interval:  100 ,

            timeout:  0

        };

         //  override configuration options with user supplied object

        cfg  =  $.extend(cfg, g  ?  { over: f, out: g } : f );

         //  instantiate variables

         //  cX, cY = current X and Y position of mouse, updated by mousemove event

         //  pX, pY = previous X and Y position of mouse, set by mouseover and polling interval

         var  cX, cY, pX, pY;

         //  A private function for getting mouse position

         var  track  =   function (ev) {

            cX  =  ev.pageX;

            cY  =  ev.pageY;

        };

         //  A private function for comparing current and previous mouse position

         var  compare  =   function (ev,ob) {

            ob.hoverIntent_t  =  clearTimeout(ob.hoverIntent_t);

             //  compare mouse positions to see if they've crossed the threshold

             if  ( ( Math.abs(pX - cX)  +  Math.abs(pY - cY) )  <  cfg.sensitivity ) {

                $(ob).unbind( " mousemove " ,track);

                 //  set hoverIntent state to true (so mouseOut can be called)

                ob.hoverIntent_s  =   1 ;

                 return  cfg.over.apply(ob,[ev]);

            }  else  {

                 //  set previous coordinates for next time

                pX  =  cX; pY  =  cY;

                 //  use self-calling timeout, guarantees intervals are spaced out properly (avoids JavaScript timer bugs)

                ob.hoverIntent_t  =  setTimeout(  function (){compare(ev, ob);} , cfg.interval );

            }

        };

         //  A private function for delaying the mouseOut function

         var  delay  =   function (ev,ob) {

            ob.hoverIntent_t  =  clearTimeout(ob.hoverIntent_t);

            ob.hoverIntent_s  =   0 ;

             return  cfg.out.apply(ob,[ev]);

        };

         //  A private function for handling mouse 'hovering'

         var  handleHover  =   function (e) {

             //  next three lines copied from jQuery.hover, ignore children onMouseOver/onMouseOut

             var  p  =  (e.type  ==   " mouseover "   ?  e.fromElement : e.toElement)  ||  e.relatedTarget;

             while  ( p  &&  p  !=   this  ) {  try  { p  =  p.parentNode; }  catch (e) { p  =   this ; } }

             if  ( p  ==   this  ) {  return   false ; }

             //  copy objects to be passed into t (required for event object to be passed in IE)

             var  ev  =  jQuery.extend({},e);

             var  ob  =   this ;

             //  cancel hoverIntent timer if it exists

             if  (ob.hoverIntent_t) { ob.hoverIntent_t  =  clearTimeout(ob.hoverIntent_t); }

             //  else e.type == "onmouseover"

             if  (e.type  ==   " mouseover " ) {

                 //  set "previous" X and Y position based on initial entry point

                pX  =  ev.pageX; pY  =  ev.pageY;

                 //  update "current" X and Y position based on mousemove

                $(ob).bind( " mousemove " ,track);

                 //  start polling interval (self-calling timeout) to compare mouse coordinates over time

                 if  (ob.hoverIntent_s  !=   1 ) { ob.hoverIntent_t  =  setTimeout(  function (){compare(ev,ob);} , cfg.interval );}

             //  else e.type == "onmouseout"

            }  else  {

                 //  unbind expensive mousemove event

                $(ob).unbind( " mousemove " ,track);

                 //  if hoverIntent state is true, then call the mouseOut function after the specified delay

                 if  (ob.hoverIntent_s  ==   1 ) { ob.hoverIntent_t  =  setTimeout(  function (){delay(ev,ob);} , cfg.timeout );}

            }

        };

         //  bind the function to the two event listeners

         return   this .mouseover(handleHover).mouseout(handleHover);

    };

})(jQuery);

</ script >

< script  language ="javascript" >

$( function (){

            hiConfig  =  {

                        sensitivity:  1 ,

                        interval:  100 , 

                        timeout:  100 , 

                        over:  function () {

                             var  x = $( this ).offset().left - $( " #menu_bar ul " ).offset().left;

                            $( " #menu_bar span " ).animate({left:x + " px " ,top: ' 0px ' }, 300 );                       

        },  //  function = onMouseOver callback (REQUIRED)

        out:  function () {}  //  function = onMouseOut callback (REQUIRED)

        }

            $( " #menu_bar li " ).hoverIntent(hiConfig)

})

</ script >

< style >

body { text-align : center ; font-size : 12px ; color : #333 ; font-family : "宋体" ; background : #fff ; margin : 0 auto ; padding : 0 ; }

body > div { text-align : center ; margin-right : auto ; margin-left : auto ; }

div,form,ul,ol,li,span,p,dt,dd,dl { border : 0 ; margin : 0 ; padding : 0 ; }

img,a img { border : 0 ; margin : 0 ; padding : 0 ; }

h1,h2,h3,h4,h5,h6 { font-size : 12px ; font-weight : 400 ; margin : 0 ; padding : 0 ; }

ul,ol,li { list-style : none ; }

td { word-break : break-all ; }

a { color : #003cc8 ; text-decoration : none ; }

a:hover { text-decoration : underline ; color : blue ; }

.f_tahoma { font-family : Tahoma ; }

em,i { font-style : normal ; }

#menu_bar { widtH : 600px ; margin : 0 auto ; background : #000066 ;  position : relative ; height : 30px ; border : 1px solid #CCCCCC }

#menu_bar ul { height : 30px ; overflow : hidden ;  position : absolute ; z-index : 2 ; left : 0px ; top : 0px ; line-height : 30px ; }

#menu_bar li { width : 100px ; float : left ; text-align : center ; font-size : 14px ; font-weight : bold }

#menu_bar li a { color : #fff }

#menu_bar li a:hover { color : #ff7800 }

#menu_bar span { display : block ; position : absolute ; background : #fff ; filter :  alpha(Opacity=40) ; opacity :  0.4 ; -moz-opacity :  0.4 ; -khtml-opacity :  0.4 ; width : 100px ; z-

index : 1 ; height : 30px ; left : 0px ; top : 0px ; }

</ style >

</ head >

< body >

< div  id ="menu_bar" >

     < ul >

         < li >< a  href ="#"  target ="_blank" >首页 </ a ></ li >

         < li >< a  href ="#"  target ="_blank" >ASP </ a ></ li >

         < li >< a  href ="#"  target ="_blank" >PHP </ a ></ li >

         < li >< a  href ="#"  target ="_blank" >ASP.NET </ a ></ li >

         < li >< a  href ="#"  target ="_blank" >DELPHI </ a ></ li >

         < li >< a  href ="#"  target ="_blank" >VC++ </ a ></ li >

     </ ul >

     < span ></ span >

</ div >

< br  />

< p >< a  href ="http://www.webdm.cn" >网页代码站 </ a > - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！ </ p >

</ body >

</ html >

转载于:https://www.cnblogs.com/hejunrex/archive/2011/10/06/2199829.html