带动画效果jQuery悬浮QQ客服

浏览数：54 / 时间：2015年06月09日

html:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <link rel="stylesheet" type="text/css" href="css/sidebar.css"/>
 6 <title>带动画效果jQuery悬浮QQ客服</title>

 7 <script src="js/jquery.min.js" type="text/javascript"></script>
 8 <script type="text/javascript" src="js/jquery.fixed.1.3.js"></script>
 9 
10 </head>
11 
12 <body>
13 <div style="height:1000px;"></div>
14 <!-- Start 客服 -->
15 <div class="scrollsidebar" >
16     <div class="side_content">
17         <div class="side_list">
18             <div class="side_title"><a title="隐藏" class="close_btn">
19                 <span>关闭</span></a></div>
20             <div class="side_center">                
21                 <div class="qqserver">
22                     <p>
23                         <a target="_blank" href="http://sighttp.qq.com/authd?IDKEY=3576f940785a498097570d3e3f02f0872a7732342732e6fe"><img border="0" src="http://wpa.qq.com/imgd?IDKEY=3576f940785a498097570d3e3f02f0872a7732342732e6fe&pic=51" alt="有什么可以帮到您？" title="有什么可以帮到您？">客服</a>
24                     </p>
25                 </div>               
26                 <hr>
27                 <div class="phoneserver">
28                     <p>www.baidu.com</p>
29                 </div>
30                 <hr>
31                 <div class="msgserver">
32                     <p><a href="#">给我们留言</a></p>
33                 </div>
34             </div>
35             <div class="side_bottom"></div>
36         </div>
37     </div>
38     <div class="show_btn"><span>在线客服</span></div>
39 </div>
40 <!-- End 客服 -->
41 <div style="text-align:center;clear:both">
42 <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
43 </div>
44 <script>
45 $(document).ready(function() {
46 
47     //悬浮客服
48     $(".scrollsidebar").fix({
49         float : ‘right‘, //default.left or right
50         minStatue : true,
51         durationTime : 500
52     });
53 
54 });
55 </script>
56 </body>
57 </html>

css:

.qqserver p img {display: inline; margin-top:-5px; vertical-align:middle;}
.scrollsidebar{position:absolute; z-index:999; top:220px;}
.side_content{width:154px; height:auto; overflow:hidden; float:left; }
.side_content .side_list {width:154px;overflow:hidden;}
.show_btn{ width:0; height:112px; overflow:hidden; margin-top:50px; float:left; cursor:pointer;}
.show_btn span { display:none;}
.close_btn{width:24px;height:24px;cursor:pointer;}
.side_title,.side_bottom,.close_btn,.show_btn {background:url(../images/service/sidebar_bg.gif) no-repeat;}
.side_title {height:46px;}
.side_bottom { height:8px;}
.side_center {font-family:Verdana, Geneva, sans-serif; padding:5px 12px; font-size:12px;}
.close_btn { float:right; display:block; width:21px; height:16px; margin:17px 10px 0 0; _margin:17px 5px 0 0;}
.close_btn span { display:none;}
.side_center .qqserver p { text-align:center; padding:6px 0; margin:0; vertical-align:middle;}
.phoneserver  {font-size:14px; text-align:center;}
.phoneserver p { padding:2px 0; _height:16px; margin:0;color: #666666;}
.msgserver { text-align:center; margin-bottom:5px;}
.msgserver a { background:url(../images/service/sidebar_bg.gif) no-repeat -119px -115px; padding-left:20px;}
.side_content hr { border-bottom:1px solid #E6E6E6; height:1px; margin:10px 0; clear:both;}


/* gray skin as the default skin */
.side_title,  .side_title {background-position:-1165px 0;}
.side_center, .side_center { background:url(../images/service/gray_line.gif) repeat-y center;}
.side_bottom, .side_bottom {background-position:-1165px -50px;}
.close_btn, .close_btn {background-position:-44px -90px;}
.close_btn:hover,.close_btn:hover {background-position:-67px -90px;}
.show_btn ,.show_btn {background-position:-231px 0;}
.msgserver a, .msgserver a { color:#6c6c6c;}
/* ====== links ====== */
a{/*color:#036;*/color:#737373;text-decoration:none;}
a:hover{/*text-decoration:underline;*/ text-decoration:none; color:#f30;}

js:

/* =================================================
//
// jQuery Fixed Plugins 1.3.1
// author : 
// Url: 
// Data : 2012-03-30
//
// 参数 : float --> 悬浮方向[left or right]
//          minStatue --> 最小状态，只有show_btn
//          durationTime --> 完成时间
//事例  :    
          $("#scrollsidebar2").fix({
              float : ‘right‘,    //default.left or right 
            minStatue : true,    //default.false or true
              durationTime : 1000 //
          });
//
// =================================================*/

;(function($){
    $.fn.fix = function(options){
        var defaults = {
            float : ‘left‘,
            minStatue : false,
            durationTime : 1000    
        }
        var options = $.extend(defaults, options);        

        this.each(function(){            
            //获取对象
            var thisBox = $(this),
                closeBtn = thisBox.find(‘.close_btn‘ ),
                show_btn = thisBox.find(‘.show_btn‘ ),
                sideContent = thisBox.find(‘.side_content‘),
                sideList = thisBox.find(‘.side_list‘)
                ;    
            var defaultTop = thisBox.offset().top;    //对象的默认top    
            
            thisBox.css(options.float, 0);            
            if(options.minStatue){
                $(".show_btn").css("float", options.float);
                sideContent.css(‘width‘, 0);
                show_btn.css(‘width‘, 25);
                
            }
            //核心scroll事件            
            $(window).bind("scroll",function(){
                var offsetTop = defaultTop + $(window).scrollTop() + "px";
                thisBox.animate({
                    top: offsetTop
                },
                {
                    duration: options.durationTime,    
                    queue: false    //此动画将不进入动画队列
                });
            });    
            //close事件
            closeBtn.bind("click",function(){
                sideContent.animate({width: ‘0px‘},"fast");
                show_btn.stop(true, true).delay(300).animate({ width: ‘25px‘},"fast");
            });
            //show事件
             show_btn.click(function() {
                $(this).animate({width: ‘0px‘},"fast");
                sideContent.stop(true, true).delay(200).animate({ width: ‘154px‘},"fast");
            });
                
        });    //end this.each

    };
})(jQuery);