为WordPress模版添加一个固定的滚屏按钮
似乎很多人都喜欢弄一个固定的滚屏按钮,这个小功能可以方便读者阅读。其实我们使用的操作系统早已提供了这一功能,那…
似乎很多人都喜欢弄一个固定的滚屏按钮,这个小功能可以方便读者阅读。其实我们使用的操作系统早已提供了这一功能,那就鼠标中键(滚轮),使用起来远比这个按钮方便,不过鼠标中键貌似都不是很抗用,另外,也为点缀一下博客,弄个固定的滚屏按钮也不错。
今天提供的滚屏代码与HotNews pro主题集成的滚屏按钮类似,只不过是固定在屏幕的边缘并具有鼠标悬停效果,下面以Wordpress默认主题Twenty Ten为例,开始折腾。
打开Twenty Ten主题的header.php模版文件,把以下代码
- <div id=“scroll”>
- <a class=“scroll_t” title=“Top” href=“#header”></a>
- <?php if(is_single() || is_page()) { ?><a class=“scroll_c” title=“Comments” href=“#comments”></a><?php } ?>
- <a class=“scroll_b” title=“Bottom” href=“#footer”></a>
- </div>
添加到这句后面
- <div id=“wrapper”class=“hfeed”>
也可添加到footer.php中。
再把下面的样式添加到style.css的最后面:
- /** 滚屏 **/
- #scroll {
- position:fixed;
- top:40%;
- right:0;
- width:24px;
- _position:absolute;
- _top:expression(eval(document.documentElement.scrollTop + document.documentElement.clientHeight * 0.4));
- }
- #scroll a {
- display:block;
- float:right;
- width:24px;
- height:24px;
- background:#fffurl(images/scroll.gif) no-repeat;
- }
- #scroll a:hover {
- background:#fffurl(images/scroll.gif) no-repeat;
- }
- #scroll a.scroll_t:hover {
- background-position:-24px 0;
- }
- #scroll a.scroll_c {
- background-position:0 –24px;
- }
- #scroll a.scroll_c:hover {
- background-position:-24px –24px;
- }
- #scroll a.scroll_b {
- background-position:0 –48px;
- }
- #scroll a.scroll_b:hover {
- background-position:-24px –48px;
- }
- html body {background-image:url(about:blank);background-attachment:fixed;}/** 防止IE6抖动 **/
最后把下面的图片扔到主题的images文件夹中,刷新页面试试按钮效果。
可能你会发现滚屏有些生硬,对了还缺少JS滑动特效。
下载:jquery.min.js,放到Twenty Ten主题根目录中,并在header.php模版:
- <link rel=“pingback” href=“<?php bloginfo( ‘pingback_url’ ); ?>” />
下面添加:
- <script type=“text/javascript” src=“<?php bloginfo(‘stylesheet_directory’); ?>/jquery.min.js” ></script>
- <script type=“text/javascript”>
- jQuery(document).ready(function($){
- $(‘.scroll_t’).click(function(){$(‘html,body’).animate({scrollTop: ‘0px’}, 800);});
- $(‘.scroll_c’).click(function(){$(‘html,body’).animate({scrollTop:$(‘#comments’).offset().top}, 800);});
- $(‘.scroll_b’).click(function(){$(‘html,body’).animate({scrollTop:$(‘#footer’).offset().top}, 800);});
- });
- </script>
注:如果你的主题已加载了jquery.js,就不用重复加载jquery.min.js了。
最后,再刷新一下页面,这回效果应该出来了。点些查看效果演示
注:如果你的主题标签选择器不是#header、#comments和#footer可以对上面代码作相应的修改。
经常看见有的网友也弄了个滚屏按钮,大大的回旋箭头,JS特效晃晃悠悠,严重干扰阅读者的视线。
顺便再给大家提供一个双击滚屏代码:
- <script type=“text/javascript”>
- var currentpos,timer;
- function initialize()
- {
- timer=setInterval(“scrollwindow()”,10);
- }
- function sc(){
- clearInterval(timer);
- }
- function scrollwindow()
- {
- window.scrollBy(0,1);
- }
- document.onmousedown=sc
- document.ondblclick=initialize
- </script>
这段JS代码,可实现双击鼠标自动滚屏,单击停止,效果可以在此页面试试。
类别:WordPress入门、
本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。
还没有任何评论,赶紧来占个楼吧!