hoverIntent点击延时jquery插件特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 hoverIntent点击延时jquery插件特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta http-equiv="imagetoolbar" content="no">
	<title>hoverIntent jQuery Plug-in</title>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.hoverIntent.js"></script>
	<!-- DEMO CSS -->
	<style type="text/css" media="screen">
		/* styles for the demo examples -- NOT REQUIRED for hoverIntent to work, just for demo purposes */
		body {margin:0 auto;text-align:center;width:900px;}
		#RESOURCES #main .demo li { padding-bottom: 0; }
		ul.demo {display:block; width:100%; height:75px; padding:0; margin:0; background:#9cc; list-style-type:none;}
		ul.demo li {background:#fcc; display:block; width:25%; height:50px; padding:0; margin:0; float: left; position:relative; overflow:hidden; cursor:default;  font-size:0.9em; line-height:1.1em;cursor:pointer;}
		ul.demo li.p2 {background:#ffc;}
		ul.demo li.p3 {background:#cfc;}
		ul.demo li.p4 {background:#ccf;}
		ul.demo li span { display:block; margin:4px; background:#eef; cursor:default;}
	</style>

	<!-- DEMO JS -->
	<script type="text/javascript" charset="utf-8">
		$(document).ready(function(){
			$("#demo1 li").hover(makeTall,makeShort);
			$("#demo2 li").hoverIntent(makeTall,makeShort);
			$("#demo3 li").hoverIntent({
				over: makeTall, 
				timeout: 500, 
				out: makeShort
			});
		}); // close document.ready

		function makeTall(){  $(this).animate({"height":75},200);}
		function makeShort(){ $(this).animate({"height":50},200);}
	</script>

</head><body id="RESOURCES">
<div id="pageContent">

  <div id="main">

		<h2>Demo1</h2>
		<ul class="demo" id="demo1">
			<li class="p1">&nbsp;</li>
			<li class="p2">&nbsp;</li>
			<li class="p3">&nbsp;</li>
			<li class="p4"></li>
		</ul>

		<h3>hoverIntent in demo2</h3>

		<ul class="demo" id="demo2">
			<li class="p1">&nbsp;</li>
			<li class="p2">&nbsp;</li>
			<li class="p3">&nbsp;</li>
			<li class="p4"></li>
		</ul>
        
		<h3>hoverIntent with configuration object</h3>

		<ul class="demo" id="demo3">
			<li class="p1">&nbsp;</li>
			<li class="p2">&nbsp;</li>
			<li class="p3">&nbsp;</li>
			<li class="p4">&nbsp;</li>
		</ul>

</div>
  <!-- close #main -->
</div><!-- close #pageContent -->
</body></html>

附件:下载该文件资源,减少时间成本(增值服务)