头像

jQuery右侧悬浮固定在线客服返回顶部

来源:http://phprr.com/show-435 a***n 2018-05-09 15:54:39浏览() 收藏

一款带鼠标悬停特效的右侧边栏在线客服,悬浮固定在右侧指定位置,同时会根据一定的高度出现返回顶部的按钮,整体美观实用易上手。

一款带鼠标悬停特效的右侧边栏在线客服,悬浮固定在右侧指定位置,同时会根据一定的高度出现返回顶部的按钮,整体美观实用易上手。
jQuery右侧悬浮固定在线客服返回顶部
查看演示 下载资源: 1 下载资源 下载积分: 30 积分

1元=10积分 1元=1码币,全栈客服QQ357058607,在线充值

开头引入CSS样式和jquery库(可自行更换高一点的版本),CSS样式里的字体和图片的路径可以参考一下:

<link type="text/css" rel="stylesheet" href="css/style.css"> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

               

每一个按钮其实都是一个div元素的组合嵌套,部分代码如下:

<div class="cndns-right-meau meau-sev"> 
    <a href="javascript:" class="cndns-right-btn"> 
        <span class="demo-icon">&#xe901;</span> 
        <p>在线<br/>客服</p> 
    </a> 
    <div class="cndns-right-box"> 
        <div class="box-border"> 
            <div class="sev-t"> 
                <span class="demo-icon">&#xe901;</span> 
                <p>在线客服<i>服务时间:9:00-24:00</i></p> 
                <div class="clear"></div> 
            </div> 
            <div class="sev-b"> 
                <h4>选择下列产品马上在线沟通:</h4> 
                <ul id="zixunUl"> 
                    <li><a href="javascript:void(0);">域名/主机</a></li> 
                     
                    <li><a href="javascript:void(0);">建站/网店</a></li> 
                    <li><a href="javascript:void(0);">企业邮局</a></li> 
                    <li><a href="javascript:void(0);">代理咨询</a></li> 
                    <li><a href="javascript:void(0);">网站推广</a></li> 
                    <li><a href="javascript:void(0);">橙云主机</a></li> 
                     
                    <li><a href="javascript:void(0);">域名交易</a></li> 
                     
                    <li><a href="javascript:void(0);">租用托管(BGP)</a></li> 
                     
                    <li><a href="javascript:void(0);">其他产品</a></li> 
                    <div class="clear"></div> 
                </ul> 
            </div> 
            <span class="arrow-right"></span> 
        </div> 
    </div> 
</div>

               

底部写好检测鼠标滚动和点击返回顶部的事件,代码如下:

//置顶图标显示 
$('#top-back').hide() 
$(window).scroll(function(){ 
     if($(this).scrollTop() > 350){ 
        $("#top-back").fadeIn(); 
     } 
     else{ 
        $("#top-back").fadeOut(); 
     } 
  })     
//置顶事件 
function topBack(){ 
  $('body,html').animate({scrollTop:0},300); 
}



腾讯云服务器安全可靠高性能,多种配置供您选择

https://cloud.tencent.com/redirect.php?redirect=1001&cps_key=b685b398d3e704662203733b89accc52&from=console

阿里云服务器安全可靠高性能,多种配置供您选择

https://promotion.aliyun.com/ntms/act/qwbk.html?userCode=geqqrf2n


最新交易
评论1
头像

评论后赠送5积分,下载出错或者资源有问题请联系全栈客服QQ 357058607

  • 头像
    2018-07-02 08:28:07
    e******7
    在线客服特效做的挺好的啊。。。
1 2