jQuery 模拟iNove右侧Rss效果
时间:2009年04月11日作者:simaopig评论次数:11
一早起来,笑容兄弟跑过来问我这款皮肤右侧的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>
懒得去找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);
});
});
嘿嘿,完活,有想看完整代码的请去这里下载吧
安全无毒。嘿嘿。
声明: 本文采用 BY-NC-SA 协议进行授权 | 小小子
转载请注明转自《jQuery 模拟iNove右侧Rss效果》
发表评论


踩踩也好…沙发…
[回复]
@cherlin
呵,欢迎没事来玩。
[回复]
谢谢小小子哈..
不过我有个问题就是你写的这个JQ为什么是慢慢显示出来的,INOVE的鼠标放上去就马上显示出来了,还有INOVE这个只有首页才会有效果,在别的页面鼠标放上去就没反应了..我用的是FF.
[回复]
@笑容@1988y
呵呵,不客气哈。
因为我写的代码里面我设置了隐藏和显示的时间。
分别设为3000,你要想快点的话可以把时间改小些啊。呵。
[回复]
其实是速度。。呵。
[回复]
不错嘛,对JS很向往,但是自己玩不明白,就多学多改了
[回复]
@LAONB
呵,一样啊。只是瞎弄。不过JS确实很强大的说。。
[回复]
支持一下
[回复]
@Felix
哈,谢谢。。常来玩。。
[回复]
这代码是不对的,这样的话鼠标一离开就直接没了 没有点击的时间!
[回复]
看起来很不错,学习了
[回复]