2009四月11
jQuery 模拟iNove右侧Rss效果
一早起来，笑容兄弟跑过来问我这款皮肤右侧的rss效果是咋实现的，
嗯。。当时就猜想可能是js的onmouseover和onmouseout效果，没有太仔细看代码。那些JS调用的地方还没找到在哪。。
残念。。。
不过用firebug看一下，原来原理应该就是这样的，因为是改变了其CSS值嘛。呵。
看一下代码
<!-- 这里是iNove皮肤 sidebar.php中的部分代码 -->
<ul id="feed_readers">
<li id="google_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Google', 'inove'); ?>" href="http://fusion.google.com/add?feedurl=<?php echo $feed; ?>"><span><?php _e('Google', 'inove'); ?></span></a></li>
<li id="youdao_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Youdao', 'inove'); ?>" href="http://reader.youdao.com/#url=<?php echo $feed; ?>"><span><?php _e('Youdao', 'inove'); ?></span></a></li>
<li id="xianguo_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Xian Guo', 'inove'); ?>" href="http://www.xianguo.com/subscribe.php?url=<?php echo $feed; ?>"><span><?php _e('Xian Guo', 'inove'); ?></span></a></li>
<li id="zhuaxia_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Zhua Xia', 'inove'); ?>" href="http://www.zhuaxia.com/add_channel.php?url=<?php echo $feed; ?>"><span><?php _e('Zhua Xia', 'inove'); ?></span></a></li>
<li id="yahoo_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('My Yahoo!', 'inove'); ?>" href="http://add.my.yahoo.com/rss?url=<?php echo $feed; ?>"><span><?php _e('My Yahoo!', 'inove'); ?></span></a></li>
<li id="newsgator_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('newsgator', 'inove'); ?>" href="http://www.newsgator.com/ngs/subscriber/subfext.aspx?url=<?php echo $feed; ?>"><span><?php _e('newsgator', 'inove'); ?></span></a></li>
<li id="bloglines_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Bloglines', 'inove'); ?>" href="http://www.bloglines.com/sub/<?php echo $feed; ?>"><span><?php _e('Bloglines', 'inove'); ?></span></a></li>
<li id="inezha_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('iNezha', 'inove'); ?>" href="http://inezha.com/add?url=<?php echo $feed; ?>"><span><?php _e('iNezha', 'inove'); ?></span></a></li>
</ul>
<ul id="feed_readers">
<li id="google_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Google', 'inove'); ?>" href="http://fusion.google.com/add?feedurl=<?php echo $feed; ?>"><span><?php _e('Google', 'inove'); ?></span></a></li>
<li id="youdao_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Youdao', 'inove'); ?>" href="http://reader.youdao.com/#url=<?php echo $feed; ?>"><span><?php _e('Youdao', 'inove'); ?></span></a></li>
<li id="xianguo_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Xian Guo', 'inove'); ?>" href="http://www.xianguo.com/subscribe.php?url=<?php echo $feed; ?>"><span><?php _e('Xian Guo', 'inove'); ?></span></a></li>
<li id="zhuaxia_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Zhua Xia', 'inove'); ?>" href="http://www.zhuaxia.com/add_channel.php?url=<?php echo $feed; ?>"><span><?php _e('Zhua Xia', 'inove'); ?></span></a></li>
<li id="yahoo_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('My Yahoo!', 'inove'); ?>" href="http://add.my.yahoo.com/rss?url=<?php echo $feed; ?>"><span><?php _e('My Yahoo!', 'inove'); ?></span></a></li>
<li id="newsgator_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('newsgator', 'inove'); ?>" href="http://www.newsgator.com/ngs/subscriber/subfext.aspx?url=<?php echo $feed; ?>"><span><?php _e('newsgator', 'inove'); ?></span></a></li>
<li id="bloglines_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('Bloglines', 'inove'); ?>" href="http://www.bloglines.com/sub/<?php echo $feed; ?>"><span><?php _e('Bloglines', 'inove'); ?></span></a></li>
<li id="inezha_reader"><a class="reader" title="<?php _e('Subscribe with ', 'inove'); _e('iNezha', 'inove'); ?>" href="http://inezha.com/add?url=<?php echo $feed; ?>"><span><?php _e('iNezha', 'inove'); ?></span></a></li>
</ul>
firebug查看iNove rss效果css
懒得去找JS写在哪了。干脆用jQuery写一个类似的效果？哈。
定义一个样式，让一个div默认是隐藏的，嗯。之所以加了一个border完全是为了自己能看清楚。。。
#hid{display:none;border:1px solid;padding:2px 2px;}
还是套用之前jQuery教程里的代码。。（没办法，懒啊）
<a href="void(0)" id="a_hov">hover me </a>
<div id="hid">
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
</div>
<div id="hid">
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
</div>
$(document).ready(function(){
$("#a_hov").hover(function(){
$("#hid").show(3000);
},function(){
$("#hid").hide(3000);
});
});
$("#a_hov").hover(function(){
$("#hid").show(3000);
},function(){
$("#hid").hide(3000);
});
});
嘿嘿，完活，有想看完整代码的请去这里下载吧
安全无毒。嘿嘿。 :razz:
文章作者：simaopig
本文地址：http://www.xiaoxiaozi.com/2009/04/11/138/
版权所有 © 转载时必须以链接形式注明作者和原始出处！
踩踩也好…沙发…
[回复]
@cherlin
呵，欢迎没事来玩。
[回复]
谢谢小小子哈..
不过我有个问题就是你写的这个JQ为什么是慢慢显示出来的,INOVE的鼠标放上去就马上显示出来了,还有INOVE这个只有首页才会有效果,在别的页面鼠标放上去就没反应了..我用的是FF. :razz:
[回复]
@笑容@1988y
呵呵，不客气哈。
因为我写的代码里面我设置了隐藏和显示的时间。
分别设为3000，你要想快点的话可以把时间改小些啊。呵。
[回复]
其实是速度。。呵。
[回复]
不错嘛，对JS很向往，但是自己玩不明白，就多学多改了
[回复]
@LAONB
呵，一样啊。只是瞎弄。不过JS确实很强大的说。。
[回复]
支持一下
[回复]
@Felix
哈，谢谢。。常来玩。。
[回复]
这代码是不对的，这样的话鼠标一离开就直接没了 没有点击的时间！
[回复]
看起来很不错，学习了
[回复]