页面右侧浮动固定层返回顶部按钮带二维码展示功能

时间 : 14-09-27 栏目 : js知识 作者 : admin 点击 : 3,692 次

移动互联网时代的到来,大家可以通过“扫一扫”功能轻松在移动端获取需要的信息。今天我给大家分享一个WEB功能,它是一个漂浮在网页的右侧的小工 具条,我们可以使用它上下快速定位页面位置,可以弹出微信二维码或者页面地址二维码,让喜欢在手机等移动设备上阅读的朋友轻松获取信息。

HTML

首先我们准备右侧浮动层的内容,工具条有上下箭头按钮,然后一个“反馈”链接,点击可以到网站的反馈信息页面,还有一个二维码按钮,鼠标滑上时会弹 出一个二维码图片,那么我们使用.popPanel来放置二维码图片,.arrowPanel是用来做箭头方向的。在本例中,我使用了一张背景图作为工具 条,当然实际应用中我们还可以根据实际需求加多个功能按钮。

<div id="floatPanel"> 
    <div class="ctrolPanel" style="right:20px;"> 
        <a class="arrow" href="#"><span>顶部</span></a> 
        <a class="contact" href="http://www.helloweba.com/gbook.html" target="_blank"><span>反馈</span></a> 
        <a class="qrcode" href="#"><span>二维码</span></a> 
        <a class="arrow" href="#"><span>底部</span></a> 
    </div> 
     
    <div class="popPanel" style="right:66px;"> 
        <div class="popPanel-inner"> 
            <div class="qrcodePanel"><img src="helloweba.jpg" /><p>扫描二维码用手机看文章</p></div> 
            <div class="arrowPanel"> 
                <div class="arrow01"></div> 
                <div class="arrow02"></div> 
            </div> 
        </div> 
    </div> 
</div> 

CSS

我们使用CSS来将工具条固定在右侧,position:fixed在这里发挥作用,还要注意使用z-index的值要大点,因为我们希望工具条一直能在页面其他元素的上层,也就是可以覆盖其他元素。具体请看以下代码:

#floatPanel .ctrolPanel{width:36px;height:166px;background:#fff url(panel_bg.gif) no-repeat left top;border:solid 1px #ddd;position:fixed;right:25px;top:300px;overflow:hidden;z-index:10000;} 
#floatPanel .ctrolPanel a{width:34px;font-size:12px;color:#ff6600;letter-spacing:1px;text-align:center;overflow:hidden;} 
#floatPanel .ctrolPanel .arrow{height:29px;line-height:28px;display:block;margin:1px auto;} 
#floatPanel .ctrolPanel .arrow span{display:none;} 
#floatPanel .ctrolPanel .arrow:hover{background:#f4f4f4;} 
#floatPanel .ctrolPanel .arrow:hover span{display:block;} 
#floatPanel .ctrolPanel .contact{height:60px;display:block;margin:2px auto;} 
#floatPanel .ctrolPanel .contact span{line-height:90px;} 
#floatPanel .ctrolPanel .qrcode{height:40px;display:block;margin:2px auto;} 
#floatPanel .ctrolPanel .qrcode span{display:none;} 
 
.popPanel{width:205px;height:214pxposition:fixed;right:90px;top:300px;z-index:10000;overflow:hidden;display:none; } 
.popPanel-inner{width:205px;height:220px;position:relative;overflow:hidden;} 
.arrowPanel{width:10px;height:210px;position:absolute;right:1px;top:102px;} 
.arrowPanel .arrow01{width:0;height:0;font-size:0;line-height:0;border-top:10px solid transparent;_border-top:10px solid black;_filter:chroma(color=black);border-right:10px solid transparent;_border-right:10px solid black;_filter:chroma(color=black);border-bottom:10px solid transparent;_border-bottom:10px solid black;_filter:chroma(color=black);border-left:10px solid #ddd;position:absolute;bottom:0;position:absolute;left:2px;top:0;} 
.arrowPanel .arrow02{width:0;height:0;font-size:0;line-height:0;border-top:10px solid transparent;_border-top:10px solid black;_filter:chroma(color=black);border-right:10px solid transparent;_border-right:10px solid black;_filter:chroma(color=black);border-bottom:10px solid transparent;_border-bottom:10px solid black;_filter:chroma(color=black);border-left:10px solid #fff;position:absolute;bottom:0;position:absolute;left:0;top:0;} 
.qrcodePanel{width:194pxheight:212pxbackground:#fff;text-align:center;border:solid 1px #ddd;position:absolute;left:0;top:0;overflow:hidden;} 
.qrcodePanel img{width:174px;height:174px;border:none;padding:5px 5px 0px 5px;} 
.qrcodePanel p{font-size:12px;color:#666;line-height:20px;letter-spacing:1px;} 

jQuery

本实例基于jQuery,因此必须先载入jQuery库,你可以使用360的前端CDN加载jQuery库文件。

<script src="http://libs.useso.com/js/jquery/1.7.2/jquery.min.js"></script> 

当点击向上箭头.arrow时,设置动画,页面滚动到页头,当点击向下箭头.arrow时,页面滚动到页底,当中使用了scrollTop,当 scrollTop的值为0时表示到页头,为页面总高度时则表示到页底。然后当鼠标滑上移动终端图标时,会向左弹出一个二维码图案,也是使用动画函数 animate()设置宽度变化达到弹出展示效果,请看详细代码:

$(function(){ 
    $("#floatPanel a.arrow").eq(0).click(function(){ 
        $("html,body").animate({scrollTop :0}300); 
        return false; 
    }); 
    $("#floatPanel a.arrow").eq(1).click(function(){ 
        $("html,body").animate({scrollTop : $(document).height()}300); 
        return false; 
    }); 
 
    var panel = $(".popPanel");     
    var w = panel.outerWidth(); 
     
    $(".qrcode").hover(function(){ 
        panel.css("width","0px").show(); 
        panel.animate({"width" : w + "px"},300); 
    },function(){ 
        panel.animate({"width" : "0px"},300); 
    }); 
     
}); 

除非注明,文章均为( admin )原创,转载请保留链接: http://www.pnyes.com/?p=36