`
yanghongxia9
  • 浏览: 115047 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JQuery动画特效

 
阅读更多
1.hide()和show()使用，hide()将对象隐藏并从DOM结构中移除，show()将对象显示，演示代码如下： 
<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">
	点击按钮，看看效果

    <span>一段其它的文字</span>
</body>
</html>

2.使用jquery实现多级菜单，简单和易懂： 
<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>

<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>

3.使用toggle()实现伸缩菜单： 
<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>

4.使用hide()和show()实现逐渐隐藏和显示： 
<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>

5.使用toggle()实现菜单逐渐伸缩： 
<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>

6.使用fadeOut()和fadeIn()逐渐隐藏和显示： 
<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>

7.fadeTo()实现隐藏和显示效果： 
<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>

8.使用slideUp()和slideDown()实现隐藏和显示： 
<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>

9.animate()实现动画效果： 
<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>

10.
0
顶
0
踩
分享到：
| java 通过反射获取泛型的类型
评论
发表评论

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

相关推荐

    jQuery动画特效---精通JavaScript+jQuery

    第12课 - jQuery动画特效 - [精通JavaScript+jQuery] 第13课 - jQuery功能函数 - [精通JavaScript+jQuery] 第14课 - jQuery与Ajax - [精通JavaScript+jQuery] 第15课 - jQuery插件 - [精通JavaScript+jQuery]

    jquery动画特效大全

    "jQuery动画特效大全"这个压缩包显然包含了大量利用jQuery制作的各种动画效果及其源码，对于前端开发者来说，这是一个宝贵的资源库，可以帮助他们快速理解和应用jQuery动画。 jQuery的动画功能主要通过`.animate()`...

    jquery动画特效时间轴

    jquery动画特效时间轴

    4个很漂亮的鼠标滑过超链接jQuery动画特效.zip

    标题中的“4个很漂亮的鼠标滑过超链接jQuery动画特效.zip”表明这是一个包含四个不同鼠标悬停效果的jQuery代码集合，专用于超链接。这些特效可能增强了用户在网站上交互时的体验，使得网页更加动态和吸引人。jQuery...

    仿蘑菇街会员等级显示jQuery动画特效.zip

    本资源"仿蘑菇街会员等级显示jQuery动画特效.zip"提供了一种利用jQuery库实现的会员等级显示动画效果，旨在帮助开发者创建类似蘑菇街那样具有动态视觉吸引力的用户界面。 jQuery是一个轻量级、高性能的JavaScript库...

    超酷堆叠图片展开和折叠jquery动画特效.zip

    这是一款效果非常炫酷的堆叠图片展开和折叠jquery动画特效。该特效中，所有图片可以像扑克牌一样进行堆叠，在触发相应的事件之后，堆叠的图片会议动画的方式全屏展开，效果非常炫酷。 在页面底部，&lt;body&gt;标签...

    基于Animate.css的jQuery动画特效插件

    janimate是一款非常实用的基于Animate.css的jQuery动画特效插件。该动画特效插件允许你在jQuery代码中操纵Animate.css的66种动画效果。通过该插件可以简化Animate.css的使用，非常方便。

    古卷轴平滑打开jQuery动画特效

    这是一款使用jquery animate动画制作的古卷轴平滑打开动画特效。该特效通过将一张完整的卷轴拆分到多个div中，然后通过jquery animate事件，配合不同的时间延迟，形成完整的卷轴打开动画。

    jQuery动画特效实例教程

    ### jQuery动画特效实例教程知识点详解 #### jQuery动画特效基础 jQuery动画特效是利用jQuery库提供的方法对网页元素进行动态显示效果的编程技术。通过这些动画效果，开发者可以增强用户界面的交互性和视觉吸引力...

    jQuery垂直时间轴动画特效.zip

    《jQuery垂直时间轴动画特效详解》 在网页设计与开发中，动态效果的运用往往能够提升用户体验，使得信息展示更加生动有趣。今天我们将探讨一种基于jQuery实现的垂直时间轴动画特效，它以其绿色主题和渐进式显示特性...

    jQuery css3图标动画鼠标滑过图标旋转动画特效

    "jQuery css3图标动画鼠标滑过图标旋转动画特效"是一种常见的交互式设计技术，它结合了jQuery库的便捷性和CSS3的强大动画功能，为网页元素特别是图标按钮提供动态视觉效果。下面将详细介绍这个主题中的相关知识点。 ...

    4个简单实用的jQuery超链接动画特效

    在实现这些jQuery动画特效时，我们需要在HTML中设置好基础结构，包括链接和必要的容器元素。CSS文件用于定义元素的初始样式和动画效果，而JavaScript（jQuery）文件则负责添加交互逻辑。例如，`$(document).ready()`...

    仿蘑菇街会员等级显示jQuery动画特效特效代码

    【jQuery动画特效与会员等级显示】 在网页设计和开发中，吸引用户的注意力并提供良好的用户体验是至关重要的。"仿蘑菇街会员等级显示jQuery动画特效"是一个很好的例子，它利用了JavaScript库jQuery来实现动态的视觉...

    利用jquery动画特效和css打造的侧边弹出垂直导航

    这是一款利用jquery动画特效和css打造的侧边弹出垂直导航，整个弹出过程比较流畅，而且代码很简单，如果你正在寻找一款带动画的垂直导航，那么可以试试这个。下面是效果截图： HTML源码： 代码如下: &lt;title&gt;...

    【Jquery经典特效26】jQuery动画背景滑动切换效果

    【jQuery经典特效26】：jQuery动画背景滑动切换效果是一种常见的网页动态设计技术，它为网站增添视觉吸引力，使用户界面更具互动性。在网页设计中，背景滑动切换通常用于首页大图轮播、内容区背景变换等场景，为用户...

    jquery特效

    二、jQuery动画特效 1. **基本动画**：jQuery提供了如`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等方法，轻松实现元素的淡入淡出、滑动显示等效果。例如，`$("#element").fadeIn(1000)`会让指定元素在1秒内逐渐...

    jQuery心电图动画特效_心电图走势动画特效

    在本文中，我们将深入探讨如何使用jQuery来实现一个生动的心电图动画特效，这将涉及到JavaScript编程、CSS样式以及HTML结构。心电图动画特效在许多网页设计中被用来增加视觉吸引力，尤其适用于医疗健康、健身或科技...

    jQuery文字动画特效插件

    **jQuery文字动画特效插件详解** 在Web开发中，动态效果常常能提升用户体验，增加页面的吸引力。"jQuery文字动画特效插件"就是这样一款工具，它利用jQuery库的强大功能，结合animate.css，为网页中的文字元素添加...

    fallingsnow.js-jquery下雪动画特效.zip

    fallingsnow.js是一款小巧的jquery下雪动画特效插件。该jquery下雪动画特效兼容ie8浏览器，它会控制雪花的飘落速度，雪花的尺寸越小，下落的速度越慢，可以制作出雪花飞舞的视觉差效果。

Magicbox
Global site tag (gtag.js) - Google Analytics