分享一款基于jquery右侧悬浮加入购物车代码。这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码。

在线预览   源码下载

实现的代码：

<!--左侧产品parabola.js控制-->

    <div class="main">

        <div id="plist">

            <ul>

                <li>

                    <div class="lh_wrap">

                        <div class="p-img">

                            <a href="#">

                                <img alt="入驻商家测试商品3" src="data:images/147_thumb_G_1409275114094.jpg" title="入驻商家测试商品3"

                                    width="240" height="240"></a></div>

                        <div class="p-name">

                            <a href="#" title="入驻商家测试商品3">入驻商家测试商品3</a></div>

                        <div class="p-price">

                            <strong>￥300</strong><span id="p200"></span></div>

                        <div class="extra">

                            <a href="#">已售出0件</a></div>

                        <div class="btns">

                            <a href="javascript:;" class="add_cart_large btnCart">加入购物车</a> <a href="javascript:;"

                                class="add_cart_small btnCart">关注</a> <a class="btn-compare">

                                    <input id="147" onclick="Compare.add(this, 147,'入驻商家测试商品3','1', 'images/201408/thumb_img/147_thumb_G_1409275114094.jpg', '￥300', '￥360')"

                                        type="checkbox">

                                    <label for="147">

                                        对比</label>

                                </a>

                        </div>

                    </div>

                </li>

                <li>

                    <div class="lh_wrap">

                        <div class="p-img">

                            <a href="#">

                                <img alt="入驻商家测试商品3" src="data:images/147_thumb_G_1409275114094.jpg" title="入驻商家测试商品3"

                                    width="240" height="240"></a></div>

                        <div class="p-name">

                            <a href="#" title="入驻商家测试商品3">入驻商家测试商品3</a></div>

                        <div class="p-price">

                            <strong>￥300</strong><span id="p200"></span></div>

                        <div class="extra">

                            <a href="#">已售出0件</a></div>

                        <div class="btns">

                            <a href="javascript:;" class="add_cart_large btnCart">加入购物车</a> <a href="javascript:;"

                                class="add_cart_small btnCart">关注</a> <a class="btn-compare">

                                    <input id="147" onclick="Compare.add(this, 147,'入驻商家测试商品3','1', 'images/201408/thumb_img/147_thumb_G_1409275114094.jpg', '￥300', '￥360')"

                                        type="checkbox">

                                    <label for="147">

                                        对比</label>

                                </a>

                        </div>

                    </div>

                </li>

                <li>

                    <div class="lh_wrap">

                        <div class="p-img">

                            <a href="#">

                                <img alt="入驻商家测试商品3" src="data:images/147_thumb_G_1409275114094.jpg" title="入驻商家测试商品3"

                                    width="240" height="240"></a></div>

                        <div class="p-name">

                            <a href="#" title="入驻商家测试商品3">入驻商家测试商品3</a></div>

                        <div class="p-price">

                            <strong>￥300</strong><span id="p200"></span></div>

                        <div class="extra">

                            <a href="#">已售出0件</a></div>

                        <div class="btns">

                            <a href="javascript:;" class="add_cart_large btnCart">加入购物车</a> <a href="javascript:;"

                                class="add_cart_small btnCart">关注</a> <a class="btn-compare">

                                    <input id="147" onclick="Compare.add(this, 147,'入驻商家测试商品3','1', 'images/201408/thumb_img/147_thumb_G_1409275114094.jpg', '￥300', '￥360')"

                                        type="checkbox">

                                    <label for="147">

                                        对比</label>

                                </a>

                        </div>

                    </div>

                </li>

                <li>

                    <div class="lh_wrap">

                        <div class="p-img">

                            <a href="#">

                                <img alt="入驻商家测试商品3" src="data:images/147_thumb_G_1409275114094.jpg" title="入驻商家测试商品3"

                                    width="240" height="240"></a></div>

                        <div class="p-name">

                            <a href="#" title="入驻商家测试商品3">入驻商家测试商品3</a></div>

                        <div class="p-price">

                            <strong>￥300</strong><span id="p200"></span></div>

                        <div class="extra">

                            <a href="#">已售出0件</a></div>

                        <div class="btns">

                            <a href="javascript:;" class="add_cart_large btnCart">加入购物车</a> <a href="javascript:;"

                                class="add_cart_small btnCart">关注</a> <a class="btn-compare">

                                    <input id="147" onclick="Compare.add(this, 147,'入驻商家测试商品3','1', 'images/201408/thumb_img/147_thumb_G_1409275114094.jpg', '￥300', '￥360')"

                                        type="checkbox">

                                    <label for="147">

                                        对比</label>

                                </a>

                        </div>

                    </div>

                </li>

                <li>

                    <div class="lh_wrap">

                        <div class="p-img">

                            <a href="#">

                                <img alt="入驻商家测试商品3" src="data:images/147_thumb_G_1409275114094.jpg" title="入驻商家测试商品3"

                                    width="240" height="240"></a></div>

                        <div class="p-name">

                            <a href="#" title="入驻商家测试商品3">入驻商家测试商品3</a></div>

                        <div class="p-price">

                            <strong>￥300</strong><span id="p200"></span></div>

                        <div class="extra">

                            <a href="#">已售出0件</a></div>

                        <div class="btns">

                            <a href="javascript:;" class="add_cart_large btnCart">加入购物车</a> <a href="javascript:;"

                                class="add_cart_small btnCart">关注</a> <a class="btn-compare">

                                    <input id="147" onclick="Compare.add(this, 147,'入驻商家测试商品3','1', 'images/201408/thumb_img/147_thumb_G_1409275114094.jpg', '￥300', '￥360')"

                                        type="checkbox">

                                    <label for="147">

                                        对比</label>

                                </a>

                        </div>

                    </div>

                </li>

            </ul>

        </div>

        <div id="flyItem" class="fly_item">

            <img src="data:images/item-pic.jpg" width="40" height="40"></div>

    </div>

    <!--右侧贴边导航quick_links.js控制-->

    <div class="mui-mbar-tabs">

        <div class="quick_link_mian">

            <div class="quick_links_panel">

                <div id="quick_links" class="quick_links">

                    <li><a href="#" class="my_qlinks"><i class="setting"></i></a>

                        <div class="ibar_login_box status_login">

                            <div class="avatar_box">

                                <p class="avatar_imgbox">

                                    <img src="data:images/no-img_mid_.jpg" /></p>

                                <ul class="user_info">

                                    <li>用户名：sl19931003</li>

                                    <li>级&nbsp;别：普通会员</li>

                                </ul>

                            </div>

                            <div class="login_btnbox">

                                <a href="#" class="login_order">我的订单</a> <a href="#" class="login_favorite">我的收藏</a>

                            </div>

                            <i class="icon_arrow_white"></i>

                        </div>

                    </li>

                    <li id="shopCart"><a href="#" class="message_list"><i class="message"></i>

                        <div class="span">

                            购物车</div>

                        <span class="cart_num">0</span></a> </li>

                    <li><a href="#" class="history_list"><i class="view"></i></a>

                        <div class="mp_tooltip" style="visibility: hidden;">

                            我的资产<i class="icon_arrow_right_black"></i></div>

                    </li>

                    <li><a href="#" class="mpbtn_histroy"><i class="zuji"></i></a>

                        <div class="mp_tooltip">

                            我的足迹<i class="icon_arrow_right_black"></i></div>

                    </li>

                    <li><a href="#" class="mpbtn_wdsc"><i class="wdsc"></i></a>

                        <div class="mp_tooltip">

                            我的收藏<i class="icon_arrow_right_black"></i></div>

                    </li>

                    <li><a href="#" class="mpbtn_recharge"><i class="chongzhi"></i></a>

                        <div class="mp_tooltip">

                            我要充值<i class="icon_arrow_right_black"></i></div>

                    </li>

                </div>

                <div class="quick_toggle">

                    <li><a href="#"><i class="kfzx"></i></a>

                        <div class="mp_tooltip">

                            客服中心<i class="icon_arrow_right_black"></i></div>

                    </li>

                    <li><a href="#none"><i class="mpbtn_qrcode"></i></a>

                        <div class="mp_qrcode" style="display: none;">

                            <img src="data:images/weixin_code_145.png" width="148" height="175" /><i class="icon_arrow_white"></i></div>

                    </li>

                    <li><a href="#top" class="return_top"><i class="top"></i></a></li>

                </div>

            </div>

            <div id="quick_links_pop" class="quick_links_pop hide">

            </div>

        </div>

    </div>

    <!--[if lte IE 8]>

<script src="js/ieBetter.js"></script>

<![endif]-->

    <script type="text/javascript" src="js/parabola.js"></script>

    <script type="text/javascript">

        $(".quick_links_panel li").mouseenter(function () {

            $(this).children(".mp_tooltip").animate({ left: -92, queue: true });

            $(this).children(".mp_tooltip").css("visibility", "visible");

            $(this).children(".ibar_login_box").css("display", "block");

        });

        $(".quick_links_panel li").mouseleave(function () {

            $(this).children(".mp_tooltip").css("visibility", "hidden");

            $(this).children(".mp_tooltip").animate({ left: -121, queue: true });

            $(this).children(".ibar_login_box").css("display", "none");

        });

        $(".quick_toggle li").mouseover(function () {

            $(this).children(".mp_qrcode").show();

        });

        $(".quick_toggle li").mouseleave(function () {

            $(this).children(".mp_qrcode").hide();

        });

        // 元素以及其他一些变量

        var eleFlyElement = document.querySelector("#flyItem"), eleShopCart = document.querySelector("#shopCart");

        var numberItem = 0;

        // 抛物线运动

        var myParabola = funParabola(eleFlyElement, eleShopCart, {

            speed: 400, //抛物线速度

            curvature: 0.0008, //控制抛物线弧度

            complete: function () {

                eleFlyElement.style.visibility = "hidden";

                eleShopCart.querySelector("span").innerHTML = ++numberItem;

            }

        });

        // 绑定点击事件

        if (eleFlyElement && eleShopCart) {

            [ ].slice.call(document.getElementsByClassName("btnCart")).forEach(function (button) {

                button.addEventListener("click", function (event) {

                    // 滚动大小

                    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0,

                scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0;

                    eleFlyElement.style.left = event.clientX + scrollLeft + "px";

                    eleFlyElement.style.top = event.clientY + scrollTop + "px";

                    eleFlyElement.style.visibility = "visible";

                    // 需要重定位

                    myParabola.position().move();

                });

            });

        }

    </script>

via：http://www.w2bc.com/Article/32534

基于jquery右侧悬浮加入购物车代码的更多相关文章

  1. jQuery右侧悬浮楼层滚动 电梯菜单

    http://www.kaiu.net/effectCon.aspx?id=2198 <!doctype html> <html> <head> <meta ...

  2. 基于jQuery右下角旋转环状菜单代码

    基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览    ...

  3. 基于jQuery垂直多级导航菜单代码

    基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul class="ce&q ...

  4. 基于jQuery图片自适应排列显示代码

    基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. 基于jQuery在线问卷答题系统代码

    分享一款基于jQuery在线问卷答题系统代码是一款实用的jQuery答题插件,点击下一题切换带有淡入淡出效果.实现的效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  7. (转)passwordStrength 基于jquery的密码强度检测代码使用介绍

    使用很简单. 代码如下: $('#pass').passwordStrength();  XHTML 代码如下: <p><label>请输入密码:</label>  ...

  8. 基于jQuery实现文字倾斜显示代码

    这是一款基于jQuery实现文字倾斜显示,这是一款基于jQuery实现的超酷动态文字显示效果.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. ...

  9. jquery商城购物车右侧悬浮加入购物车动画效果

    <script type="text/javascript" src="js/jquery-1.7.min.js"></script> ...

随机推荐

  1. 改变maven父子项目视图为树状

    完毕

  2. Android SharedPreferences保存和读取对象

    SharedPreferences保存和读取对象 1.首先要序列化对象(以下是序列化实体类的样例,不方便贴出实体类全部的代码) public class LoginResult extends Bas ...

  3. 禁用root登录以及使用sudo分配权限

    前言 最近一段时间服务器有受到一些挖比特币的人的攻击,这里就简要说明一下提升服务器安全度的做法 禁用root登录 root权限可以说是linux服务器的最高权限,如果我们平常都是直接使用root用户来 ...

  4. springmvc访问静态资源的springmvc.xml配置

    一. 问题及需求 由于Spring MVC的web.xml文件中关于DispatcherServlet拦截url的配置为"/",拦截了所有的请求,同时*.js,*.jpg等静态资源 ...

  5. [转]网易云音乐Android版使用的开源组件

    原文链接 网易云音乐Android版从第一版使用到现在,全新的 Material Design 界面,更加清新.简洁.同样也是音乐播放器开发者,我们确实需要思考,相同的功能,会如何选择.感谢开源,让我 ...

  6. 【LeetCode】135. Candy

    Candy There are N children standing in a line. Each child is assigned a rating value. You are giving ...

  7. windows添加开机启动项

    http://www.cnblogs.com/jokey/archive/2010/06/17/1759370.html添加开机启动项(通过注册表) 例子:增加QQ开机启动项 第一步:找到注册表的启动 ...

  8. Linux命令-安全复制命令：scp

    scp是有Security的文件copy,基于ssh登录.操作起来比较方便,比如要把当前一个文件copy到远程另外一台主机上. 命令格式: scp [可选参数] 源文件 目标文件 scp 本地文件 远 ...

  9. 采用异步来实现重新连接服务器或者重新启动服务 C#中类的属性的获取 SignalR2简易数据看板演示 C#动态调用泛型类、泛型方法 asp .net core Get raw request. 从壹开始前后端分离[.NetCore 不定期更新] 38 ║自动初始化数据库

    采用异步来实现重新连接服务器或者重新启动服务 开启异步监听,不会导致主线程的堵塞,在服务异常断开后一直检测重新连接服务,成功连接服务后通知各个注册的客户端! #region 检测断线并重连OPC服务 ...

  10. Python练习笔记——利用递归求年龄，第五个比第四个大2岁...

    现在有五个人, 第五个人比第四个人大两岁,18 第四个人比第三个人大两岁,16 第三个人比第二个人大两岁,14 第二个人比第一个人大两岁,12 第一个人现10岁,                 10 ...