贴右边关于我们

<link href="~/Content/themes/css/rightcontact.css" rel="stylesheet" />

<div id="rightcontact" class="rightcontact">
    <div class="hoverbtn">
        <span>联</span><span>系</span><span>我</span><span>们</span>
        <span id="direction"><<</span>
    </div>

    <div class="conter">
        <p class="con2 clearfx">
            <a href="javascript:consult_online();" class="a1">
                <img src="/Content/themes/images/contactzhongjin_1.png"></a>
            <span>在线客服：</span>
            <a href="javascript:void(0)" οnclick="javascript:window.open('http://b.qq.com/webc.htm?new=0&sid=4007888499&eid=218808P8z8p8R8p8q8Q8R&o=http://www.myzhongjin.com&q=7&ref='+document.location, '_blank', 'height=544, width=644,toolbar=no,scrollbars=no,menubar=no,status=no');">点击交流</a>
        </p>

        <p class="con2 clearfx">
            <a target="_blank" href="http://e.weibo.com/yinker" class="a1">
                <img src="/Content/themes/images/contactzhongjin_2.png"></a>
            <span>新浪微博：</span>
            <a target="_blank" href="http://e.weibo.com/u/3576967615">点击关注</a>
        </p>

        <div class="qqcall">
            <dl class="clearfx">
                <dt>
                    <img width="31" height="31" src="/Content/themes/images/contactzhongjin_3.png"></dt>
                <dd class="f1">QQ交流群：</dd>
                <dd>群1：<a  href="http://shang.qq.com/wpa/qunwpa?idkey=7a1c410f27614aa757146e4ff2b37ff230375e58fcf466d4ea1f9d6ef8b7e7d7" target="_blank">369932684</a></dd>
                <dd>群2：<a href="http://shang.qq.com/wpa/qunwpa?idkey=bf37837eda09667f68a77eb8cf689f8b7f6f9901eb12b18a078d7c3ad22a3f2a" target="_blank">327278647</a> </dd>
            </dl>
        </div>

        <div class="weixincall">
            <dl class="clearfx">
                <dt>
                    <img width="31" height="31" src="/Content/themes/images/contactzhongjin_4.png"></dt>
                <dd >微信关注：</dd>
                <dd class="f3">
                    <img width="73" height="73" src="/Content/themes/images/weixin.jpg"></dd>
            </dl>
        </div>

        <div class="share">
            <dl class="clearfx">
                <dt>
                    <img width="31" height="31" src="/Content/themes/images/contactzhongjin_5.png"></dt>
                <dd class="f1">分享：</dd>
                <dd>
                    <div class="ep-share-end">
                        <ul>
                            <li><a href="javascript:void(0);" οnclick="weiboShare()" title="分享到新浪微博" class="ntshare-sina" id="shareBtn"><i class="ep-share-icon ep-share-sina"></i></a></li>
                            <li><a href="javascript:void(0);" οnclick="qzoneShare()" title="分享到QQ空间" class="ntshare-qzone" id="qzoneBtn"><i class="ep-share-icon ep-share-qzone"></i></a></li>
                            <li><a href="javascript:void(0);" οnclick="tqqShare()" title="分享到腾讯微博" class="ntshare-qq" id="tqqBtn"><i class="ep-share-icon ep-share-qq"></i></a></li>
                            <li><a class="jiathis_button_weixin"><i class="ep-share-icon ep-share-weixin"></i></a> </li>
                            <li><a href="javascript:void(0);" οnclick="renrenShare()" title="分享到人人网" class="ntshare-renren" id="renrenBtn"><i class="ep-share-icon ep-share-renren"></i></a></li>
                        </ul>
            </div>
                </dd>
            </dl>
        </div>

        <div class="yktimer">
            <span style="font-weight: bold; color:#fff;">服务时间：</span>
            <span>9:00-21:00</span>
        </div>
    </div>
</div>

<div id="zhongjinmask"></div>

<script type="text/javascript">
    $(function () {
        //鼠标移上去
        $("#rightcontact").mouseenter(function () {
            $("#rightcontact").stop();
            $("#zhongjinmask").stop();
            $("#zhongjinmask").show();
            $("#rightcontact").animate({ right: '+0px' }, "slow");
            $("#zhongjinmask").animate({ opacity: '0.4' }, "slow");
            $("#direction").html(">>");
        });
        //鼠标移开
        $("#rightcontact").mouseleave(function () {
            $("#rightcontact").stop();
            $("#zhongjinmask").stop();
            $("#rightcontact").animate({ right: '-230px' }, "slow");
            $("#zhongjinmask").animate({ opacity: '0' }, "slow");
            $("#zhongjinmask").hide();
            $("#direction").html("<<");
        });
    });


    /* 新浪微博分享 */
    function weiboShare() {
        var wbUrl = document.URL;
        var wbAppkey = "";
        var wbTitle = "@ViewBag.Title";
        var wbRalateUid= "3576967615";
        var wbPic = "";
        var wbLanguage = "zh_cn";
        var url = "http://service.weibo.com/share/share.php?url=" + wbUrl + "&appkey=" + wbAppkey + "&title=" + wbTitle + "&pic=" + wbPic + "&ralateUid=" + wbRalateUid + "&language=" + wbLanguage + "";
        window.open(url);
    }

    /*qq空间分享*/
    function qzoneShare() {
        var wbUrl = document.URL;
        var wbTitle = "@ViewBag.Title";
        var wbSummary = "众金在线- 最大、最安全的网络借贷、理财平台。提供便捷、安全、低门槛的个人信用贷款和个人理财服务。";
        var wbPic = "";
        var url = "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?summary=" + wbSummary + "&title=" + wbTitle + "&url=" + wbUrl + "&pics=" + wbPic + "";
        window.open(url);
    }

    /*腾讯微博分享*/
    function tqqShare() {
        var wbUrl = document.URL;
        var wbTitle = "@ViewBag.Title";
        var wbAppkey = "";
        var wbSite = "www.myzhongjin.com";
        var wbPic = "";
        var url = "http://share.v.t.qq.com/index.php?c=share&a=index&title=" + wbTitle + "&url=" + wbUrl + "&appkey=" + wbAppkey + "&site=" + wbSite + "pic=" + wbPic + "";
        window.open(url);
    }

    /*人人网分享*/
    function renrenShare() {
        var wbUrl = document.URL;
        var wbTitle = "@ViewBag.Title";
        var wbSummary = "众金在线- 最大、最安全的网络借贷、理财平台。提供便捷、安全、低门槛的个人信用贷款和个人理财服务。";
        var wbPic = "";
        var url = "http://widget.renren.com/dialog/share?resourceUrl=" + wbUrl + "&srcUrl=" + wbUrl + "&title=" + wbTitle + "&pic=" + wbPic + "&description=" + wbSummary + "";
        window.open(url);
    }
</script>

 html { overflow-x:hidden; }
      .rightcontact {
          right: -230px;
          background: none repeat scroll 0 0 #0697DA;
          bottom: 0;
          height: 100%;
          position: fixed;
          width: 230px;
          z-index: 10001;
      }

     .rightcontact .hoverbtn {
         background: none repeat scroll 0 0 #F5A515;
         border-radius: 4px 0 0 4px;
         box-shadow: -1px -1px 6px 0 #999999;
         color: #FFFFFF;
         cursor: pointer;
         font-size: 14px;
         height: 109px;
         left: -30px;
         margin-top: -66px;
         padding-top: 23px;
         position: absolute;
         top: 50%;
         width: 30px;
     }

     .rightcontact .hoverbtn span {
         float: left;
         height: 18px;
         overflow: hidden;
         text-align: center;
         width: 30px;
     }

     .rightcontact .hoverbtn img {
         display: inline;
         float: left;
         height: 9px;
         margin: 10px 0 0 10px;
         width: 13px;
     }

     .rightcontact .conter {
         height: 560px;
         margin-left: 22px;
         margin-top: -280px;
         position: absolute;
         top: 50%;
         width: 186px;
     }

     #zhongjinmask {
         background: none repeat scroll 0 0 #000000;
         left: 0;
         top: 0;
         position: fixed;
         z-index: 10000;
         display: none;
         opacity: 0;
         width: 100%;
         height: 100%;
     }

     .contactusyinker .conter {
    height: 560px;
    margin-left: 22px;
    margin-top: -280px;
    position: absolute;
    top: 50%;
    width: 186px;
}
.rightcontact .conter .con1 {
    border-bottom: 1px solid #2C9AC5;
    padding-bottom: 14px;
     height: 44px;
}
.rightcontact .conter .con1 dl dt {
    float: left;
    height: 31px;
    width: 31px;
}
.rightcontact .conter .con1 dl dd {
    color: #FFFFFF;
    float: right;
    font-size: 18px;
    width: 142px;
}
.rightcontact .conter .con1 dl .f1 {
    font-size: 14px;
    font-weight: bold;
    height: 19px;
    line-height: 16px;
    vertical-align: top;
}
.rightcontact .conter .con2 {
    border-bottom: 1px solid #2C9AC5;
    padding: 18px 0 14px;
    height: 31px;
}
.rightcontact .conter .con2 .a1 {
    margin-right: 10px;
}
.rightcontact .conter .con2 a {
    color: #F3E7B2;
    float: left;
    height: 31px;
    line-height: 31px;
}
.rightcontact .conter .con2 span {
    color: #FFFFFF;
    float: left;
    font-size: 14px;
    height: 31px;
    line-height: 31px;
}
.rightcontact .qqcall {
    border-bottom: 1px solid #2C9AC5;
    padding: 19px 0 10px;
    height: 66px;
}
.rightcontact .qqcall dl dt {
    float: left;
    height: 31px;
    width: 31px;
}
.rightcontact .qqcall dl dd {
    color: #FFFFFF;
    float: right;
    font-size: 12px;
    height: 22px;
    width: 142px;
}
.rightcontact .qqcall dl dd .full {
    color: #CCCCCC;
    cursor: text;
    font-size: 12px;
    text-decoration: none;
}
.rightcontact .qqcall dl dd a {
    color: #FCEBAF;
    text-decoration: underline;
}
.rightcontact .weixincall {
    border-bottom: 1px solid #2C9AC5;
    padding: 22px 0;
    height: 98px;
}
.rightcontact .weixincall dl dt {
    float: left;
    height: 31px;
    width: 31px;
}
.rightcontact .weixincall dl dd {
    color: #FFFFFF;
    float: right;
    font-size: 12px;
    height: 22px;
    width: 142px;
}
.rightcontact .weixincall .f1 {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
    height: 25px;
    vertical-align: top;
}
.rightcontact .weixincall .f3 {
    display: inline;
    height: 73px;
    margin-right: 69px;
    width: 73px;
}

.rightcontact .share {
    border-bottom: 1px solid #2C9AC5;
    padding: 19px 0 10px;
    height: 55px;
}
.rightcontact .share dl dt {
    float: left;
    height: 31px;
    width: 31px;
}
.rightcontact .share dl dd {
    color: #FFFFFF;
    float: right;
    font-size: 12px;
    height: 22px;
    width: 142px;
}
.rightcontact .share dl dd .full {
    color: #CCCCCC;
    cursor: text;
    font-size: 12px;
    text-decoration: none;
}
.rightcontact .share dl dd a {
    color: #FCEBAF;
    text-decoration: underline;
}
.rightcontact .yktimer {
    background: none repeat scroll 0 0 #2D9DC9;
    height: 40px;
    margin: 28px 0 0 -8px;
    padding: 16px 0 15px 26px;
    width: 177px;
    
}
.rightcontact .yktimer span {
    color: #fff;
    display: block;
    font-size: 14px;
    height: 20px;
    line-height: 20px;
}

#direction{margin-top: 5px;}

.sharecommend-info .ep-share-end {
    display: inline-block;
    float: none;
    padding-top: 0;
    vertical-align: middle;
    width: 180px;
}
.ep-share-end ul {
    float: right;
}
.ep-share-end li {
    cursor: pointer;
    float: left;
    margin-right: 0;
    padding: 0 2px;
}
.ep-share-end li a {
    cursor: pointer;
    float: left;
}
.ep-share-end li a .ep-share-icon {
    float: left;
}
.ep-share-end .extra {
    float: left;
    margin-left: 7px;
}
a .ep-share-icon {
    background: url(/Content/themes/images/shareicon.png) no-repeat  0 0;
    display: inline-block;
    height: 24px;
    overflow: hidden;
    -webkit-transition: background 0.3s cubic-bezier(0.17, 0.67, 0.88, 1.25) 0s, color 0.2s linear 0s;
    -moz-transition: background 0.3s cubic-bezier(0.17, 0.67, 0.88, 1.25) 0s, color 0.2s linear 0s;
    -ms-transition: background 0.3s cubic-bezier(0.17, 0.67, 0.88, 1.25) 0s, color 0.2s linear 0s;
    -o-transition: background 0.3s cubic-bezier(0.17, 0.67, 0.88, 1.25) 0s, color 0.2s linear 0s;
    transition: background 0.3s cubic-bezier(0.17, 0.67, 0.88, 1.25) 0s, color 0.2s linear 0s;
    width: 24px;
}

    a .ep-share-sina {
    background-position: -72px -24px;
}
a:hover .ep-share-sina {
    background-position: -72px 0;
}

a .ep-share-qq {
    background-position: -96px -24px;
}
a:hover .ep-share-qq {
    background-position: -96px 0;
}

a .ep-share-qzone {
    background-position: -48px -24px;
}
a:hover .ep-share-qzone {
    background-position: -48px 0;
}

a .ep-share-renren {
    background-position: 0 -24px;
}
a:hover .ep-share-renren {
    background-position: 0 0;
}

a .ep-share-weixin {
    background-position: -24px -24px;
}
a:hover .ep-share-weixin {
    background-position: -24px 0;
}

效果查看： 众金在线