完善本博客zblog二维码图片显示隐藏和向上按钮的功能

前段时间把本站的主题(Bing-blog)应用后,二维码和向上按钮的功能一直没有实现,由于对于jQuery不懂,所以实现比较难,所以今天正好下夜班,所以在网上找代码,自己修改实验,...

前段时间把本站的主题(Bing-blog)应用后,二维码和向上按钮的功能一直没有实现,由于对于jQuery不懂,所以实现比较难,所以今天正好下夜班,所以在网上找代码,自己修改实验,算是功夫不负有心人吧,两项功能实现了,现在分享下,希望对大家有所帮助。这篇文章没有区分asp和php,我想应该差不多,呵呵。

步骤:

(0)两个功能的模板文件代码如下:

<div class="fixedbox">
            <div class="returntop">
                <i class="fa fa-arrow-up" onclick="pageScroll()">  
                </i>
            </div>
            <div class="qrcode">
                <i class="fa fa-qrcode">
                </i>
                <div class="qrcodeimg">
                    <img src="{$host}zb_users/theme/{$theme}/style/ew.png"
                    class="qrcode" width="150" height="150" alt="qrcode" />
                </div>
            </div>
        </div>

(1)二维码图片显示隐藏

js文件里代码如下(用到jQuery):

//图片显示隐藏
$(document).ready(function(){
  $(".qrcode").click(function(){
    $(".qrcodeimg").toggle();
    $(".qrcode").toggleClass("click");
  });
});
$(document).ready(function(){
  $(".qrcodeimg").click(function(){
    $(".qrcodeimg").toggle();
  });
});

(2)向上按钮

js文件里代码如下(摘自新鲜人的metro主题里的js代码):

//向上按钮
function pageScroll(){
    //把内容滚动指定的像素数(第一个参数是向右滚动的像素数,第二个参数是向下滚动的像素数)
    window.scrollBy(0,-100);
    //延时递归调用,模拟滚动向上效果
    scrolldelay = setTimeout('pageScroll()',100);
    //获取scrollTop值,声明了DTD的标准网页取document.documentElement.scrollTop,否则取document.body.scrollTop;因为二者只有一个会生效,另一个就恒为0,所以取和值可以得到网页的真正的scrollTop值
    var sTop=document.documentElement.scrollTop+document.body.scrollTop;
    //判断当页面到达顶部,取消延时代码(否则页面滚动到顶部会无法再向下正常浏览页面)
    if(sTop==0) clearTimeout(scrolldelay);
}

效果如本站的右侧的向上和二维码图片显示按钮,如图:

7.PNG

PS:学习的过程是快乐的,但是我总觉得不是那回事,我需要系统的学习,来回试代码感觉有效性没那么大。而且有时候很烦恼。哎,呵呵。希望对大家有帮助。呵呵。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请通知我们,一经查实,本站将立刻删除。


客服