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.........完整代码请登录后点击上方下载按钮下载查看