<Home>

简易JS下拉订阅按钮

现在,各种诸如抓虾鲜果之类的在线rss阅读网站比比皆是,如果要提供相应的订阅链接给网站访客估计能排出一大排来:

订阅链接

如果能把这些链接收缩起来然后设置一个醒目的开关,当鼠标划过时才展开,那肯定是方便而且节省空间多了。FeedButton网站就提供了一个解决办法在他们网站获得一段代码加入自己页面就可以了,估计也有不少blogger已经在这样做了。

不过,别人提供的东西毕竟不够个性化。下面我来说一下我的实现方法,效果演示请看本站右上角一闪一闪的图标,把鼠标放上去看看吧。实现起来也很简单:

在要插入订阅按钮的地方先插入一段JS如下;

<script type="text/javascript">    
function showDiv(objectID) {
var theElementStyle = document.getElementById(objectID);
if(theElementStyle.style.display == "block"){
theElementStyle.style.display = "none";
}else{
theElementStyle.style.display = "block";}
}
</script>

插播一下,对程序脚本等等我都不是内行,这些所谓的技巧教程只不过是自己学会了分享一下而已,有出错或者说得不够专业的地方请见谅,OK继续。

上边那段JS作用是定义一个函数可以把页面里的特定ID内容在鼠标划过和移走的时候显示和隐藏。在JS后边就要写上那些需要隐藏和显示的内容了;

<div onmouseout="showDiv('buttons');return false;" onmouseover="showDiv('buttons');return false;">     
<p id="feedicon">这里可以放一个醒目点的订阅图标,鼠标滑过时以下链接将会被显示,鼠标移开以下内容即被隐藏。</p>
<ul id="buttons" style="display: none;">
<li><a target="_blank" href="https://www.zhuaxia.com/add_channel.php?url=https://feed.feedsky.com/dimlau">订阅到 抓虾</a></li>
<li><a target="_blank" href="https://www.xianguo.com/subscribe.php?url=https://feed.feedsky.com/dimlau">订阅到 鲜果</a></li>
<li><a target="_blank" href="https://fusion.google.com/add?feedurl=https://feed.feedsky.com/dimlau">订阅到 google</a></li>
<li><a target="_blank" href="https://add.my.yahoo.com/rss?url=https://feed.feedsky.com/dimlau">订阅到 MyYahoo</a></li>
<li><a target="_blank" href="https://www.bloglines.com/sub/https://feed.feedsky.com/dimlau">订阅到 Bloglines</a></li>
<li><a target="_blank" href="https://www.rojo.com/add-subscription?resource=https://feed.feedsky.com/dimlau">订阅到 Rojo</a></li>
</ul>
</div> 

以上内容中的加粗部分是可以自由修改的,buttons是一个定义的ID名称,你可以修改成你喜欢的名字。https://feed.feedsky.com/dimlau是本站的订阅地址,你在使用时修改成你自己的订阅地址即可。订阅链接我只是选取了自己常用的比如抓虾、鲜果、google、yahoo,如果你觉得这些还不够多还可以自己添加,只要加到</ul>标签之前就行了。“订阅到抓虾”这样的文字,你也可以换成相应的图标,以便显示出来更华丽。

到此,已经可以收工了,不过显示出来比较简陋。然后你可以在CSS里定义一下这些链接的显示样式,让他们漂亮一点。演示就看本站右上角的订阅图标吧。

这两天整理本站所用的模板,准备提供下载呢。结果发现可真不是一件简单的事,因为有太多东西没有用程序提供的变量标签写入模板,提供下载的时候就必须得改掉了,很繁琐,这是题外话不多说了。

fin.

页面会变得很长么?期待。

-= 评论已关闭 =-