基于jquery右侧悬浮加入购物车代码
分享一款基于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>级 别：普通会员</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右侧悬浮加入购物车代码的更多相关文章
- jQuery右侧悬浮楼层滚动 电梯菜单
http://www.kaiu.net/effectCon.aspx?id=2198 <!doctype html> <html> <head> <meta ...
- 基于jQuery右下角旋转环状菜单代码
基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览 ...
- 基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul class="ce&q ...
- 基于jQuery图片自适应排列显示代码
基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery在线问卷答题系统代码
分享一款基于jQuery在线问卷答题系统代码是一款实用的jQuery答题插件,点击下一题切换带有淡入淡出效果.实现的效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery左右滑动切换图片代码
分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="v_ou ...
- (转)passwordStrength 基于jquery的密码强度检测代码使用介绍
使用很简单. 代码如下: $('#pass').passwordStrength(); XHTML 代码如下: <p><label>请输入密码:</label> ...
- 基于jQuery实现文字倾斜显示代码
这是一款基于jQuery实现文字倾斜显示,这是一款基于jQuery实现的超酷动态文字显示效果.适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. ...
- jquery商城购物车右侧悬浮加入购物车动画效果
<script type="text/javascript" src="js/jquery-1.7.min.js"></script> ...
随机推荐
- servlet 服务器HTTP响应头设置示例(response用法）
1,Location 用于重定向,和返回状态码302结合使用. 代码示例: response.setStatus(302); response.setHeader("location&quo ...
- C#多线程之 ManualResetEvent和AutoResetEvent
初次体验 ManualResetEvent和AutoResetEvent主要负责多线程编程中的线程同步:以下一段是引述网上和MSDN的解析: 在.Net多线程编程中,AutoResetEvent和Ma ...
- Oracle执行SQL报错ORA-00922
问题描述: 对Oracle数据库执行序列化脚本出错,ora-00922 missing or invalid option #无效的选项 问题解决: 对于set define off --这个是sq ...
- android-使用环信SDK开发即时通信功能及源代码下载
近期项目中集成即时聊天功能.挑来拣去,终于选择环信SDK来进行开发,选择环信的主要原因是接口方便.简洁.说明文档清楚易懂.文档有android.ios.和后台server端.还是非常全的. 环信官网: ...
- leetcode || 58、Length of Last Word
problem: Given a string s consists of upper/lower-case alphabets and empty space characters ' ', ret ...
- （二）Linux实操之——网络配置、进程管理、服务管理、组管理、YUM
接上段 (一)Linux实操之——权限.任务调度.磁盘分区 4.网络配置 4.1 NAT模式的网络配置 目前我们采用的网络配置是NAT模式. windows下cmd通过 ipconfig 命令可以 ...
- 【LeetCode】79. Word Search
Word Search Given a 2D board and a word, find if the word exists in the grid. The word can be constr ...
- Python学习笔记010——形参与实参
在使用中忽略了一个问题,形参有些和实参类似,也不能是“关键字后面含有位置参数”,即“默认形参”后面必须不能含有“位置”形参! def test(a=100,b): print("test&q ...
- 转： Python中的os.path.dirname(__file__)
(1).当"print os.path.dirname(__file__)"所在脚本是以完整路径被运行的, 那么将输出该脚本所在的完整路径,比如: ...
- Accounting_会计基础知识
作为企业的财务人员,必须拥有一些技能和财务方面的知识,本文就所讲述的是财务岗位必须掌握的知识总结,仅供参考. 1.账面价值.账面余额和账面净值 账面价值是指某科目(通常是资产类科目)的账面余额减去相关 ...