利用jquery实现点击延时插件



67 264 89



特效描述:利用jquery实现 点击延时插件,利用jquery实现点击延时插件

代码结构

1. 引入JS

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

2. 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></title>
	<!-- 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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 图片延迟加载 二级导航菜单 滑动选项卡切换 加载动画 下拉导航菜单 文字延迟加载 图片滑动 竖直导航菜单 文字滑动 图标导航菜单 滑动手风琴 固定导航菜单 滑动星星打分 侧边导航菜单 树形导航菜单 网址导航菜单 导航菜单插件 文字导航菜单 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动滑过 延长延迟加载 导航菜单导航条

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到