本站接受互联网网站仿站、功能定制、定制插件、主题,如果需要的话可以联系我 QQ:2283276927

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

雨夜 1881次浏览 2个评论

前段时间把本站的主题(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:学习的过程是快乐的,但是我总觉得不是那回事,我需要系统的学习,来回试代码感觉有效性没那么大。而且有时候很烦恼。哎,呵呵。希望对大家有帮助。呵呵。


涂涂研版版权所有,如未注明 , 均为原创,转载需注明出处。
喜欢 ( 0)
[使用支付宝或微信扫码]
分享 ( 0)
发表我的评论换个身份
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2) 个小伙伴在吐槽
  1. 喜欢,赏,,分享 那三个按钮,,套件有没有
    xk 2018-01-30 PM 09:09 回复
    • 求发邮箱,,,xs0329@126.com
      xk 2018-01-30 PM 09:10 回复

主题定制开发流程

ZBLOGPHP开发流程

联系我们