淡入淡出jquery实现的订阅图片效果

昨天写了一篇关于上下滚动条的实现办法《Jquery上下浮动滚动的捣鼓方法》，有朋友问我怎么实现右边的订阅图标效果，所以就有了本文！

其实和上次的效果是一样的，实现图片上下移动的代码和之前的事一样的，而在这个的效果中增加了一个半透明效果，当鼠标放在图片上时会显的亮些，而移开后会变回半透明，整个过程也是动态的！好了废话不说，直接上代码！

 

HTML部分：（在</body>前加入）

<div class="feed"> 
<a href="http://loftor.com/feed/" target="_blank" rel="external" tip="Feed"> 
<img border="0" title="订阅捣鼓笔记?" alt="Feed" src="http://www.52design.com/pic/200910/20091027163816195.png"> 
</a> 
</div> 

这里有几个地方的地址需要改动，订阅地址(我不介意你不修改的 嘿嘿！)和图片地址，这个应该不用说的吧！

CSS部分：（在主题样式文件中加入)

.feed { 
display:block; 
filter:alpha(opacity=50); /初始透明度/ 
margin-right:-520px; /横向位置/ 
opacity:0.5px; /初始透明度/ 
position:absolute; 
right:43%; /横向位置/ 
top:80%; /纵向位置/ 
}

JS部分:

jQuery(document).ready(function (a) { 
var f = a(".feed").offset().top; 
a(".feed").mouseover(function () { 
a(".feed").fadeTo("300", 1) //鼠标在上面时在300毫秒内透明度增?加到1（不透明） 
}); 
a(".feed").mouseout(function () { 
a(".feed").fadeTo("300", 0.5) //鼠标在上面时在300毫秒内透明度降到0.5（半透明） 
}); 
a(window).scroll(function () { 
a(".feed").animate({ 
top: a(window).scrollTop() + f + "px" 
}, 
{ 
queue: false, 
duration: 3000 //滚动时图片在3000毫秒内到达指定位置。也就是为什么rss图片滚的比上上下下那个悠闲那么多 
}) 
}); 
}); 

好了，把以上代码加入后就能看到效果了，看不到效果的留言问我吧！嘿嘿

PS：1秒=1000毫秒