十种常见的jquery特效上-有趣的事

十种常见的jquery特效上

2011-01-14 阅读 62

今天我本来和大家分享我的第七篇日——jquery事件。想想还是和大家带来一些jquery比较实用的特效吧！

在开始之前我们来看一下jquery是怎么工作的吧！

首先，你需要下载一个jQuery<版本，并将它插入到

标签内。如下图：

书写 jQuery 函数是一个非常简单的事）。关键是你要学习如何获取你想要实现的效果的确切元素。

$("#header")= 获取 id=”header” 的元素
$("h3")= 获取所有 ###
$("div#content .photo")= 获取里所有用class=”photo”定义的元素
$("ul li:first")= 只获取中第一个 -

特效1：（简单的下拉面板）

代码如下：

<pre class="brush:jscript;">    ＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜title＞Simple Slide Panel＜/title＞

＜script type="text/javascript" src="jquery.js"＞＜/script＞
/* jquery start */
＜script type="text/javascript"＞
$(document).ready(function(){

	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); return false;
	});
	
	 
});
＜/script＞
/* jquery end */

/* Css start */
＜style type="text/css"＞
body {
	margin: 0 auto;
	padding: 0;
	width: 570px;
	font: 75%/120% Arial, Helvetica, sans-serif;
}
a:focus {
	outline: none;
}
#panel {
	background: #754c24;
	height: 200px;
	display: none;
}
.slide {
	margin: 0;
	padding: 0;
	border-top: solid 4px #422410;
	background: url(images/btn-slide.gif) no-repeat center top;
}
.btn-slide {
	background: url(images/white-arrow.gif) no-repeat right -50px;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
.active {
	background-position: right 12px;
}
＜/style＞
/* Css end */
＜/head＞

＜body＞

＜div id="panel"＞
	＜!-- you can put content here --＞
＜/div＞

＜p class="slide"＞＜a href="#" class="btn-slide"＞Slide Panel＜/a＞＜/p＞

＜/body＞
＜/html＞

```
<p>
	对上面的例子做一个简单的解释，来帮助大家理解：当包含class=”btn-slide”的元素被点击时，它会下拉/上提</p>
<div id="”panel”">
	里的元素。然后切换到CSS中的class=”active”到<a>元素。.active 将会以CSS的方式打开/关闭出面板。</a>
	<p>
		特效1中用到的图：</p>
	<p>
		<img alt="" src="http://www.huilinwang.com/uploads/01-2011/1295014012.gif" style="width: 154px; height: 40px;">&nbsp;&nbsp; &nbsp;<img alt="" src="http://www.huilinwang.com/uploads/01-2011/1295014043.gif" style="width: 24px; height: 70px;"></p>
	<h4>
		<a>特效2（<span class="Apple-style-span" style="font-family: Arial,Helvetica,sans-serif;">连续过渡效果</span>）</a></h4>
	<p>
		<a>&nbsp;</a></p>
	<div>
		<a>代码如下：</a></div>
	<div>
		<pre class="brush:xml;">    		<a>	＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜title＞Chainable Transition Effects＜/title＞

＜script type="text/javascript" src="jquery.js" _cke_saved_src="jquery.js" _cke_saved_src="jquery.js" _cke_saved_src="jquery.js"＞＜/script＞
/* jquery start */
＜script type="text/javascript"＞
$(document).ready(function(){
	$(".run").click(function(){	
		$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
		.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
		.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
		.animate({top: "0"}, "fast")
		.slideUp()
		.slideDown("slow")
		return false;	
	});
});


＜/script＞
/* jquery end */
/* Css start */
＜style type="text/css"＞
body {
	margin: 20px auto;
	padding: 0;
	width: 580px;
	font: 80%/120% Arial, Helvetica, sans-serif;
}
a {
	font-weight: bold;
	color: #000000;
}
#box {
	background: #6699FF;
	height: 100px;
	width: 100px;
	position: relative;
}
＜/style＞
/* Css start */
＜/head＞

＜body＞
＜p＞
	＜a href="#" class="run"＞Run＜/a＞
＜/p＞
＜div id="box"＞
＜/div＞

＜/body＞
＜/html＞
</a>
```
	</pre></div>
	<div>
		<a> 对上面的例子做一个简单的解释，来帮助大家理解：当 </a><a> 被点击——&gt;激活 </a>
		<div id="”box”">
			<a>的不透明度（opacity）=0.1，直到值达到400px，速度达到1200px/ms——&gt;当opacity=0.4, top=160px,height=20,width=20,以”slow”显示——&gt;当opacity=1, left=0, height=100, width=100,也以”slow”显示——&gt;当opacity=1, left=0, height=100, width=100, 也以”slow”显示——&gt;当top=0, 以”fast”显示——&gt;然后，以常速上滑 (default speed = “normal”)——&gt;然后以”slow”下滑——&gt;返回失效会阻止浏览器跳向链接锚点。</a></div>
		<h4>
			<a>特效3：（隐藏效果）</a></h4>
		<p>
			<a>代码如下：</a></p>
		<pre class="brush:xml;">    		<a>＜!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞
＜html xmlns="http://www.w3.org/1999/xhtml"＞
＜head＞
＜meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /＞
＜title＞Disappear＜/title＞

＜script type="text/javascript" src="jquery.js" _cke_saved_src="jquery.js" _cke_saved_src="jquery.js" _cke_saved_src="jquery.js"＞＜/script＞

/* jquery start */
＜script type="text/javascript"＞
$(document).ready(function(){						   
	$(".pane .delete").click(function(){
		$(this).parents(".pane").animate({ opacity: 'hide' }, "slow");
	});
});
＜/script＞
/* jquery end */

/* Css start */
＜style type="text/css"＞
body {
	margin: 10px auto;
	width: 470px;
}
h3 {
	margin: 0;
	padding: 0 0 .3em;
}
p {
	margin: 0;
	padding: 0 0 .5em;
}
.pane {
	background: #edf5e1;
	padding: 10px 20px 10px;
	position: relative;
	border-top: solid 2px #c4df9b;
}
.pane .delete {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
＜/style＞
/* Css end */
＜/head＞

＜body＞
＜div class="pane"＞
	＜h3＞Sample heading＜/h3＞
	＜p＞Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.＜/p＞
	＜img src="images/btn-delete.gif" alt="delete" class="delete" /＞
＜/div＞
＜div class="pane"＞
	＜h3＞Sample heading＜/h3＞
	＜p＞Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.＜/p＞
	＜img src="images/btn-delete.gif" alt="delete" class="delete" /＞
＜/div＞
＜div class="pane"＞
	＜h3＞Sample heading＜/h3＞
	＜p＞Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.＜/p＞
	＜img src="images/btn-delete.gif" alt="delete" class="delete" /＞
＜/div＞
＜/body＞
＜/html＞
</a>
```
		<p>
			<a>对上面的例子做一个简单的解释，来帮助大家理解：<span class="Apple-style-span" style="font-family: Arial,Helvetica,sans-serif;">当被定义为 <img> 的图片被点击，它会手找到父级元素 </span></a></p>
		<div>
			<p>
				<a>并激活它，让父级元素慢慢消失，隐藏起来。</a></p>
			<p>
				特效3中用到的图：</p>
			<p>
				<img alt="" src="http://www.huilinwang.com/uploads/01-2011/1295014150.gif" style="width: 16px; height: 16px;"></p>
			<p>
				&nbsp;</p>
		</div>
	</pre></div>
</div>