<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>鸭脖客 &#187; 今天</title>
	<atom:link href="http://yaboke.com/tag/%e6%a8%a1%e7%b3%8a%e6%b8%85%e6%99%b0/feed/" rel="self" type="application/rss+xml" />
	<link>http://yaboke.com</link>
	<description>脖子伸长,视野较远</description>
	<lastBuildDate>Sun, 08 Jan 2012 14:55:16 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>用JQuery创建一个淡入淡出的图片效果</title>
		<link>http://yaboke.com/using-jquery-to-create-a-picture-of-the-effect-of-fade/</link>
		<comments>http://yaboke.com/using-jquery-to-create-a-picture-of-the-effect-of-fade/#comments</comments>
		<pubDate>Wed, 12 Aug 2009 13:00:55 +0000</pubDate>
		<dc:creator>果酱</dc:creator>
				<category><![CDATA[杂七八]]></category>
		<category><![CDATA[Jquery]]></category>
		<category><![CDATA[图片]]></category>
		<category><![CDATA[效果]]></category>
		<category><![CDATA[模糊清晰]]></category>
		<category><![CDATA[淡入淡出]]></category>
		<category><![CDATA[渐变]]></category>
		<category><![CDATA[黑白彩色]]></category>

		<guid isPermaLink="false">http://yaboke.com/?p=344</guid>
		<description><![CDATA[有时候有的情况有的地方需要一些图片的渐变效果，比如黑白变彩色，模糊变清晰。 这里介绍一个简单的方法[bavotasan]用JQuery来实现这样的效果。 第一步 当然是加载jquery库，可以选择从jquery官网下载最新的版本然后在网页头部加上如下语句。 [sourcecode language='php'] [/sourcecode] 或者直接从google加载，这样更能提高性能。 [sourcecode language='php'] [/sourcecode] 第二步道最后一步 准备2张图片。 再接着是function和css及html，最后成了如下格式。 [sourcecode language='html'] [/sourcecode]]]></description>
			<content:encoded><![CDATA[<p>有时候有的情况有的地方需要一些图片的渐变效果，比如黑白变彩色，模糊变清晰。</p>
<p>这里介绍一个简单的方法[<a target="_blank" href="http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/">bavotasan</a>]用JQuery来实现这样的效果。<span id="more-344"></span></p>
<p><a href="http://bavotasan.com/demos/fadehover/" target="_blank"><img class="alignnone size-full wp-image-310" title="效果预览" src="http://yaboke.com/wp-content/uploads/2009/08/yulan.gif" alt="主题预览" width="100" height="30" /></a><a href="http://yaboke.com/wp-content/uploads/2009/08/fadd.rar" target="_blank"><img class="alignnone size-full wp-image-309" title="下载" src="http://yaboke.com/wp-content/uploads/2009/08/xiazai.gif" alt="主题下载" width="100" height="30" /></a></p>
<p>第一步</p>
<p>当然是加载jquery库，可以选择从<a href="http://jquery.com/" target="_blank">jquery</a>官网下载最新的版本然后在网页头部加上如下语句。</p>
<p>[sourcecode language='php']<br />
<script src="http://你的网址.com/jquery.js" type="'text/javascript'"></script><br />
[/sourcecode] </p>
<p> 或者直接从google加载，这样更能提高性能。<br />
[sourcecode language='php']<br />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js'></script><br />
[/sourcecode]</p>
<p>第二步道最后一步<br />
准备2张图片。</p>
<p><img title="cbavota-bw" src="http://bavotasan.com/wp-content/uploads/2009/08/cbavota-bw.jpg" alt="" width="150" height="122" /><br />
<img title="cbavota" src="http://bavotasan.com/wp-content/uploads/2009/08/cbavota.jpg" alt="" width="150" height="122" /></p>
<p>再接着是function和css及html，最后成了如下格式。</p>
<p>[sourcecode language='html']<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /></p>
<p><script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js'></script><br />
<script>
$(document).ready(function(){</p>
<p>$("img.a").hover(
function() {
$(this).animate({"opacity": "0"}, "slow");
},
function() {
$(this).animate({"opacity": "1"}, "slow");
});</p>
<p>});
</script></p>
<style>
div.fadehover {
	position: relative;
	}</p>
<p>img.a {
	position: absolute;
	left: 0;
	top: 0;
        z-index: 10;
	}</p>
<p>img.b {
	position: absolute;
	left: 0;
	top: 0;
	}
</style>
<p></head></p>
<p><body></p>
<div class="fadehover">
<div><img src="cbavota-bw.jpg" alt="" class="a" /></div>
<div><img src="cbavota.jpg" alt="" class="b" /></div>
<p></body><br />
</html></p>
<p>[/sourcecode]</p>
]]></content:encoded>
			<wfw:commentRss>http://yaboke.com/using-jquery-to-create-a-picture-of-the-effect-of-fade/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

