jQuery焦点控制图层展示延迟隐藏的方法
本文实例讲述了jQuery焦点控制图层展示延迟隐藏的方法。分享给大家供大家参考。具体实现方法如下:
<!doctypehtml> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"> </head> <body> <bid="button">点我</b> <divid="div"style="background:#faf;outline:none;display:none">我是内容</div> <scripttype="text/javascript"src="jquery.js"></script> <script> $(document).ready(function(){ jQuery.focusShow({butID:'#button',divID:'#div',mouse:'over',time:'500'}) }) jQuery.extend({ focusShow:function(config){ //ps:焦点控制图层展示,延迟隐藏 //focusShow({butID:'按钮ID',divID:'容器ID',mouse:'over||click',time:'时间'}) varbutID=$(config.butID||false), divID=$(config.divID||false), mouse=config.mouse||'click', time=config.time||'500', timer; functionre(){$(divID).hide()} switch(mouse){ case"click": butID.bind({'click':function(){divID.attr('tabindex','-1');divID.focus()}}); divID.bind({ "focus":function(){clearTimeout(timer);divID.show()}, "blur":function(){timer=setTimeout(re,time)} }) break case"over": $(butID,divID).each(function(){ $(this).bind({ 'mouseover':function(){clearTimeout(timer);divID.show()}, 'mouseout':function(){timer=setTimeout(re,time)} }) }) break default: } } }); </script> </body> </html>
希望本文所述对大家的jQuery程序设计有所帮助。