jquery 动画特效

百威

浏览: 691259 次
来自: ...

最近访客更多访客>>

gaozzsoft

A741841403

Liu.Guo.Zhu

mmmzzc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jQuery

jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>show()、hide()方法</title>
<style type="text/css">
<!--
p{
	border:1px solid #003863;
	font-size:13px;
	padding:4px;
	background:#FFFF00;
}
input{
	border:1px solid #003863;
	font-size:14px;
	font-family:Arial, Helvetica, sans-serif;
	padding:3px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:first").click(function(){
		$("p").hide();	//隐藏
	});
	$("input:last").click(function(){
		$("p").show();	//显示
	});
});
</script>
</head>
<body>
	<input type="button" value="Hide"> <input type="button" value="Show">
	<p>点击按钮，看看效果</p>
    <span>一段其它的文字</span>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多级菜单</title>
<style type="text/css">
<!--
ul{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
li{
	padding:1px; margin:0px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("li:has(ul)").click(function(e){
		if(this==e.target){
			if($(this).children().is(":hidden")){
				//如果子项是隐藏的则显示
				$(this).css("list-style-image","url(minus.gif)")
				.children().show();
			}else{
				//如果子项是显示的则隐藏
				$(this).css("list-style-image","url(plus.gif)")
				.children().hide();
			}
		}
		return false;	//避免不必要的事件混绕
	}).css("cursor","pointer").click();	//加载时触发点击事件
	
	//对于没有子项的菜单，统一设置
	$("li:not(:has(ul))").css({
		"cursor":"default",
		"list-style-image":"none"
	});
});
</script>
</head>
<body>
<ul>
	<li>第1章 Javascript简介</li>
	<li>第2章 Javascript基础</li>
	<li>第3章 CSS基础
		<ul>
			<li>第3.1节 CSS的概念</li>
			<li>第3.2节 使用CSS控制页面
				<ul>
					<li>3.2.1 行内样式</li>
					<li>3.2.2 内嵌式</li>
				</ul>
			</li>
			<li>第3.3节 CSS选择器</li>
		</ul>
	</li>
	<li>第4章 CSS进阶
		<ul>
			<li>第4.1节 div标记与span标记</li>
			<li>第4.2节 盒子模型</li>
			<li>第4.3节 元素的定位
				<ul>
					<li>4.3.1 float定位</li>
					<li>4.3.2 position定位</li>
					<li>4.3.3 z-index空间位置</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>多级菜单</title>
<style type="text/css">
<!--
ul{
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}
li{
	padding:1px; margin:0px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("li:has(ul)").click(function(e){
		if(this==e.target){
			$(this).children().toggle();
			$(this).css("list-style-image",($(this).children().is(":hidden")?"url(plus.gif)":"url(minus.gif)"))
		}
		return false;	//避免不必要的事件混绕
	}).css("cursor","pointer").click();	//加载时触发点击事件
	
	//对于没有子项的菜单，统一设置
	$("li:not(:has(ul))").css({
		"cursor":"default",
		"list-style-image":"none"
	});
});
</script>
</head>
<body>
<ul>
	<li>第1章 Javascript简介</li>
	<li>第2章 Javascript基础</li>
	<li>第3章 CSS基础
		<ul>
			<li>第3.1节 CSS的概念</li>
			<li>第3.2节 使用CSS控制页面
				<ul>
					<li>3.2.1 行内样式</li>
					<li>3.2.2 内嵌式</li>
				</ul>
			</li>
			<li>第3.3节 CSS选择器</li>
		</ul>
	</li>
	<li>第4章 CSS进阶
		<ul>
			<li>第4.1节 div标记与span标记</li>
			<li>第4.2节 盒子模型</li>
			<li>第4.3节 元素的定位
				<ul>
					<li>4.3.1 float定位</li>
					<li>4.3.2 position定位</li>
					<li>4.3.3 z-index空间位置</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>伸缩的菜单，用toggle()重写</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	width:200px;
	font-family:Arial;
}
#navigation > ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation > ul > li {
	border-bottom:1px solid #ED9F9F;	/* 添加下划线 */
}
#navigation > ul > li > a{
	display:block;						/* 区块显示 */
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #711515;		/* 左边的粗红边 */
	border-right:1px solid #711515;		/* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
	background-color:#c11136;
	color:#FFFFFF;
}
#navigation > ul > li > a:hover{		/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}

/* 子菜单的CSS样式 */
#navigation ul li ul{
	list-style-type:none;
	margin:0px;
	padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
	border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
	display:block;
	padding:3px 3px 3px 0.5em;
	text-decoration:none;
	border-left:28px solid #a71f1f;
	border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
	background-color:#e85070;
	color:#FFFFFF;
}
#navigation ul li ul li a:hover{
	background-color:#c2425d;
	color:#ffff00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("li").find("ul").prev().click(function(){
		$(this).next().toggle();
	});
	$("li:has(ul)").find("ul").hide();
});
</script>
</head>
<body>
<div id="navigation">
	<ul id="listUL">
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a>
        	<ul>
            	<li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
		<li><a href="#">Sports</a>
        	<ul>
            	<li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>        
        </li>
		<li><a href="#">Weather</a>
        	<ul>
            	<li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
            </ul>
        </li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>show()、hide()方法</title>
<style type="text/css">
<!--
body{
	background:url(bg1.jpg);
}
img{
	border:1px solid #FFFFFF;
}
input{
	border:1px solid #FFFFFF;
	font-size:13px; padding:4px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#000000;
	color:#FFFFFF;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:first").click(function(){
		$("img").hide(3000);	//逐渐隐藏
	});
	$("input:last").click(function(){
		$("img").show(1000);	//逐渐显示
	});
});
</script>
</head>
<body>
	<input type="button" value="Hide"> <input type="button" value="Show">
	<p><img src="01.jpg"></p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>toggle(speed)方法</title>
<style>
<!--
body{
	background-color:#ffdee0;
}
#navigation {
	width:200px;
	font-family:Arial;
}
#navigation > ul {
	list-style-type:none;				/* 不显示项目符号 */
	margin:0px;
	padding:0px;
}
#navigation > ul > li {
	border-bottom:1px solid #ED9F9F;	/* 添加下划线 */
}
#navigation > ul > li > a{
	display:block;						/* 区块显示 */
	padding:5px 5px 5px 0.5em;
	text-decoration:none;
	border-left:12px solid #711515;		/* 左边的粗红边 */
	border-right:1px solid #711515;		/* 右侧阴影 */
}
#navigation > ul > li > a:link, #navigation > ul > li > a:visited{
	background-color:#c11136;
	color:#FFFFFF;
}
#navigation > ul > li > a:hover{		/* 鼠标经过时 */
	background-color:#990020;			/* 改变背景色 */
	color:#ffff00;						/* 改变文字颜色 */
}

/* 子菜单的CSS样式 */
#navigation ul li ul{
	list-style-type:none;
	margin:0px;
	padding:0px 0px 0px 0px;
}
#navigation ul li ul li{
	border-top:1px solid #ED9F9F;
}
#navigation ul li ul li a{
	display:block;
	padding:3px 3px 3px 0.5em;
	text-decoration:none;
	border-left:28px solid #a71f1f;
	border-right:1px solid #711515;
}
#navigation ul li ul li a:link, #navigation ul li ul li a:visited{
	background-color:#e85070;
	color:#FFFFFF;
}
#navigation ul li ul li a:hover{
	background-color:#c2425d;
	color:#ffff00;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("li").find("ul").prev().click(function(){
		$(this).next().toggle(500);	//逐渐的显隐
	});
	$("li:has(ul)").find("ul").hide();
});
</script>
</head>
<body>
<div id="navigation">
	<ul id="listUL">
		<li><a href="#">Home</a></li>
		<li><a href="#">News</a>
        	<ul>
            	<li><a href="#">Lastest News</a></li>
                <li><a href="#">All News</a></li>
            </ul>
        </li>
		<li><a href="#">Sports</a>
        	<ul>
            	<li><a href="#">Basketball</a></li>
                <li><a href="#">Football</a></li>
                <li><a href="#">Volleyball</a></li>
            </ul>        
        </li>
		<li><a href="#">Weather</a>
        	<ul>
            	<li><a href="#">Today's Weather</a></li>
                <li><a href="#">Forecast</a></li>
            </ul>
        </li>
		<li><a href="#">Contact Me</a></li>
	</ul>
</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>fadeIn()、fadeOut()方法</title>
<style type="text/css">
<!--
body{
	background:url(bg2.jpg);
}
img{
	border:1px solid #000000;
}
input{
	border:1px solid #000000;
	font-size:13px; padding:4px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
	color:#000000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:eq(0)").click(function(){
		$("img").fadeOut(3000);	//逐渐fadeOut
	});
	$("input:eq(1)").click(function(){
		$("img").fadeIn(1000);	//逐渐fadeIn
	});
	$("input:eq(2)").click(function(){
		$("img").hide(3000);	//逐渐隐藏
	});
	$("input:eq(3)").click(function(){
		$("img").show(1000);	//逐渐显示
	});
});
</script>
</head>
<body>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="Hide">
<input type="button" value="Show">
	<p><img src="02.jpg"></p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>fadeTo()方法</title>
<style type="text/css">
<!--
body{
	background:url(bg2.jpg);
}
img{
	border:1px solid #000000;
}
input{
	border:1px solid #000000;
	font-size:13px; padding:2px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
	color:#000000;
}
p{
	padding:5px;
	border:1px solid #000000;	/* 添加边框，利于观察效果 */
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:eq(0)").click(function(){
		$("img").fadeOut(1000);
	});
	$("input:eq(1)").click(function(){
		$("img").fadeIn(1000);
	});
	$("input:eq(2)").click(function(){
		$("img").fadeTo(1000,0.5);
	});
	$("input:eq(3)").click(function(){
		$("img").fadeTo(1000,0);
	});
});
</script>
</head>
<body>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">
	<p><img src="03.jpg"></p>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>slideUp()和slideDown()</title>
<style type="text/css">
<!--
body{
	background:url(bg2.jpg);
}
img{
	border:1px solid #000000;
	margin:8px;
}
input{
	border:1px solid #000000;
	font-size:13px; padding:2px;
	font-family:Arial, Helvetica, sans-serif;
	background-color:#FFFFFF;
	color:#000000;
}
div{
	background-color:#FFFF00;
	height:80px; width:80px;
	border:1px solid #000000;
	float:left; margin-top:8px;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:eq(0)").click(function(){
		$("div").add("img").slideUp(1000);
	});
	$("input:eq(1)").click(function(){
		$("div").add("img").slideDown(1000);
	});
	$("input:eq(2)").click(function(){
		$("div").add("img").hide(1000);
	});
	$("input:eq(3)").click(function(){
		$("div").add("img").show(1000);
	});
});
</script>
</head>
<body>
	<input type="button" value="SlideUp">
	<input type="button" value="SlideDown">
	<input type="button" value="Hide">
	<input type="button" value="Show"><br>
	<div></div><img src="04.jpg">
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>animate()方法</title>
<style type="text/css">
<!--
body{
	background:url(bg2.jpg);
}
div{
	background-color:#FFFF00;
	height:40px; width:80px;
	border:1px solid #000000;
	margin-top:5px; padding:5px;
	text-align:center;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("button").click(function(){
		$("#block").animate({
			opacity: "0.5",
			width: "80%",
			height: "100px",
			borderWidth: "5px",
			fontSize: "30px",
			marginTop: "40px",
			marginLeft: "20px"
		},2000);
	});
});
</script>
</head>
<body>
	<button id="go">Go>></button>
	<div id="block">动画！</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>animate()方法</title>
<style type="text/css">
<!--
body{
	background:url(bg2.jpg);
}
div{
	position:absolute;	/* 绝对定位 */
	left:90px; top:50px;
}
input{
	border:1px solid #000033;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:first").click(function(){
		$("#block").animate({
			left: "-=80px"		//相对左移
		},300);
	});
	$("input:last").click(function(){
		$("#block").animate({
			left: "+=80px"		//相对右移
		},300);
	});
});
</script>
</head>
<body>
	<input type="button" value="<<左"> <input type="button" value="右>>">
	<div id="block"><img src="05.jpg"></div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>animate()方法</title>
<style type="text/css">
<!--
body{
	background:url(bg2.jpg);
}
div{
	background-color:#FFFF22; 
	width:100px; text-align:center;
	border:2px solid #000000;
	margin:3px; font-size:13px;
	font-family:Arial, Helvetica, sans-serif;
}
input{
	border:1px solid #000033;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$("input:eq(0)").click(function(){
		//第一个animate与第二个animate同时执行，然后再执行第三个
		$("#block1").animate({width:"90%"},{queue:false,duration:1500})
		.animate({fontSize:"24px"},1000)
		.animate({borderRightWidth:"20px"},1000);
	});
	$("input:eq(1)").click(function(){
		//依次执行三个animate
		$("#block2").animate({width:"90%"},1500)
		.animate({fontSize:"24px"}, 1000)
		.animate({borderRightWidth:"20px"}, 1000);
	});
	$("input:eq(2)").click(function(){
		$("input:eq(0)").click();
		$("input:eq(1)").click();
	});
	$("input:eq(3)").click(function(){
		//恢复默认设置
		$("div").css({width:"", fontSize:"", borderWidth:""});
	});
});
</script>
</head>
<body>
	<input type="button" id="go1" value="Block1动画">
	<input type="button" id="go2" value="Block2动画">
	<input type="button" id="go3" value="同时动画">
	<input type="button" id="go4" value="重置">
	<div id="block1">Block1</div>
	<div id="block2">Block2</div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>伸缩的导航条</title>
<style type="text/css">
<!--
body{
	padding:0px; margin:0px;
	background:url(bg3.jpg) no-repeat;
}
#wrapper{min-height:600px;}
#navigation{
	position:absolute;
	top:0px; left:0px;
	margin:0px; padding:0px;
	width:120px; list-style:none;
}
#navigation li{
	position:relative;
	float:left;
	margin:0px; padding:0px;
	height:50px; width:120px;
}
#navigation li a{
	position:absolute;
	display:block;
	top:0px; left:0px;
	height:50px; width:120px;
	line-height:50px;	
	text-align:center;
	color:#FFFFFF;
}
#navigation .nav0 a{background:#F50065;}
#navigation .nav1 a{background:#D60059;}
#navigation .nav2 a{background:#B0004A;}
#navigation .nav3 a{background:#F26B00;}
#navigation .nav4 a{background:#D75F00;}
#navigation .nav5 a{background:#B24F00;}
#navigation .nav6 a{background:#6E8F00;}
#navigation .nav7 a{background:#607D00;}
#navigation .nav8 a{background:#496100;}
#navigation .nav9 a{background:#007f9f;}
#navigation .nav10 a{background:#006b87;}
#navigation .nav11 a{background:#005065;}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
	$('#navigation li').each(function(){
		if(this.className.indexOf("current_page")==-1) {
			$("a",this).css("left","-120px");	//不是当前页的移动到页面左侧外
			$(this).hover(function(){
				$("a",this).animate({left:"0px"}, "fast");
			},function(){
				$("a",this).animate({left:"-120px"}, "fast");
			});
		}
	});
});
</script>
</head>
<body>
<div id="wrapper">
	<ul id="navigation">
		<li class="nav0 current_page"><a href="#">我的日志</a></li>
		<li class="nav1"><a title="资源下载" href="#">资源下载</a></li>
		<li class="nav2"><a title="相册" href="#">相册</a></li>
		<li class="nav3"><a title="一起走到" href="#">一起走到</a></li>
		<li class="nav4"><a title="从明天起" href="#">从明天起</a></li>
		<li class="nav5"><a title="纸飞机" href="#">纸飞机</a></li>
		<li class="nav6"><a title="下一站" href="#">下一站</a></li>
        <li class="nav7"><a title="门" href="#">门</a></li>
        <li class="nav8"><a title="人文知识" href="#">人文知识</a></li>
        <li class="nav9"><a title="标签记录" href="#">标签记录</a></li>
        <li class="nav10"><a title="友情链接" href="#">友情链接</a></li>
        <li class="nav11"><a title="联系我们" href="#">联系我们</a></li>
	</ul>
</div>
</body>
</html>

分享到：

jquery 功能函数 | jquery控制页面

2013-07-26 22:55
浏览 1493
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 动画特效

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 动画特效

评论

发表评论

相关推荐

easyui+ztree后台管理系统模板

jQuery中$.ajax()和$.getJson()同步处理详解

jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解

Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结

JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

jquery实现textarea发布框限制文字字数输入(添加中文识别)

jquery实现textarea输入框限制字数的方法

EasyUI创建人员树的实例代码

jquery如何判断checkbox（复选框）是否被选中

利用jQuery简单实现CheckBox全选效果

JQuery 发送Json格式数据

jQuery JSONP跨域

jQuery AJAX 分页插件

jQuery表格自动增加

juery 插件使用

jquery 开发ajax

jquery 功能函数

jquery控制页面

jquery基础

JQuery 获取和设置Select选项的代码

最近访客更多访客>>