邪罗刹的菠萝阁 » jquery http://www.rainmoe.com One code, one world ... Thu, 29 Dec 2011 14:04:21 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 如何使用jQuery载入Gravatar的头像 http://www.rainmoe.com/2010/09/02/gravatar-jquery-load-method/ http://www.rainmoe.com/2010/09/02/gravatar-jquery-load-method/#comments Wed, 01 Sep 2010 21:27:25 +0000 小邪 http://www.evlos.org/?p=2019 此文送给强力的 Zww 童鞋，祝愿他变得更加强力哈，^O^。主要是如何用 jQuery 载入 Gravatar 头像。 > 不过因为突然发现 JavaScript 木有自带 md5 函数，所以不得不载入某牛人的第三方代码库来搞定它。 阅读全文——共1036字]]> > 此文送给强力的 Zww 童鞋，祝愿他变得更加强力哈，^O^。主要是如何用 jQuery 载入 Gravatar 头像。
> 不过因为突然发现 JavaScript 木有自带 md5 函数，所以不得不载入某牛人的第三方代码库来搞定它。

一. 演示地址：

> o(*￣▽￣*)ゞ 强力滴传送门 - http://www.evlos.org/apps/demo/jquery_001

二. 代码解释：

jQuery(document).ready(function($){
	$('#box .submit').click(function(){
		$('#box .ava').html('<img src="http://gravatar.com/avatar/'+hex_md5($('#box .mail').attr('value'))+'?s=180&r=G" />');
	}); //hex_md5函数可以把mail地址转换为md5形态
//s=180 (s参数表示头像的尺寸，单位是像素)
//r=G (r参数表示头像的显示等级，G表示通用等级)
//d=Xxx (d参数为默认头像地址，可以舍弃)
});

三. 源代码下载：

> Md5.js - http://code.google.com/p/evlosbox/downloads/detail?name=md5.js&can=2&q=
> Jquery-1.4.2.min.js - http://code.google.com/p/evlosbox/downloads/detail?name=jquery-1.4.2.min.js

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Ajax Gravatar Demo V1</title>
	<style type="text/css">
		#box {
			margin:30px;
		}
		#box .submit {
			color: #aaa;
		}
		#box .submit:hover {
			color:blue;
			cursor:pointer;
		}
	</style>
	<!-- 注意$的兼容性，如果发生冲突，请自行改成jQuery -->
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="md5.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function($){
			$('#box .submit').click(function(){
				$('#box .ava').html('<img src="http://gravatar.com/avatar/'+hex_md5($('#box .mail').attr('value'))+'?s=180&r=G" />');
			});
		});
	</script>
</head>
<body>
	<div id="box">
		<p><input class="mail" value="4tyle8@gmail.com" /> || <span class="submit">点击这里获取头像</span>（可自行用blur() 方法或其他方法替换）</p>
		<p>头像：</p>
		<p class="ava"></p>
	</div>
</body>
</html>

四. 随记：

> 已经顺利到荷兰鸟，前几天小邪一直在弄新房子，还有身份证和银行卡地址也要变更，花了好多时间。
> 然后到学校处理完事物。今天终于回来鸟，装死期结束，正常的代码人生开始继续咯。

]]> http://www.rainmoe.com/2010/09/02/gravatar-jquery-load-method/feed/ 128 jQuery多项投票演示与局部刷新预习 http://www.rainmoe.com/2010/07/26/jquery-more-votes/ http://www.rainmoe.com/2010/07/26/jquery-more-votes/#comments Sun, 25 Jul 2010 22:01:40 +0000 小邪 http://www.evlos.org/?p=1975 请注意_(￣0￣)_喔，这个程序只为演示 AJAX，并非正式程序，所以木有做任何严格的重复投票防护。 > 此文主要介绍如何实现多项投票的方法，以及灰常简单的 jQuery 局部刷新的应用方法，o( ∩ω∩ )m。 阅读全文——共757字]]> > 请注意_(￣0￣)_喔，这个程序只为演示 AJAX，并非正式程序，所以木有做任何严格的重复投票防护。
> 此文主要介绍如何实现多项投票的方法，以及灰常简单的 jQuery 局部刷新的应用方法，o( ∩ω∩ )m。

一. jQuery多项投票演示：

> 这次小邪木有做什么防护，只要刷新页面就可以再次投票，因为此程序的目的只是演示 jQuery 效果。
> 所以，嘎嘎嘎，如果你想要抒发自己强烈的思想感情，然后情不自禁地刷新页面鸟，就随便投票吧。

> 强力的纯洁的无知的传送门 - http://www.evlos.org/apps/demo/ajax_005

二. jQuery多项投票重点代码注释：

//这里小邪只是把和原先那次有明显区别，并且作用较大的代码贴出来作一些说明
//如果有更多疑问，请查看原先的文章，如果还觉得迷糊，请留言询问即可 O(∩_∩)O

function getdata() {
	global $dbfile;
	$data = file_get_contents($dbfile);
	$array = explode('|',$data); //把数据以 | 为分隔，分割到数组
	return $array;
}
//在 index.php 使用这个函数的来只是读取投票数据 ”0|0|0|0|0|0|0|0|0“

function showlist() {
	global $votenum,$votes;
	$data = getdata();
	function is_odd($num){ //判断偶数的较另类的方法
		return (is_numeric($num)&($num&1));
	}
	//额，实际上后来小邪并木有使用判断结果，因为觉得没必要以颜色分行
	for ($i=0;$i<$votenum;$i++) {
		if (is_odd($i)) { $trclass = 'odd'; } else { $trclass = 'even'; }
		echo '<tr id="vote_'.($i+1).'" class="'.$trclass.'"><td class="gray">#'.($i+1).'</td><td>'.$votes[$i].'</td><td class="gray">已有 <span class="count vote_'.($i+1).'">'.$data[$i].'</span> 票</td><td class="gray warn">已投票</td><td class="gray button">[投票]</td></tr>'."\n";
		//这里给每一行的数据附一个 id，内容为 ”vote_投票编号“
		//我们靠 class="count" 来找到投票数，靠 warn 和 button 来变换投票前后显示文字
	}
}
//在 index.php 使用这个函数来输出投票列表

$votenum = count($votes);
//在 config.php 里面的这个语句用来统计数组包含的数量

$ivote = $_POST['ivote'];
for ($i=1;$i<=$votenum;$i++) {
	if ($ivote=='vote_'.$i) {
		$res = $i;
	}
}
//在 vote.php 使用这个循环来判断用户所投的票，Post来的数据为 vote_1 vote_2 等

$(document).ready(function(){
	$("#vote .button").click( //先找到按键元素，即 ”投票“ 文字处
		function() {
			var votesorder = $(this).parent().attr("id"); //取父元素的 id 来判断当前所投何票
			var count=eval($("#vote ."+votesorder).text())+1; //然后对其票数加一
			$("#vote ."+votesorder).css("color","green").text(count); //显示加一后的票数并变色
			$("#vote .button").css("display","none"); //隐藏 ”投票"
			$("#vote .warn").css("display","inline"); //显示 “已投票”
			$.ajax({
				type:'POST',
				dataType:'text',
				url:'vote.php',
				data:'ivote='+votesorder
			});
			//Post发送数据，类型 text，送给 vote.php，内容为父元素的 id
			/* $.cookie('vote_s81jaj881jja', 'yes', { expires: 3 }); */
			//不打算做 cookie 防护了
		}
	);
});

三. 局部刷新预习：

$(document).ready(function(){
	$("#box .button").click(
		function() {
			data=$.ajax({url:"time.php",async:false});
			/* async表示禁止异步请求，因为我们接下来就要使用返回的数据 */
			$("#box .target").html(data.responseText);
		}
	);
});

> 简单的当前秒数局部刷新演示地址 - http://www.evlos.org/apps/demo/ajax_006

四. 演示程序下载：

> 首先是前面的 jQuery 多项投票演示程序的下载地址，后面则是 jQuery 预习演示程序的下载地址，哈。

> http://code.google.com/p/evlosbox/downloads/detail?name=jquery-more-votes-example-v1.zip
> http://code.google.com/p/evlosbox/downloads/detail?name=jq-areafresh-easy-v1.zip

五. 附言：

> 虽然小邪已经在代码中注释说这个程序木有做严格防护，但是仍然很感谢报告 BUG 的盆友，嘿嘿 ;D。

]]> http://www.rainmoe.com/2010/07/26/jquery-more-votes/feed/ 72 jQuery制作AJAX的POST方式支持按键 http://www.rainmoe.com/2010/07/25/up-button-for-jquery/ http://www.rainmoe.com/2010/07/25/up-button-for-jquery/#comments Sun, 25 Jul 2010 01:21:17 +0000 小邪 http://www.evlos.org/?p=1974 嘿嘿，这篇文章是 jQuery AJAX 的提高教程之简单部分，小邪制作了一个 “支持一下” 的按键作为演示。 > 因为是简单的演示，所以只是 POST 了数据，并木有获取任何返回数据，变动部分只是 jQuery 效果。 阅读全文——共2128字]]> > 嘿嘿，这篇文章是 jQuery AJAX 的提高教程之简单部分，小邪制作了一个 “支持一下” 的按键作为演示。
> 因为是简单的演示，所以只是 POST 了数据，并木有获取任何返回数据，变动部分只是 jQuery 效果。

一. 演示地址：

> 如上图所示，当你点击 “我也支持！” 文字之后，就会使用 POST 方式发送数据给 vote.php 文件来处理。
> 之后，票数也会自动加一，不过这不是返回数据，只是显示效果上面做了些小动作，因为要求较简单。

> Ajax 支持按键演示的强力的宇宙最放荡的传送门 - http://www.evlos.org/apps/demo/ajax_003

> 当然咯，o(*≧▽≦)ツ 你如果觉得小邪特别坏的话，就去这里狂点吧，嘎嘎，这里木有做重复投票限制喔。
> 特纯洁无知的传送门 - http://www.evlos.org/apps/demo/ajax_004

二. 程序代码及注释：

<?php
//此文件是 index.php
include 'config.php'; //包含 config.php 文件，提供 $dbfile 储存文本数据库文件名
$count = file_get_contents($dbfile); //读取文本数据库
if ($_COOKIE['vote_s81jaj881jja']=='yes') { $upclass = '<span class="hid">[您已经投过票了！]<span>'; }
else { $upclass = '<span class="button">[我也支持！]<span>'; }
//仅仅根据 cookie 来防止重复投票，因为根据 ip 以及 Email 之类的资料来防护的方法较为复杂
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax 支持按键演示</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="javascript" src="jq.js"></script>
<script language="javascript" src="cookie.js"></script>
<script language="javascript" src="main.js"></script>
</head>
<body>
<div id="box">
	<p class="title">投票测试：</p>
	<ul>
		<li>小邪是坏淫 <span class="hid">[有 <span class="num"><?php echo $count; ?></span> 票表示支持]</span> <?php echo $upclass; ?></li>
	</ul>
</div>
</body>
</html>

<?php
//此文件是 config.php
$dbfile = 't81oa.txt';
//Setting 文本数据库文件名
if (!file_exists($dbfile)) {
	$handle = fopen($dbfile,'w+');
	fwrite($handle,'0');
	fclose($handle);
}
//Check database 如果找不到此文件，就新建一个，写入数字0
?>

<?php
//此文件是 vote.php
include 'config.php';
if (isset($_POST['ivote'])) { //如果有 POST 发送来变量 ivote
	$ivote = $_POST['ivote'];
	if ($ivote == 'yes') { //并且 ivote 的值为 yes
		$count = file_get_contents($dbfile); //就读取文本数据库里面的投票数
		$count++; //投票数加一
		$handle = fopen($dbfile,'w+');
		fwrite($handle,$count);
		fclose($handle);
		//然后写入新的投票数
	}
}
?>

/* 此文件是 main.js */
$(document).ready(function(){
	$("#box .button").click( /* 如果点击了 “我也支持！” 按键 */
		function() {
			var count=eval($("#box .num").text())+1; /* 就获取显示出来的投票数并加一 */
			$("#box .num").css("color","green").text(count); /* 显示新的投票数 */
			$(this).css("display","none"); /* 隐藏 “我也支持！” 按键 */
			$.ajax({
				type:'POST',
				dataType:'text',
				url:'vote.php',
				data:'ivote=yes'
			}); /* AJAX 方式发送数据 */
			$.cookie('vote_s81jaj881jja', 'yes', { expires: 3 }); /* 新建cookie表示已投票 */
		}
	);
	/* For stupid IE */
	$(".button").hover( /* 鼠标悬停在 “我也支持！” 按键上面就变色 */
		function() {
			$(this).css("color","blue");
		},
		function() {
			$(this).css("color","#ccc");
		}
	);
});

/* 此文件是 style.css */
#box .title { color:red; }
#box .hid { color:#ccc; }
#box .button { color:#ccc; cursor:pointer; }

13 //此文件是 t81oa.txt，即数据库文件，存储投票数

//文件名是 cookie.js，这是一个 jQuery 插件，程序代码较长就不贴出来了，下面是使用方法介绍
$.cookie('the_cookie'); //读取Cookie值
$.cookie('the_cookie', 'the_value'); //设置cookie的值
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一个cookie 包括有效期 路径 域名等
$.cookie('the_cookie', 'the_value'); //新建cookie
$.cookie('the_cookie', null); //删除一个cookie

三. 演示程序下载：

> http://code.google.com/p/evlosbox/downloads/detail?name=ajax-simple-vote-v1.zip&can=2&q=

四. 附言：

> 小邪在上面贴出来的程序代码中已经做了相当详细的注释，所以也就不另外做特别的讲解鸟 ╮(╯▽╰)╭。
> 有问题请在留言中提问，下次的提高教程会提供灰常劲爆的演示程序，挺不住鸟，睡觉去 (～﹃～)。

]]> http://www.rainmoe.com/2010/07/25/up-button-for-jquery/feed/ 34 如何用强大的jQuery来进行Ajax操作 http://www.rainmoe.com/2010/07/23/ajax-and-jquery/ http://www.rainmoe.com/2010/07/23/ajax-and-jquery/#comments Thu, 22 Jul 2010 23:56:07 +0000 小邪 http://www.evlos.org/?p=1973 此文为以后的 AJAX 文章作为铺垫，并不深入。举例介绍 Load 函数与页面载入完成后执行的方法。 > 然后提供了最新的 jQuery 库在各个 CDN 的托管地址，最后是 Low-Level-Ajax 方法的简单介绍。 阅读全文——共2022字]]> > 此文为以后的 AJAX 文章作为铺垫，并不深入。举例介绍 Load 函数与页面载入完成后执行的方法。
> 然后提供了最新的 jQuery 库在各个 CDN 的托管地址，最后是 Low-Level-Ajax 方法的简单介绍。

一. jQuery 的准备工作：

> 首选的当然是谷歌的CDN，谷歌服务器的强大是毫无疑问的，嘿嘿，而且速度也不差，毕竟是CDN呢。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

> 当然啰，如果碰巧有微软控，那就加上这个吧 ╮(╯▽╰)╭。同时表示，童鞋，你木有的救了，信春哥吧。

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>

> 官网代码库，也有不少人载入呢，好像某次把官网服务器拖垮过，不过后来他们换了更强的服务器。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

二. 页面载入完成才执行：

> jQuery 代码一般都写在这里面，这里面的代码是在页面载入完整之后才运行的，这样才正常嘛。
> 不然如果载入木有完成就要操作元素，那你叫 jquery 到哪里去找 ╮(╯▽╰)╭，估计它会疯掉，嘎嘎。

> 不过一定要注意自己的页面是否能够在用户能够容忍的时间内载入，否则你碰到的杯具就大了 (╯o╰)。

$(document).ready(function(){
//代码，这里需要强大的代码，哇卡卡卡卡卡
});

三. Ajax - jQuery 的 Load 函数：

> jQuery 的 load 函数是一种简单的但是灰常强大的 AJAX 函数。它的语法如下 -

$(selector).load(url,data,callback);

> 下面是一个例子，首先是事件触发，触发的条件则是点击 ID 为 loadstart 的元素，这里是个按键。
> 然后将 ID 为 cont 的元素其中的内容替换为 test.txt 文件里面的内容。嘿嘿，JQ 就是简单。

$(document).ready(function(){
	$("#loadstart").click(function(){
		$('#cont').load('test.txt');
	});
});

> 演示传送门 - http://www.evlos.org/apps/demo/ajax_002/
> 当然啰，这个是 Test.txt 文件的地址 - http://www.evlos.org/apps/demo/ajax_002/test.txt

四. Low Level Ajax 方法：

> 嘿嘿，先简单介绍一下，文章太长不好。如果想要详细实例与解说，请听下回分解 o(*￣▽￣*)ゞ。

$(selector).load(url,data,callback)	//把远程数据加载到被选的元素中
$.ajax(options)	//把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type)	//使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type)	//使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback)	//使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback)	//加载并执行远程的 JavaScript 文件

(selector) //jQuery 元素选择器语法
(url) //被加载的数据的 URL（地址）
(data) //发送到服务器的数据的键/值对象
(callback) //当数据被加载时，所执行的函数
(type) //被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) //完整 AJAX 请求的所有键/值对选项

五. 附言：

> @lucifierya: 啧啧 围观菊花 @rericy: 于是怎样!!! @lucifierya: @rericy 你这个头像 。。。
> 嘿嘿，又是推上的事儿。睡觉前看到的，话说这可怜的家伙，╮(╯▽╰)╭。头像硬是给人当成菊花了。

]]> http://www.rainmoe.com/2010/07/23/ajax-and-jquery/feed/ 48 使用jQuery添加图片载入提示 http://www.rainmoe.com/2009/12/27/images-loading/ http://www.rainmoe.com/2009/12/27/images-loading/#comments Sun, 27 Dec 2009 04:18:43 +0000 小邪 http://www.evlos.org/?p=1854 因为不可抗拒的因素，小邪昨天下午和今天上午都在离地球上最近的电脑有11公里的地方。 > 终于，在春哥的保佑之下，小邪终于在今天下午回到了我可爱的电脑面前。 阅读全文——共1855字]]> > 因为不可抗拒的因素，小邪昨天下午和今天上午都在离地球上最近的电脑有11公里的地方。
> 终于，在春哥的保佑之下，小邪终于在今天下午回到了我可爱的电脑面前。

> 呵呵，这篇文章讲的东西灰常简单，因为昨天没法一日一博，只好今天早晚各一篇。
> 以弥补各位看官受伤的心灵，小邪可是很善良的喔 (*^__^*) ，哇卡卡卡卡 O(∩_∩)O。

1. 图片载入提示 Demo 传送门：

> 小邪已经使用 Opera Safari Firefox Chrome IE6 测试过图片载入提示的代码了。
> 现在浏览器缓存机制十分强大，所以如果想多次浏览，请使用 Ctrl+F5 无缓存刷新。
> 额，这个快捷键在 FF 里是可以用的，其他浏览器小邪就不清楚咯。

> http://www.evlos.org/apps/demo/images_loading

2. 当然要先载入 jQuery 库：

> 呵呵，这是为新来的童鞋提供的步骤，老童鞋就请直接跳过咯。
> 貌似原来的 lastest.js 不见了，可能太多人载入这个文件，官方服务器挺不住。
> 所以这个还是在 Google 服务器上托管的 JS 文件，请放心使用 O(∩_∩)O。

<script type="text/javascript"
src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

3. 然后载入图片Loading提示的 jQuery 插件：

<script type="text/javascript">
(function($){
jQuery.fn.LoadImage=function(settings){
settings = jQuery.extend({ scaling : true,
width : 500,height : 500,loadpic:"" }, settings);
return this.each(function() {
$.fn.LoadImage.Showimg( $( this ), settings );
});};
$.fn.LoadImage.Showimg = function($this, settings){
var src=$this.attr("src");
var img=new Image();
img.src=src;
var autoScaling=function(){
if (settings.scaling) {
if (img.width > 0 && img.height > 0) {
if (img.width / img.height >= settings.width / settings.height) {
if (img.width > settings.width) {
$this.width(settings.width);
$this.height((img.height * settings.width) / img.width);
}else {
$this.width(img.width);
$this.height(img.height);
}}else {
if (img.height > settings.height) {
$this.height(settings.height);
$this.width((img.width * settings.height) / img.height);
}else {
$this.width(img.width);
$this.height(img.height);
}}}}}
$this.attr("src","");
var loading=$("<img alt=\"加载中...\" title=\"图片加载中...\" src=\""
+settings.loadpic+"\" />");
$this.hide();
$this.after(loading);
$(img).load(function(){
autoScaling();
loading.remove();
$this.attr("src",this.src);
$this.show();
});}})(jQuery);
</script>

4. 设置此 jQuery 插件的参数：

> Loadpic 是设置提示图片的路径，宽度高度就不用管它了。
> 这个宽度高度是图片最大高和图片最大宽，按比例缩放的，不过我们用不到。

<script type="text/javascript">
$(function(){
	$("img").LoadImage({scaling : true,
			width : 3000,
			height : 3000,
			loadpic:"imgload.gif"});
});
</script>
]]> http://www.rainmoe.com/2009/12/27/images-loading/feed/ 53 几个比较经典的jQuery小技巧 http://www.rainmoe.com/2009/12/16/some-classic-jquery-tricks/ http://www.rainmoe.com/2009/12/16/some-classic-jquery-tricks/#comments Wed, 16 Dec 2009 08:16:30 +0000 小邪 http://www.evlos.org/?p=1671 ╮(╯▽╰)╭，上一篇文章有点杯具，有点乱，小邪心情不大好，所以请大家体谅下咯。 > 现在讲一下几个比较经典，而且比较常用的 jQuery 技巧，相信你能举一反三。 阅读全文——共2553字]]> > ╮(╯▽╰)╭，上一篇文章有点杯具，有点乱，小邪心情不大好，所以请大家体谅下咯。
> 现在讲一下几个比较经典，而且比较常用的 jQuery 技巧，相信你能举一反三。

> 唔，这个主题挂的时间也够长的了，也该换换了，到时候找找看有没有合胃口的主题。
> 话说，最近有点偏向 PHP 去了，我发现贪多嚼不烂，所以就又回到主题咯，(*^__^*) 嘻嘻。

1. Jquery 库的调用：

> 呵呵，相信很多童鞋早就会了，不过还是得提一下，忘记就杯具咯。
> 第一个是常用的 Google 托管处的 jQuery 库地址。
> 而第二个则是 jQuery 官方网站的库地址，随时获取最新版，嘿嘿。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
type="text/javascript"></script>

<script src="http://code.jquery.com/jquery-latest.js"></script>

2. Load() 函数：

> 这个也是很不错的喔，很多地方都可以用上。
> 比如想在某些图片没有载入之前加个提示之类的。
> 或者对页面载入过程最后一个元素使用，则可以提供整页面的载入提示。

> 下面只是一个简单的例子，选择器选择的是 Img 标签。
> 然后搜索属性，只是属性类型为 Src 即图片地址，后面则是图片地址的内容。
> 在图片载入完成之后则会弹出一个提示框表示图片已经载好。
> 注意！！请一定要填入与目标元素内填的完全相同的 Src，否则会杯具的。

<script>
jQuery(document).ready(function($){
    $('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg')
		.load(function() {
     alert('Image Loaded');
    });
});
</script>

> 演示页面传送门：http://www.evlos.org/apps/demo/jquery_load

3. 简单的垂直居中：

> 这里使用的是 Height() 函数，选择器里的 document 表示整个页面。
> 下面查找的是 Class 为 Move 的元素，It_height 定义为元素高度。
> 然后将变量 Global_height 定义为整个页面的高度，即页顶至页底的距离。
> 然后将此元素的至顶部的距离调整为整个页面的高度的一半即可。

> 呵呵，相信有兴趣的童鞋已经可以举一反三咯。
> jQuery 对 CSS 进行调整的能力是灰常强大的 O(∩_∩)O。

<script>
jQuery(document).ready(function($){
	var global_height = $(document).height();
	var it_height = $('.move').height();
	$('.move').css({'position' : 'absolute' , 'top' :
		global_height/2 - it_height/2});
});

> 演示页面传送门：http://www.evlos.org/apps/demo/jquery_height

4. jQuery 与 Onclick 事件结合：

<div onclick="var global_height = $(document).height();
	var it_height = $('.move').height();
	$('.move').css({'position' : 'absolute' , 'top' :
	global_height/2 - it_height/2});">Move It !</div>

> 把上面的代码放到这里来，则鼠标点击此 DIV 之后执行代码。

5. ReplaceWith 函数：

> 下面的代码是寻找 Class 为 Demo 的元素，然后将其整个替换掉。
> 整个的意思，是包含了前后的标签的，所以替换函数内别忘记写标签喔。

<script>
jQuery(document).ready(function($){
	$('.demo').replaceWith('<div style="padding-top:30px">Replaced !</div>');
});
</script>

> 演示页面传送门：http://www.evlos.org/apps/demo/jquery_replace

6. Load() 函数的运用（页面载入提示）：

> 首先写好 CSS，绝对定位到页面右上角。

#loading {
	position:absolute;	z-index:900;text-align:center;
	background-color:#eef2fa;border:1px solid #d8e3e8;
	color:#000;font-size:12px;padding:3px;width:80px;
	right:0;top:0;
}

> 然后用 jQuery 然后在所有图片载入完成之后，隐藏 Loading DIV。
> 别忘记载入 jQuery 库哈，刚才测试代码的时候地址写错了，差点疯掉。

<script>
jQuery(document).ready(function($){
    $('img').load(function(){
		$('#loading').css("display","none");
    });
});
</script>

> 随便某处插入一个 DIV 即可，O(∩_∩)O 哈哈。

<div id="loading">Loading ...</div>

> 演示页面传送门：http://www.evlos.org/apps/demo/jquery_loading

7. 欢迎来 Follow 我的 Twitter @AngelSolo

]]> http://www.rainmoe.com/2009/12/16/some-classic-jquery-tricks/feed/ 60 各种各样的jQueryCSS下拉菜单 http://www.rainmoe.com/2009/12/12/make-a-pull-down-menu-for-child-pages-by-jquery/ http://www.rainmoe.com/2009/12/12/make-a-pull-down-menu-for-child-pages-by-jquery/#comments Sat, 12 Dec 2009 08:10:10 +0000 小邪 http://www.evlos.org/?p=1513 呵呵 O(∩_∩)O，小邪最近在玩鼠标事件来着，所以介绍一些不同的 CSS 和 jQuery 下拉菜单。 > 话说 jQuery 的效果真的很酷，很让人喜欢。期待 CSS 的动画模块早日被主流浏览器支持。 阅读全文——共2229字]]> > 呵呵 O(∩_∩)O，小邪最近在玩鼠标事件来着，所以介绍一些不同的 CSS 和 jQuery 下拉菜单。
> 话说 jQuery 的效果真的很酷，很让人喜欢。期待 CSS 的动画模块早日被主流浏览器支持。

> 平滑移动是很舒服的效果，但移动需要时间，若需要频繁使用下拉菜单，也许不是最好的选择。
> P.s. 最近想做的事情好多喔，想学 PHP、AJAX，还想学 jQuery。杯具的是时间不够 ╮(╯▽╰)╭。

1. CSS Visibility 属性：

> 这个属性在下面的普通 CSS 下拉菜单里有用到，所以先了解一下。

2. 普通的 CSS 下拉菜单：

> 一般的 CSS 下拉菜单是灰常简单的，只是用了 Hover 伪类而已。
> 此伪类的作用是，当鼠标悬浮在元素上方时，向元素添加样式，移开就移除样式。
> 呵呵，代码我就不贴了，需要的都在这个页面里面，查看源代码就好。
> 话说，这个纯 CSS 下拉菜单就不要使用 IE6 浏览器了，不然会很杯具的。

> Demo 传送门 - Http://tool.evlos.org/demo/css_simple_menu

3. 普通的 JS 下拉菜单：

> 呵呵，其实这里只是比上面多了下面的一行 CSS 和 JavaScript 代码。让 IE6 不那么杯具而已。

#menu li.jshover ul { left:auto; }

<script type=text/javascript>
<!--
function menuFix() {
    var sfEls = document.getElementById("menu").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
        this.className+=(this.className.length>0? " ": "") + "jshover";
        }
        sfEls[i].onMouseDown=function() {
        this.className+=(this.className.length>0? " ": "") + "jshover";
        }
        sfEls[i].onMouseUp=function() {
        this.className+=(this.className.length>0? " ": "") + "jshover";
        }
        sfEls[i].onmouseout=function() {
        this.className=this.className.replace(new RegExp("( ?|^)jshover\\b"),
"");
        }
    }
}
window.onload=menuFix;
//-->
</script>

> Demo 传送门 - Http://tool.evlos.org/demo/js_simple_menu

4. jQuery 淡入淡出下拉菜单：

> 注意！！jQuery 的动画效果中效果名称的大小写灰常重要，错误则会导致效果无效。
> 注意！！如果出现非 IE8 浏览器出现不居中的位移，请加入这个属性 -Webkit-padding-start:0px。
> 好吧，这次在 IE6 里面虽然没有那么杯具，但是淡入淡出效果还是蛮杯具的。

<script type="text/javascript">
	$(document).ready(function() {
		$('#menu ul').addClass('children');
		var f1 = function() {
			$(this).children('ul').fadeIn();
		};
		var f2 = function() {
			$(this).children('ul').fadeOut();
		};
		$('#menu li').hover(f1, f2);
	});
</script>

> Demo 传送门 - Http://tool.evlos.org/demo/jquery_fade_menu

5. jQuery 无限级下拉菜单：

> 灰常方便的无限级下拉菜单，有淡入淡出的效果，虽然淡入淡出在 IE6 里是杯具的。
> 顺便在有子菜单的父菜单右边加了一条 3px 的边表示它还有下级。

<script type="text/javascript">
	$(document).ready(function() {
		$('#menu ul').addClass('children');
		$('#menu .children').prev('a').addClass('notice');
		var f1 = function() {
			$(this).children('ul').fadeIn();
		};
		var f2 = function() {
			$(this).children('ul').fadeOut();
		};
		$('#menu li').hover(f1, f2);
	});
</script>

> 不过可以去除淡入淡出，改为出现和消失，就没有问题啦 O(∩_∩)O，嘿嘿。

<script type="text/javascript">
	$(document).ready(function() {
		$('#menu ul').addClass('children');
		$('#menu .children').prev('a').addClass('notice');
		var f1 = function() {
			$(this).children('ul').show();
		};
		var f2 = function() {
			$(this).children('ul').hide();
		};
		$('#menu li').hover(f1, f2);
	});
</script>

> Demo 传送门 - Http://tool.evlos.org/demo/unlimited_menu

6. 四种下拉菜单打包下载（Update）（jQuery 库的为 Google 托管地址）：

> http://code.google.com/p/evlosbox/downloads/detail?name=menu_demo.rar

7. 蛋疼着给几个理论整合了一下：

> 传说派：哥只是个传说，表迷恋哥。
> 寂寞派：哥吃的不是饭，是寂寞。
> 杯具派：杯具啊！

> 整合版：（- _ -）哥不只是个传说，哥还是个带杯具的寂寞 ~！

8. 欢迎来 Follow 我的 Twitter @AngelSolo 。

]]> http://www.rainmoe.com/2009/12/12/make-a-pull-down-menu-for-child-pages-by-jquery/feed/ 56 jQuery点击链接文字后替换文字 http://www.rainmoe.com/2009/12/04/click-the-link-that-use-jquery-replace-link-text-to-another/ http://www.rainmoe.com/2009/12/04/click-the-link-that-use-jquery-replace-link-text-to-another/#comments Fri, 04 Dec 2009 05:34:11 +0000 小邪 http://www.evlos.org/?p=1355 小邪今天把博客文章标题加上了 jQuery 点击文字替换效果，有兴趣可以返回文章列表点点看。 > 呵呵，实际上灰常简单的，就只需要一个 Click 事件，然后修改 Text 为载入中就好了。 阅读全文——共1324字]]> > 小邪今天把博客文章标题加上了 jQuery 点击文字替换效果，有兴趣可以返回文章列表点点看。
> 呵呵，实际上灰常简单的，就只需要一个 Click 事件，然后修改 Text 为载入中就好了。

> jQuery 查找元素的语法跟 CSS 中是一样的，比如我的文章标题就是 .post .title h2 a 。
> O(∩_∩)O 然后我打算把博客上所有的链接都加上自动替换的效果，嘿嘿嘿嘿，那样子就太壮观啦。

1. 首先载入 jQuery 库（谷歌提供的托管地址）：

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js">
</script>

2. 然后添加点击后替换文字效果的JS代码：

<script type="text/javascript">
jQuery(document).ready(function($){ 

$('a').click(function(){
	$(this).text('载入中 ...');
	});

});
</script>

> 呵呵，相信你看出了我说话的漏洞了，我并没有说替换后还会变回来。
> 所以在对带 Target="_blank" 的打开新窗口的链接使用此效果之后，新的窗口打开。
> 而旧的窗口还在那里，同时里面的链接文字就一直保持在 “载入中 ...” 的字样，那样就杯具了。

3. 进阶使用点击后替换文字效果的JS代码：

> 那么下面要实现的就是在 1.8 秒钟以后自动将链接文字替换回来。
> 一般网页的载入时间是 1.3 秒钟，然后假设新窗口打开之后立即切换回来，就总共算 1.8 秒。

<script type="text/javascript">
jQuery(document).ready(function($){ 

$('a').click(function(){
	myloadoriginal = this.text;
	$(this).text('载入中 ...');
	var myload = this;
	setTimeout(function() { $(myload).text(myloadoriginal); }, 1800);
});

});
</script>

4. 关于 jQuery 选择器的简单解说：

> 如果觉得麻烦直接就直接使用我的进阶方法吧，这个是对整个站点的所有链接实现的。
> 然后就可以完美地实现 jQuery 人性化的加载提示功能，祝你好运 O(∩_∩)O。

> 其实 jQuery 的元素选择器跟 CSS 几乎一致，层层递进比较容易理解。
> .post .title h2 a 是选择我的模板的文章标题，具体的请根据实际情况指定。

5. 自行下载 jQuery 库：

> 传送门：http://code.google.com/p/jqueryjs/downloads/list
> 然后上传到自己的站点，并将以下代码上的地址修改我你站点上文件的路径。

<script type="text/javascript" src="jQuery库的地址"></script>

6. 欢迎来 Follow 我的 Twitter @AngelSolo 。

]]> http://www.rainmoe.com/2009/12/04/click-the-link-that-use-jquery-replace-link-text-to-another/feed/ 86 jQuery悬停元素弹动与内联元素 http://www.rainmoe.com/2009/12/02/jquery-mouseover-effect-to-make-elements-moving/ http://www.rainmoe.com/2009/12/02/jquery-mouseover-effect-to-make-elements-moving/#comments Tue, 01 Dec 2009 16:23:40 +0000 小邪 http://www.evlos.org/?p=1246 呵呵，这次讲一讲 jQuery 鼠标悬停时候的元素弹动效果，还有重要的内联元素概念。 > 元素弹动是指鼠标悬停某个元素，比如 DIV 上的时候，DIV 会向某个方向弹过去。 阅读全文——共4584字]]> > 呵呵，这次讲一讲 jQuery 鼠标悬停时候的元素弹动效果，还有重要的内联元素概念。
> 元素弹动是指鼠标悬停某个元素，比如 DIV 上的时候，DIV 会向某个方向弹过去。

> 如图分别使用了 Display:block 与使用 Display:inline 的 CSS 效果代码，左边的并不美观。
> 而右边的非常在整齐，这就是神奇并且必备的 Display 参数，而 Inline 表示此元素为内联元素。

1. 关于Display的属性：

2. 使用 Display:block 实现可移动效果：

> 好吧，实际上 Inline 和今天要说的 jQuery 的关系是反的。因为我们用了 Inline 就不能使用弹动效果了。
> 内联元素就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。
> 因为 Inline 是内联元素，而 Block 是块级元素，所以这里只能使用 Block 来实现此效果。

> 至于把那些字给水平居中就使用 padding-top:0.5em; 即可，顶部填充0.5个字的长度。

> 下面的代码可以使 Id 为 momo 的 DIV 实现弹动效果。

jQuery(document).ready(function($){
$("#momo").hover(function (){
	$(this).stop().animate({marginTop:"15px"}, 350,"easeOutBounce");
	}
	,function () {
    $(this).stop().animate({marginTop:"0px"}, 150,"easeOutBounce");
	});
});
});

> 同时需要 Jquery.easing 插件的支持，所以请将以下代码加入你的 JS文件。
> 灵活使用 Jquery.easing 插件可以实现很多弹动效果，更多的请询问谷歌，谢谢 ^_^。

3. Jquery.easing 插件代码：

> 下面是灰常强大的 Jquery.easing.1.3 的全部代码，去掉了些没营养的东西：

// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
	def: 'easeOutQuad',
	swing: function (x, t, b, c, d) {
		//alert(jQuery.easing.default);
		return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
	},
	easeInQuad: function (x, t, b, c, d) {
		return c*(t/=d)*t + b;
	},
	easeOutQuad: function (x, t, b, c, d) {
		return -c *(t/=d)*(t-2) + b;
	},
	easeInOutQuad: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t + b;
		return -c/2 * ((--t)*(t-2) - 1) + b;
	},
	easeInCubic: function (x, t, b, c, d) {
		return c*(t/=d)*t*t + b;
	},
	easeOutCubic: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t + 1) + b;
	},
	easeInOutCubic: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t + b;
		return c/2*((t-=2)*t*t + 2) + b;
	},
	easeInQuart: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t + b;
	},
	easeOutQuart: function (x, t, b, c, d) {
		return -c * ((t=t/d-1)*t*t*t - 1) + b;
	},
	easeInOutQuart: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
		return -c/2 * ((t-=2)*t*t*t - 2) + b;
	},
	easeInQuint: function (x, t, b, c, d) {
		return c*(t/=d)*t*t*t*t + b;
	},
	easeOutQuint: function (x, t, b, c, d) {
		return c*((t=t/d-1)*t*t*t*t + 1) + b;
	},
	easeInOutQuint: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
		return c/2*((t-=2)*t*t*t*t + 2) + b;
	},
	easeInSine: function (x, t, b, c, d) {
		return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
	},
	easeOutSine: function (x, t, b, c, d) {
		return c * Math.sin(t/d * (Math.PI/2)) + b;
	},
	easeInOutSine: function (x, t, b, c, d) {
		return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
	},
	easeInExpo: function (x, t, b, c, d) {
		return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
	},
	easeOutExpo: function (x, t, b, c, d) {
		return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
	},
	easeInOutExpo: function (x, t, b, c, d) {
		if (t==0) return b;
		if (t==d) return b+c;
		if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
		return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
	},
	easeInCirc: function (x, t, b, c, d) {
		return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
	},
	easeOutCirc: function (x, t, b, c, d) {
		return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
	},
	easeInOutCirc: function (x, t, b, c, d) {
		if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
		return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
	},
	easeInElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
	},
	easeOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
	},
	easeInOutElastic: function (x, t, b, c, d) {
		var s=1.70158;var p=0;var a=c;
		if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
		if (a < Math.abs(c)) { a=c; var s=p/4; }
		else var s = p/(2*Math.PI) * Math.asin (c/a);
		if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
		return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
	},
	easeInBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*(t/=d)*t*((s+1)*t - s) + b;
	},
	easeOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
	},
	easeInOutBack: function (x, t, b, c, d, s) {
		if (s == undefined) s = 1.70158;
		if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
		return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
	},
	easeInBounce: function (x, t, b, c, d) {
		return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
	},
	easeOutBounce: function (x, t, b, c, d) {
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		} else {
			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		}
	},
	easeInOutBounce: function (x, t, b, c, d) {
		if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
		return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
	}
});
]]> http://www.rainmoe.com/2009/12/02/jquery-mouseover-effect-to-make-elements-moving/feed/ 33 添加jQuery悬停效果与排除元素 http://www.rainmoe.com/2009/11/25/add-jquery-mouseover-effect-and-exclude-element/ http://www.rainmoe.com/2009/11/25/add-jquery-mouseover-effect-and-exclude-element/#comments Wed, 25 Nov 2009 15:29:58 +0000 小邪 http://www.evlos.org/?p=1166 吼吼 O(∩_∩)O，向 jQuery 进军啦，那么首当其冲需要添加的是 jQuery 鼠标悬停效果。 > 其实很多地方讲到了这个效果，那么我这里的特色就是让某些地方不使用此效果。 阅读全文——共2095字]]> > 吼吼 O(∩_∩)O，向 jQuery 进军啦，那么首当其冲需要添加的是 jQuery 鼠标悬停效果。
> 其实很多地方讲到了这个效果，那么我这里的特色就是让某些地方不使用此效果。

> 那么很多童鞋应该发现我的博客已经开始使用 jQuery 效果了，虽然 jQuery 1.3.2 库有50多KB。
> 不过我图片都是70多KB，也不差这一点。那么接触 JavaScript 就从 jQuery 开始吧。

P.s. 我最希望的是每个来我博客的人都能有所收获，那才是我的动力。

初步了解：
> 首先是 jQuery库 是一个简洁快速灵活的JavaScript框架。
> 它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

特点：
> 1、代码简练、语义易懂、学习快速、文档丰富。
> 2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
> 3、jQuery支持CSS1-CSS3,以及基本的xPath。
> 4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
> 5、可以很容易的为jQuery扩展其他功能。
> 6、能将JS代码和HTML代码完全分离，便于代码和维护和修改。
> 7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能。

使用方法：
> 当前最流行的是从Google提供的服务中加载，地址如下。
> http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
> 当然也可以从 http://jquery.com/ jQuery 的官网下载上传到自己的网站然后加载。
> 在网页的 html 标签之内任何地方都可以使用以下代码进行加载。

<script type="text/javascript" src="Js文件地址"></script>

添加悬停效果：
> 以下代码可以直接写成一个 Js文件 。

jQuery(document).ready(function($){ 

	$(‘a’).mouseover(function(tot){
		this.myHref = this.href;
		this.myHref = (this.myHref.length > 45 ?
			this.myHref.substring(0,45)+" ..." : this.myHref);
		var hoverbox = "<div id='hoverbox'>"+this.myHref+"</div>";
		$('body').append(hoverbox);
		$('#hoverbox').css({
			"opacity":"0.9","top":(tot.pageY+20)+"px",
			"left":(tot.pageX+10)+"px"}).show('middle');})
			.mouseout(function(){$('#hoverbox').remove();
		}).mousemove(function(e){$('#hoverbox').css({
			"top":(tot.pageY+20)+"px","left":(tot.pageX+10)+"px"
		});
	});

});

解说：
> mouseover 表示鼠标悬停在带有 a 标签的元素上的时候执行此函数。
> this.myHref.length 表示鼠标指向的文字的链接长度，这里使用45个字符进行限制。
> 大于45个英文字符的Url则截断，然后在后面加上“ ...”。
> substring 方法使用 start 和 end 两者中的较小值作为子字符串的起始点，较大值则为终点。
> 即从第0位开始到第45位，substring(0,45)。
> 然后定义一个 hoverbox 变量。
> 使用 append 插入html代码，接着指定 hoverbox 的默认CSS，opacity 是透明度。
> pageY 指定相对Y轴坐标，pageX 指定X轴。mouseout 表示鼠标移走，mousemove 表示鼠标在元素上移动。
> 在元素上移动的时候保持不动，移开就 remove。

排除元素：
> 下面代码之间的函数都是调用 jQuery 库的，在下面代码中插入下面的下面的代码 (^o^)。

jQuery(document).ready(function($){
});

$("#sidebar").mouseover(function(tot1){
	$('#hoverbox').remove();
});

> 我的模板的 sidebar 是一个ID 所以这里用 #sidebar 查找元素。
> 这样子就不会在边栏显示了。

]]> http://www.rainmoe.com/2009/11/25/add-jquery-mouseover-effect-and-exclude-element/feed/ 14