jquery实现右侧悬浮购物车及其他菜单按钮效果代码-html代码-BFW代码库

代码语言：html
代码描述：jquery实现右侧悬浮购物车及其他菜单按钮效果代码，包含咨询、联系方式、登录等。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html class="no-js LANG-cn" lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <style>
        ::-webkit-scrollbar {
            display: none;
        }
        
        ::-moz-placeholder {
            color: #aaa;
        }
        
        ::-webkit-input-placeholder {
            color: #aaa;
        }
        
        :-ms-input-placeholder {
            color: #aaa;
        }
        
        ::selection {
            background: #111;
            color: #fff;
            font-weight: bold
        }
        
        html {
            color: #333;
        }
        
        body {
            min-width: 1200px;
        }
        
        html,body {
            margin: 0;
            height: 100%;
            font-family: "Myriad Set Pro","Helvetica Neue",Helvetica,Arial,Verdana,sans-serif;
        }
        
        * {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        
        a {
            text-decoration: none;
            color: #000;
        }
        
        hr {
            height: 1px;
            background: #ccc;
            width: 100%;
            border: none;
            margin: 0;
            padding: 0;
            margin-top: 10px;
        }
        
        img {
            border: 0;
        }
        
        body {
            background: #eee;
            color: #666;
            font: 12px/150% Arial,Verdana, "microsoft yahei";
        }
        
        html, body, div, dl, dt, dd, ol, ul, li, h1, h2, h3, h4, h5, h6, p, blockquote, pre, button, fieldset, form, input, legend, textarea, th, td {
            margin: 0;
            padding: 0;
        }
        
        article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary {
            display: block;
            margin: 0;
            padding: 0;
        }
        
        audio,canvas,progress,video {
            display: inline-block;
            vertical-align: baseline;
        }
        
        a {
            text-decoration: none;
            color: #08acee;
        }
        
        a:active,a:hover {
            outline: 0;
        }
        
        button {
            outline: 0;
        }
        
        mark {
            color: #000;
            background: #ff0;
        }
        
        small {
            font-size: 80%;
        }
        
        img {
            border: 0;
        }
        
        button,input,optgroup,select,textarea {
            margin: 0;
            font: inherit;
            color: inherit;
            outline: none;
        }
        
        li {
            list-style: none;
        }
        
        i {
            font-style: normal;
        }
        
        a {
            color: #666;
        }
        
        a:hover {
            color: #eee;
        }
        
        em {
            font-style: normal;
        }
        
        h2, h3 {
            font-family: "microsoft yahei";
            font-weight: 100;
        }
        
            .cistern:after,.clearfix:after {
                display: table;
                clear: both;
                content: " "
            }
            
            .more.shop-more {
                float: none;
                padding: 20px;
                text-align: center;
                border-top: 1px solid #e6e6e6;
            }
            
            .amount_btn {
                float: right;
                width: 71px;
                margin-top: -5px;
            }
            
            .amount_btn a {
                float: left;
                width: 15px;
                height: 15px;
                background: #fff;
            }
            
            .amount_btn input {
                font-size: 12px;
                line-height: 12px;
                float: left;
                width: 35px;
                height: 15px;
                text-align: center;
                color: #666;
                border: none;
                border-top: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
            }
            
            .count_info {
                font-size: 12px;
                position: relative;
                margin: 20px
            }
            
            .count_info label {
                font-size: 14px;
                float: left;
                width: 70px;
                color: #666;
            }
            
            .count_info label input {
                width: 15px;
                margin-right: 10px;
                cursor: pointer;
            }
            
            .count_info label span.text {
                display: inline-block;
                cursor: pointer;
            }
            
            .count_info label input:checked+span {
                background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAAFUElEQVR4Xu3cT2gUVxwH8O9vdmeaWiFUkDbpzlaxyWYVvHjon5RQqCBVsB4Ei1A86Sne7Km0paU3e9OTQsEKLQELeqggWijBFCl4KdTNJi21u0tSCFSCrYaZnfmV2Y3tZv/E7O68X0L2l2vmve97H3/73szsizSddhj6Y1yAFNq4cSVAoWWcFVrIWaEVWkpAKEfXaIUWEhCK0YpWaCEBoRitaIUWEhCK0YpWaCEBoRitaIUWEhCK0YpWaCEBoRitaIUWEhCK0YpWaCEBoRitaIUWEhCK0YpWaCGBFTG8CFC/iWSt6P9Vc8/CG33MzpcgHIkbW6EBMGM26XujQ39igYFkPu1cA3AwTmyFBu6H5L2x+w/MP4H9BXAs175JRGNxYfc0NAPzdtl79ZU5FGtBFTqu8or6YV6w2R/dVcJsbbe6dMSIzMx/Jcr+m8PzyNUhJ/Kuc0U3w1iweREhjY2UvJ/rkK28a38NomOxxNR10lNrNDM/AmEsW/Dv1mNOp+2vAHrfBHLUZw9B85LFfGC4WJ6sx8y59jkiGjeF3DPQDPYS4EPDhfKthkp2nbMgnDGJ3BvQzAFxeDhTCq43Iic/BFmfm0be/NDMIYGOZ4reRMNykbLHyaJzEsibG5qZiXAiU/Av12PmU/ZJtuiCFPKmhqaQT2VK/sUGZNc5xuBvQEQK3aUAh3w6W/LPNyInjjCsKyBKdBnRdvNNd3tHYfhJplT+rHG5SBwMybpGRMm2lWJoYBDa3Ev0lvNmfDFS9D6o//2MmxwLiG4SyInBrKMuzEAzT1Dgj3PSiR4Osh2NrM1GDL6YLfin6pvNvmS/VrbwPRFtabPLWC83AX09U/AOExDMvojtZduZIsJQrKNu6IwvZwr+CQJW/F17Lm3vA+MHItpqNv/pvccKzeBbYcE/tAfwnkTfexkDFjs/Atjx9OF0cAXzRKboHycgrG09nXL2wuJJU98BtjvSeKGZJ/sS/oGd97FUO5BfB+GWE84UCG67A1z1esbVTNE7Gn16aq/7LYUhj+w7RLQt1rwuOosVOhpHVNUjBf8dAsorKuwF7ORnnCkCBroY739NpXLiGGvUR+zQlYGtUmk+2VMg2t7NBFj6k9PNYJfbmoGuYDdfO2cGkA2S9u1OP9bMfKc/8N8enMOj2vlHG2/gOD8Z2wu6xDYHXS3tpncDnW5UDL4bPvbf2rOAv2vnXUxh2z+Wc1vqVrITc8PQlTW76f1tB7deOfuh9/quB1hcsfE9j35/qz0Jor2dAEi1MQ5dXUX4fLbon66f1FofJmoPuNT2MTeILYtJe5JA+6TAOs0RgV7eIFs+HodENwDqazGJhgMu0XW/70DfUmDfiPOQS6eIa2knB10p7fCjkWK54RuNmXRyfwD6rv5dxKoHXNJ2dP3+tUxyI1wjC12xbvEKM1X3dk34gIvpfwxx6MrNe8uX8tX3xQwstjjgYuVd51sTB1w2JXS0O7b8msl13mPGvSYHXCifti+ZPHthEntdKrq6Obb+4rTZhHNp+wKBTprEMNn3+kFXsQNCeDRTDK6uNkmJAy4mkSvL5Xr/l5nMXLY4fLfZuYtogLm08ykBH5uGMN3/ukNXCrvFSaKcmzxDZJ01jSDR/4aArk505dm49Th7YRJ8A0FXHtUrpz0tYDczLkmfvegZ6OXKfgjGcyCyTE5cuu8NVdHSk5fMU2ghbYVWaCEBoRitaIUWEhCK0YpWaCEBoRitaIUWEhCK0YpWaCEBoRitaIUWEhCK0YpWaCEBoRitaIUWEhCK0YpWaCEBoRitaIUWEhCK0YpWaCEBoRitaCHofwGXQYe31xGynQAAAABJRU5ErkJggg==");
                background-size: 18px;
                background-repeat: no-repeat;
                background-position: center;
                width: 18px;
                height: 18px;
            }
            
            .count_info label span.check {
                position: absolute;
                top: 3px;
                left: 0;
                display: none\9;
                background: #fff;
                background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAACyklEQVR4Xu3dwWoTURQG4HPCIIMgEUG0RREXaZGoIdz7BoK4FXwBXbsSXLjTnbj1AXwDF+7qK3jnQhbRLA1WcRcVgwOGOTLBKW0ohrb2Tzr5Z9lm7n/Pl59sjwofiIDuTun3+6fyPL8vIrfNrKuqVyG3qFfIyMxeN5vNR61W60c12g50jPFKURRbqrpZr7kXNs3QzO547wflDabQf5v8TkRuLuxa9Qwepml6vd1u/5xCZ1n2WERe1HPWxU5lZs+9908q6Pcicm2xV6pnuplte+8vq5klMcbf9RxzOaYys/MaQlhT1S+zVzKz7977s8tx1ZNxiyzLPovI+uxtG43GhsYY182s/MDsM3LOnTsZIy7HLUMIn1T1EqGP+fsg9DEDV8cTmtAgAVAMG01okAAoho0mNEgAFMNGExokAIphowkNEgDFsNGEBgmAYthoQoMEQDFsNKFBAqAYNprQIAFQDBtNaJAAKIaNJjRIABTDRhMaJACKYaMJDRIAxbDRhAYJgGLYaEKDBEAxbDShQQKgGDaa0CABUAwbTWiQACiGjSY0SAAUw0YTGiQAimGjCQ0SAMWw0YQGCYBi2GhCgwRAMWw0oUECoBg2mtAgAVAMG01okAAoho0mNEgAFMNGExokAIphowkNEgDFsNGEBgmAYthoQoMEQDFsNKFBAqAYNprQIAFQDBtNaJAAKIaNJjRIABTDRi8zNFc4HfzbCSF8VdULs29OVzgNBoMz4/F4Z5PkwY/nG/ME0jRdq9bs7btMa94B/P98gfKXodw5VkG/FJGH81/jJw4h8Mo596BahXoxz/MPIsK1eoeQ/Mcr35IkudHpdLZ3L/e9VRTFG1U9/X+zVvM0M/ulqnedc1ulwJ511b1eb3MymTw1s3uqmqwm0ZGnHonIWxF55pwrfyWmzx7o6o/lMklV3Thy5AodYGamqsNut/txv7H/AMxH7+5pNskrAAAAAElFTkSuQmCC");
                background-size: 18px;
                background-repeat: no-repeat;
                background-position: center;
                width: 18px;
                height: 18px;
                cursor: pointer;
            }
            
            .count_info p {
                font-size: 14px;
                float: right;
                width: 70%;
                margin: 0;
                text-align: right;
                color: #666;
            }
            
            .shop_function_btn {
                padding: 20px 0;
                text-align: center;
                border-top: 1px solid #e6e6e6;
                border-bottom: 1px solid #e6e6e6
            }
            
            .shop_function_btn a {
                margin: 0 10px
            }
            
            div.more {
                line-height: 1.1;
                float: right;
                clear: both;
                margin-top: 12px;
                padding-left: 0!important
            }
            
            .more-resources .more a,.more a {
                display: inline-block;
                padding-left: 20px;
                color: #999
            }
            
            .more-resources label {
                display: inline-block;
                margin-bottom: 12px;
                -webkit-transition: all .4s cubic-bezier(.2,.83,.42,.91);
                transition: all .4s cubic-bezier(.2,.83,.42,.91);
                vertical-align: top
            }
            
            .more a:hover {
                text-decoration: underline;
                color: #333
            }
            
            .more a em,.more a i {
                font-size: 24px;
                font-style: normal;
                display: inline-block;
                width: 36px;
                height: 23px;
                margin-left: -12px;
                color: #e50000;
                -webkit-font-smoothing: antialiased
            }
            
            .more a em:before,.more a i:before {
                position: relative;
                top: 3px;
            }
            
            .cloud_computing div.more {
                float: none
            }
            
            .global_toolbar.default {
                position: absolute
            }
            
            .global_toolbar.default .toolbar_content,.global_toolbar.opacity .toolbar_content {
                display: none
            }
            
            .global_toolbar.opacity .toolbar_btn a em,.global_toolbar.opacity .toolbar_btn a samp {
                background: #000;
                background: rgba(0,0,0,.8);
                cursor: pointer
            }
            
            .global_toolbar.opacity .toolbar_btn a:hover em {
                background: #e50000
            }
            
            .global_toolbar {
                position: fixed;
                z-index: 1001;
                top: 0;
                right: 0;
                width: 0;
                height: 100%;
                -webkit-transition: all .4s cubic-bezier(.2,.83,.42,.91);
                transition: all .4s cubic-bezier(.2,.83,.42,.91);
                border-left: 1px solid #d0d0d0;
                background: #fff
            }
            
            .global_toolbar.open {
                width: 320px
            }
            
            .wap_cartbtn {
                display: none
            }
            
            .toolbar_btn {
                position: absolute;
                top: 100%;
                left: -60px;
                width: 60px
            }
            
            .toolbar_btn a,.toolbar_btn a samp {
                position: relative;
                display: block;
                height: 60px;
                -webkit-transition: all .4s cubic-bezier(.2,.83,.42,.91);
                transition: all .4s cubic-bezier(.........完整代码请登录后点击上方下载按钮下载查看