jquery 动画特效

最新推荐文章于 2015-05-28 20:43:06 发布
最新推荐文章于 2015-05-28 20:43:06 发布
阅读量120 收藏
点赞数
分类专栏： jQuery 文章标签： jquery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_2903/article/details/82522432
版权 

<!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>
iteye_2903
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery动画特效实例教程
10-25
主要介绍了jQuery动画特效,详细叙述了jQuery动画特效的实现方法,非常实用,需要的朋友可以参考下
jQuery作业
qq_38914062的博客
07-19 473
层级关系的选择器要注意看清楚！！！
jQuery中的slideUp()、slideDown()、hide()、show()
热门推荐
jCuckoo的专栏
10-20 2万+
slideUp(speed,[callback])通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。slideDown(speed,[callback])通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果
jquery动画特效大全
05-22
文件里保函了几乎所有的jQuery能实现的动画和源码，可以说对前端开发有着非常大的帮助
jquery动画特效时间轴
07-07
jquery动画特效时间轴
4个很漂亮的鼠标滑过超链接jQuery动画特效
06-05
很漂亮的鼠标滑过超链接jQuery动画特效里面包含4种超酷效果，分别是胶囊跟随效果，双线跟随效果，下划线跟随效果和上划线跟随效果。
仿蘑菇街会员等级显示jQuery动画特效
06-11
一款使用了一个简单的jquery库，可以显示会员当前的等级和所需的积分升级的仿蘑菇街会员等级显示jQuery动画特效代码。
当文本框获得焦点时使输入区域变大
百威
10-27 945
很多人认为表单应该占据最小的空间，先不管这个观点是不是正确，今天我们就实现当用户进行输入时，即本文框获得焦点时，将文本框的大小进行改变。这样，用户就能看到自己前边输入的东西了。 思路非常简单，就是当文本框获得焦点时，改变文本框的宽度或者高度。如果你看过我前边关于jQuery对元素属性操作的总结，相信几分钟就可实现本篇中的功能。 [code="java"] [/code] 假设网...
jQuery实现带遮罩层的消息框滑入滑出效果
百威
10-27 412
[code="java"] .overlay{ background:transparent url(images/overlay.png) repeat top left; position:fixed; top:0px; bottom:0px; left:0px; right:0px;...
用jQuery解决IE不支持的option disable属性
百威
11-09 346
[size=medium] 在IE浏览器中，给select的options设置 disable属性 是没用的。 必须采用一定手段才可以解决这个问题。当然原理就是记住上次选中的 option。 this.selectedIndex 就派上用场了。 需要刷新下才可以看到效果，因为输出的都是文本，不存在js加载的情况。 [/size] [code="java"] ...
jquery控制页面
百威
07-21 258
[code="java"] each()方法 $(function(){ $("img").each(function(index){ this.title = "这是第" + index + "幅图，id是：" + this.id; }); }); [/code] [code="java"] ...
jquery 截取字符串的实现
百威
11-09 179
[code="java"] cookie *{ margin:0; padding:0;font-family:"宋体",Arial, Helvetica, sans-serif;} #best{ width:300px; height:200px; border:1px solid #ccc; margin:60px auto 0; line-hei...
JQuery 发送Json格式数据
百威
05-23 178
简述： 需要封装一组Json格式的数据到服务器 知识点： 1. 调用jquery.json的库 2. AJAX Post 请求 Jquery下载地址 http://jquery.com/download/ Jquery.json http://code.google.com/p/jquery-json/ [code="java"] ...
利用jQuery简单实现CheckBox全选效果
百威
05-28 167
[code="java"] 利用jQuery简单实现CheckBox全选效果 $(function () { $("#all").click(function () { var checked_status = this.checked; ...
jquery代码实例
百威
11-01 162
在文档加载完毕后将执行的方法(参见jquery文档) 一般来说文档加载的时候应该绑定所有的事件, 但是有一种情况例外. 比如 通过Ajax方法取回来的内容里面还含有动作按钮的，这时需要针对这部分功能执行绑定. [code="java"] //需要手动调用 load_event_monitor(element); 方法. $(function() { load_even...
开始学习jQuery
百威
04-07 147
转载：OneChen’s Blog 阅读了一些关于Jquery的基础知识。贴出来共享一下。网上优秀的文章很多。努力学习中~ 随着JavaScript的兴起，一系列JavaScript库也蓬勃发展起来。从早期的Prototype、Dojo到2006年的jQuery，再到2007年ExtJs。可以发现，互联网正在掀起一场JavaScript风暴。在这场风暴中，jQuery以其独特优雅的姿态，始...
基于jQuery 常用WEB控件收集
百威
04-09 138
原文地址： http://www.open-open.com/ajax/jQuery.htm Horizontal accordion: jQuery 基于jQuery开发，非常简单的水平方向折叠控件。 Horizontal accordion: jQuery jQuery-Horizontal Accordion 具有XBOX360 blade界...
jquery 获取父窗口的元素 父窗口 子窗口
百威
11-17 134
$("#父窗口元素ID",window.parent.document); 对应javascript版本为window.parent.document.getElementByIdx_x("父窗口元素ID")； 取父窗口的元素方法：$(selector, window.parent.document); 那么你取父窗口的父窗口的元素就可以用：$(selector, win...
jquery使用例子---使用filter、each拾取
百威
04-10 134
[code="java"] New Document 　 　 　 　 　 　 　 　 　 /** * 获得可见的表格的行集合 * @param {Object} tableID */ function udf_getVisualableR...
html5卷轴展开动画,古卷轴平滑打开jQuery动画特效
最新发布
06-08
其次，古卷轴平滑打开jQuery动画特效可以使用jQuery的动画效果来实现。你可以将卷轴的内容放在一个div中，然后使用jQuery的animate方法，逐步将div的高度从0变为其内容的高度，并且添加一个rotateX的属性，使其像...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值