带在线客服返回顶部的jquery右下角弹出菜单-代码_右下角返回顶部在线客服代码特效-优快云博客

这篇博客介绍了如何使用jQuery创建一个包含在线客服和返回顶部功能的右下角弹出菜单。通过CSS3实现菜单的展开，无需依赖JavaScript事件绑定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="background-color: rgb(255, 0, 0);">
1.用js事件展开菜单</span>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>带在线客服返回顶部的jquery右下角弹出菜单</title>
    <style>
        body{
            height: 5000px;
        }
        *{
            margin:0;
            padding: 0;
            list-style-type:none;
        }
        .service{
            position:fixed ;
            height: 275px;
            right: 0;
            bottom: 100px;
            width: 54px;
            z-index: 999;
        }
        .item{
            height: 54px;
            border-bottom: 1px solid #0092ef;
            position: relative;
        }
        .item a{
            text-decoration: none;
            color: #fff;
        }
        .item div{
            background-color: #10bdff;
            width: 54px;
            height: 54px;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
            transition:all 0.3s ease 0s;
            line-height: 54px;
            opacity:0.8
           }
        .item img{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<div class="service" id="service">
    <ul>
        <li class="item">
            <a href="#">
                <div>
                    <img src="img/1.png">客服中心
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#">
                <div>
                    <img src="img/2.png">客户案例
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#">
                <div>
                    <img src="img/3.png">QQ客服
                </div>
            </a>
        </li>
        <li class="item">
            <a href="#">
                <div>
                    <img src="img/4.png">新浪微博
                </div>
            </a>
        </li>
        <li class="item">
            <a href="javascript:goTop()">
                <div>
                    <img src="img/5.png">返回顶部
                </div>
            </a>
        </li>
    </ul>
</div>


<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(function(){
        $("#service").on("mouseover","div",function(){
            $(this).css({width:"124px",opacity:"1"});
        }).on("mouseleave","div",function(){
            $(this).css({width:"54px",opacity:"0.8"});
        })
    });
    var goTop=function(){
        $("html,body").animate({"scrollTop":"0"},600)
    }

</script>
</body>
</html>

2.用css3展开菜单

只需要在css中加入下面代码，删除js事件绑定就行

        .item div:hover{
            width:124px;
            opacity:1
        }