以下是 jquery右侧悬浮加入购物车代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery右侧悬浮加入购物车代码</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/quick_links.js"></script>
</head>
<body id="home" style="height:1000px;">
<!--左侧产品parabola.js控制-->
<div class="main">
<div id="plist">
<ul>
<li>
<div class="lh_wrap">
<div class="p-img"><a href="#"><img alt="入驻商家测试商品3" src="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="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="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="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="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="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="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="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>
</body>
</html>JS代码(parabola.js):
var funParabola = function(element,target,options){
/* * 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算，显然不合适，因为页面动不动就几百像素 * 页面上，我们放两个物体，200~800像素之间，我们可以映射为现实世界的2米到8米，也就是100:1 * 不过，本方法没有对此有所体现，因此不必在意*/
var defaults ={
speed:166.67,// 每帧移动的像素大小，每帧（对于大部分显示屏）大约16~17毫秒curvature:0.001,// 实际指焦点到准线的距离，你可以抽象成曲率，这里模拟扔物体的抛物线，因此是开口向下的progress:function(){
}
,complete:function(){
}
}
;
var params ={
}
;
options = options ||{
}
;
for (var key in defaults){
params[key] = options[key] || defaults[key];
}
var exports ={
mark:function(){
return this;
}
,position:function(){
return this;
}
,move:function(){
return this;
}
,init:function(){
return this;
}
}
;
/* 确定移动的方式 * IE6-IE8 是margin位移 * IE9+使用transform*/
var moveStyle = "margin",testDiv = document.createElement("div");
if ("oninput" in testDiv){
["","ms","webkit"].forEach(function(prefix){
var transform = prefix + (prefix? "T":"t") + "ransform";
if (transform in testDiv.style){
moveStyle = transform;
}
}
);
}
// 根据两点坐标以及曲率确定运动曲线函数（也就是确定a,b的值）/* 公式： y = a*x*x + b*x + c;
*/
var a = params.curvature,b = 0,c = 0;
// 是否执行运动的标志量var flagMove = true;
if (element && target && element.nodeType == 1 && target.nodeType == 1){
var rectElement ={
}
,rectTarget ={
}
;
// 移动元素的中心点位置，目标元素的中心点位置var centerElement ={
}
,centerTarget ={
}
;
// 目标元素的坐标位置var coordElement ={
}
,coordTarget ={
}
;
// 标注当前元素的坐标exports.mark = function(){
if (flagMove == false) return this;
if (typeof coordElement.x == "undefined") this.position();
element.setAttribute("data-center",[coordElement.x,coordElement.y].join());
target.setAttribute("data-center",[coordTarget.x,coordTarget.y].join());
return this;
}
exports.position = function(){
if (flagMove == false) return this;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft,scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 初始位置if (moveStyle == "margin"){
element.style.marginLeft = element.style.marginTop = "0px";
}
else{
element.style[moveStyle] = "translate(0,0)";
}
// 四边缘的坐标rectElement = element.getBoundingClientRect();
rectTarget = target.getBoundingClientRect();
// 移动元素的中心点坐标centerElement ={
x:rectElement.left + (rectElement.right - rectElement.left) / 2 + scrollLeft,y:rectElement.top + (rectElement.bottom - rectElement.top) / 2+ scrollTop}
;
// 目标元素的中心点位置centerTarget ={
x:rectTarget.left + (rectTarget.right - rectTarget.left) / 2 + scrollLeft,y:rectTarget.top + (rectTarget.bottom - rectTarget.top) / 2 + scrollTop}
;
// 转换成相对坐标位置coordElement ={
x:0,y:0}
;
coordTarget ={
x:-1 * (centerElement.x - centerTarget.x),y:-1 * (centerElement.y - centerTarget.y)}
;
/* * 因为经过(0,0),因此c = 0 * 于是： * y = a * x*x + b*x;
* y1 = a * x1*x1 + b*x1;
* y2 = a * x2*x2 + b*x2;
* 利用第二个坐标： * b = (y2+ a*x2*x2) / x2*/
// 于是b = (coordTarget.y - a * coordTarget.x * coordTarget.x) / coordTarget.x;
return this;
}
;
// 按照这个曲线运动exports.move = function(){
// 如果曲线运动还没有结束，不再执行新的运动if (flagMove == false) return this;
var startx = 0,rate = coordTarget.x > 0? 1:-1;
var step = function(){
// 切线 y'=2ax+bvar tangent = 2 * a * startx + b;
// = y / x// y*y + x*x = speed// (tangent * x)^2 + x*x = speed// x = Math.sqr(speed / (tangent * tangent + 1));
startx = startx + rate * Math.sqrt(params.speed / (tangent * tangent + 1));
// 防止过界if ((rate == 1 && startx > coordTarget.x) || (rate == -1 && startx < coordTarget.x)){
startx = coordTarget.x;
}
var x = startx,y = a * x * x + b * x;
// 标记当前位置，这里有测试使用的嫌疑，实际使用可以将这一行注释element.setAttribute("data-center",[Math.round(x),Math.round(y)].join());
// x,y目前是坐标，需要转换成定位的像素值if (moveStyle == "margin"){
element.style.marginLeft = x + "px";
element.style.marginTop = y + "px";
}
else{
element.style[moveStyle] = "translate("+ [x + "px",y + "px"].join() +")";
}
if (startx !== coordTarget.x){
params.progress(x,y);
window.requestAnimationFrame(step);
}
else{
// 运动结束，回调执行params.complete();
flagMove = true;
}
}
;
window.requestAnimationFrame(step);
flagMove = false;
return this;
}
;
// 初始化方法exports.init = function(){
this.position().mark().move();
}
;
}
return exports;
}
;
/*! requestAnimationFrame.js * by zhangxinxu 2013-09-30*/
(function(){
var lastTime = 0;
var vendors = ['webkit','moz'];
for(var x = 0;
x < vendors.length && !window.requestAnimationFrame;
++x){
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || // name has changed in Webkit window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame){
window.requestAnimationFrame = function(callback,element){
var currTime = new Date().getTime();
var timeToCall = Math.max(0,16.7 - (currTime - lastTime));
var id = window.setTimeout(function(){
callback(currTime + timeToCall);
}
,timeToCall);
lastTime = currTime + timeToCall;
return id;
}
;
}
if (!window.cancelAnimationFrame){
window.cancelAnimationFrame = function(id){
clearTimeout(id);
}
;
}
}
());
JS代码(quick_links.js):
jQuery(function($){
//创建DOMvarquickHTML = document.querySelector("div.quick_link_mian"),quickShell = $(document.createElement('div')).html(quickHTML).addClass('quick_links_wrap'),quickLinks = quickShell.find('.quick_links');
quickPanel = quickLinks.next();
quickShell.appendTo('.mui-mbar-tabs');
//具体数据操作varquickPopXHR,loadingTmpl = '<div class="loading" style="padding:30px 80px"><i></i><span>Loading...</span></div>',popTmpl = '<a href="javascript:;
" class="ibar_closebtn" title="关闭"></a><div class="ibar_plugin_title"><h3><%=title%></h3></div><div class="pop_panel"><%=content%></div><div class="arrow"><i></i></div><div class="fix_bg"></div>',historyListTmpl = '<ul><%for(var i=0,len=items.length;
i<5&&i<len;
i++){
%><li><a href="<%=items[i].productUrl%>" target="_blank" class="pic"><img alt="<%=items[i].productName%>" src="<%=items[i].productImage%>" width="60" height="60"/></a><a href="<%=items[i].productUrl%>" title="<%=items[i].productName%>" target="_blank" class="tit"><%=items[i].productName%></a><div class="price" title="单价"><em>¥
<%=items[i].productPrice%></em></div></li><%}
%></ul>',newMsgTmpl = '<ul><li><a href="#"><span class="tips">新回复<em class="num"><b><%=items.commentNewReply%></b></em></span>商品评价/晒单</a></li><li><a href="#"><span class="tips">新回复<em class="num"><b><%=items.consultNewReply%></b></em></span>商品咨询</a></li><li><a href="#"><span class="tips">新回复<em class="num"><b><%=items.messageNewReply%></b></em></span>我的留言</a></li><li><a href="#"><span class="tips">新通知<em class="num"><b><%=items.arrivalNewNotice%></b></em></span>到货通知</a></li><li><a href="#"><span class="tips">新通知<em class="num"><b><%=items.reduceNewNotice%></b></em></span>降价提醒</a></li></ul>',quickPop = quickShell.find('#quick_links_pop'),quickDataFns ={
//购物信息message_list:{
title:'购物车',content:'<div class="ibar_plugin_content"><div class="ibar_cart_group ibar_cart_product"><div class="ibar_cart_group_header"><span class="ibar_cart_group_title">模板堂</span><a href="#">我的购物车</a></div><ul><li class="cart_item"><div class="cart_item_pic"><a href="#"><img src="images/xiez.jpg" /></a></div><div class="cart_item_desc"><a href="#" class="cart_item_name">夏季透气真皮豆豆鞋反绒男士休闲鞋韩版磨砂驾车鞋英伦船鞋男鞋子</a><div class="cart_item_sku"><span>尺码：38码（精工限量版）</span></div><div class="cart_item_price"><span class="cart_price">￥700.00</span></div></div></li></ul></div><div class="cart_handler"><div class="cart_handler_header"><span class="cart_handler_left">共<span class="cart_price">1</span>件商品</span><span class="cart_handler_right">￥569.00</span></div><a href="#" class="cart_go_btn" target="_blank">去购物车结算</a></div></div>',init:$.noop}
,//我的资产history_list:{
title:'我的资产',content:'<div class="ibar_plugin_content"><div class="ia-head-list"><a href="#" target="_blank" class="pl"><div class="num">0</div><div class="text">优惠券</div></a><a href="#" target="_blank" class="pl"><div class="num">0</div><div class="text">红包</div></a><a href="#" target="_blank" class="pl money"><div class="num">￥0</div><div class="text">余额</div></a></div><div class="ga-expiredsoon"><div class="es-head">即将过期优惠券</div><div class="ia-none">您还没有可用的现金券哦！</div></div><div class="ga-expiredsoon"><div class="es-head">即将过期红包</div><div class="ia-none">您还没有可用的红包哦！</div></div></div>',init:$.noop}
,//给客服留言leave_message:{
title:'我关注的产品',content:$("#ibar_gzcp").html(),init:$.noop}
,mpbtn_histroy:{
title:'我的足迹',content:'<div class="ibar_plugin_content"><div class="ibar-history-head">共3件产品<a href="#">清空</a></div><div class="ibar-moudle-product"><div class="imp_item"><a href="#" class="pic"><img src="images/xiez.jpg" width="100" height="100" /></a><p class="tit"><a href="#">夏季透气真皮豆豆鞋反绒男士休闲鞋韩</a></p><p class="price"><em>￥</em>649.00</p><a href="#" class="imp-addCart">加入购物车</a></div><div class="imp_item"><a href="#" class="pic"><img src="images/xiez.jpg" width="100" height="100" /></a><p class="tit"><a href="#">夏季透气真皮豆豆鞋反绒男士休闲鞋韩</a></p><p class="price"><em>￥</em>649.00</p><a href="#" class="imp-addCart">加入购物车</a></div><div class="imp_item"><a href="#" class="pic"><img src="images/xiez.jpg" width="100" height="100" /></a><p class="tit"><a href="#">夏季透气真皮豆豆鞋反绒男士休闲鞋韩</a></p><p class="price"><em>￥</em>649.00</p><a href="#" class="imp-addCart">加入购物车</a></div></div></div>',init:$.noop}
,mpbtn_wdsc:{
title:'收藏的产品',content:'<div class="ibar_plugin_content"><div class="ibar_cart_group ibar_cart_product"><ul><li class="cart_item"><div class="cart_item_pic"><a href="#"><img src="images/xiez.jpg" /></a></div><div class="cart_item_desc"><a href="#" class="cart_item_name">夏季透气真皮豆豆鞋反绒男士休闲鞋韩版磨砂驾车鞋英伦船鞋男鞋子</a><div class="cart_item_sku"><span>尺码：38码（精工限量版）</span></div><div class="cart_item_price"><span class="cart_price">￥700.00</span><a href="#" class="sc" title="删除"><img src="images/sc.png" alt="删除" /></a></div></div></li></ul></div><div class="cart_handler"><a href="#" class="cart_go_btn jiaru" target="_blank">加入购物车</a></div></div>',init:$.noop}
,mpbtn_recharge:{
title:'手机充值',content:'<div class="ibar_plugin_content"><form target="_blank" class="ibar_recharge_form"><div class="ibar_recharge-field"><label>号码</label><div class="ibar_recharge-fl"><div class="ibar_recharge-iwrapper"><input type="text" name="19" placeholder="手机号码" /></div><i class="ibar_recharge-contact"></i></div></div><div class="ibar_recharge-field"><label>面值</label><div class="ibar_recharge-fl"><p class="ibar_recharge-mod"><span class="ibar_recharge-val">100</span>元</p><i class="ibar_recharge-arrow"></i><div class="ibar_recharge-vbox"><ul style="display:none;
"><li><span>10</span>元</li><li class="sanwe selected"><span>100</span>元</li><li><span>20</span>元</li><li class="sanwe"><span>200</span>元</li><li><span>30</span>元</li><li class="sanwe"><span>300</span>元</li><li><span>50</span>元</li><li class="sanwe"><span>500</span>元</li></ul></div></div></div><div class="ibar_recharge-btn"><input type="submit" value="立即充值" /></div></form></div>',init:$.noop}
}
;
//showQuickPopvarprevPopType,prevTrigger,doc = $(document),popDisplayed = false,hideQuickPop = function(){
if(prevTrigger){
prevTrigger.removeClass('current');
}
popDisplayed = false;
prevPopType = '';
quickPop.hide();
quickPop.animate({
left:280,queue:true}
);
}
,showQuickPop = function(type){
if(quickPopXHR && quickPopXHR.abort){
quickPopXHR.abort();
}
if(type !== prevPopType){
var fn = quickDataFns[type];
quickPop.html(ds.tmpl(popTmpl,fn));
fn.init.call(this,fn);
}
doc.unbind('click.quick_links').one('click.quick_links',hideQuickPop);
quickPop[0].className = 'quick_links_pop quick_' + type;
popDisplayed = true;
prevPopType = type;
quickPop.show();
quickPop.animate({
left:0,queue:true}
);
}
;
quickShell.bind('click.quick_links',function(e){
e.stopPropagation();
}
);
quickPop.delegate('a.ibar_closebtn','click',function(){
quickPop.hide();
quickPop.animate({
left:280,queue:true}
);
if(prevTrigger){
prevTrigger.removeClass('current');
}
}
);
//通用事件处理varview = $(window),quickLinkCollapsed = !!ds.getCookie('ql_collapse'),getHandlerType = function(className){
return className.replace(/current/g,'').replace(/\s+/,'');
}
,showPopFn = function(){
var type = getHandlerType(this.className);
if(popDisplayed && type === prevPopType){
return hideQuickPop();
}
showQuickPop(this.className);
if(prevTrigger){
prevTrigger.removeClass('current');
}
prevTrigger = $(this).addClass('current');
}
,quickHandlers ={
//购物车，最近浏览，商品咨询my_qlinks:showPopFn,message_list:showPopFn,history_list:showPopFn,leave_message:showPopFn,mpbtn_histroy:showPopFn,mpbtn_recharge:showPopFn,mpbtn_wdsc:showPopFn,//返回顶部return_top:function(){
ds.scrollTo(0,0);
hideReturnTop();
}
}
;
quickShell.delegate('a','click',function(e){
var type = getHandlerType(this.className);
if(type && quickHandlers[type]){
quickHandlers[type].call(this);
e.preventDefault();
}
}
);
//Return topvar scrollTimer,resizeTimer,minWidth = 1350;
function resizeHandler(){
clearTimeout(scrollTimer);
scrollTimer = setTimeout(checkScroll,160);
}
function checkResize(){
quickShell[view.width() > 1340 ? 'removeClass':'addClass']('quick_links_dockright');
}
function scrollHandler(){
clearTimeout(resizeTimer);
resizeTimer = setTimeout(checkResize,160);
}
function checkScroll(){
view.scrollTop()>100 ? showReturnTop():hideReturnTop();
}
function showReturnTop(){
quickPanel.addClass('quick_links_allow_gotop');
}
function hideReturnTop(){
quickPanel.removeClass('quick_links_allow_gotop');
}
view.bind('scroll.go_top',resizeHandler).bind('resize.quick_links',scrollHandler);
quickLinkCollapsed && quickShell.addClass('quick_links_min');
resizeHandler();
scrollHandler();
}
);
CSS代码(base.css):
@charset "utf-8";/*** fengbuy.com* 2013.06.06*/
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
ul,li{list-style-type:none;margin:0;padding:0;}
body{background:#f9f9f9;font:12px/1.5 "\5FAE\8F6F\96C5\9ED1",Arial,HELVETICA;min-width:1200px;_background-image:url(about:blank);_background-attachment:fixed;}
img{border:0;}
ol,ul{list-style:none;}
:link,:visited,ins{text-decoration:none;}
table{border-collapse:collapse;border-spacing:0;}
sub,sup{font-size:100%;vertical-align:baseline;}
blockquote,q{quotes:"\201C" "\201D" "\2018" "\2019";}
blockquote:before,blockquote:after,q:before,q:after{content:"";content:none;}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;resize:vertical;vertical-align:top;}
i,cite,em,address{font-style:normal;}
a{color:#333;text-decoration:none;}
a:hover{color:#09F;text-decoration:none;}
a.disabled,a.disabled:hover{cursor:default;pointer-events:none;}
.clearfix:before,.clearfix:after{display:block;content:"\200b";height:0;}
.clearfix:after{clear:both;}
.clearfix{*zoom:1;}
.hide,.tmpl{display:none;}
.wrap{margin:0 auto;width:1186px;}
/* old compatible,deprecated! */
.fl{float:left;}
.fr{float:right;}
.clear{clear:both;}
.bold{font-weight:bold;}
.f11{font-size:11px;}
.f14{font-size:14px;}
.tl{text-align:left;}
.tc{text-align:center;}
.tr,.a-right{text-align:right;}
.nowrap,.nobr{white-space:nowrap;word-wrap:normal;}
/* quick_links */
.quick_links_wrap,.mui-mbar-tabs{height:100%;width:320px;right:0;position:fixed;right:0;bottom:0;z-index:9;height:100%;-webkit-transition:width linear .4s;-moz-transition:width linear .4s;-ms-transition:width linear .4s;transition:width linear .4s;_position:fixed;_bottom:auto;_top:expression(documentElement.scrollTop+documentElement.clientHeight-this.offsetHeight-10);}
.quick_links_wraper.quick_links_dockright{margin-left:0;left:auto;right:4px;}
.mui-mbar-tabs i,.ibar_closebtn,.login_order,.login_favorite{display:inline-block;background:url(../images/ibar_sprites.png) no-repeat;cursor:pointer;height:19px;width:18px;vertical-align:top;position:absolute;}
.quick_links_panel{width:40px;height:100%;position:absolute;background:#444851;z-index:2;top:0;right:0;font-family:'microsoft yahei',arial;}
.quick_links_panel a{display:block;line-height:200px;width:40px;height:38px;text-decoration:none;color:#d8d8d8;font-size:12px;overflow:hidden;background-color:#444851;position:relative;overflow:hidden;top:0;left:0px;*left:-15px;z-index:1;margin:0;padding:0;}
.quick_links_panel .quick_toggle{position:absolute;bottom:0;left:0;width:40px;background:#444851;z-index:1;}
.quick_links_panel .mp_tooltip{height:38px;line-height:38px;width:92px;position:absolute;z-index:2;left:-121px;top:0;background:#444851;color:#d8d8d8;text-align:center;display:block;visibility:hidden;}
.quick_links_panel .mp_qrcode{padding:10px;width:148px;height:175px;top:-157px;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.4);border-radius:5px 0 0 5px;border-left:1px solid #ccc\0;border-top:1px solid #ccc\0;border-bottom:1px solid #ccc\0;z-index:3;position:absolute;left:-168px;left:-169px\0;display:none;}
.quick_links_panel .icon_arrow_white{position:absolute;right:-5px;top:172px;width:5px;height:9px;background-position:0 -253px;}
.quick_links_panel .icon_arrow_right_black{position:absolute;right:-5px;top:15px;width:5px;height:9px;background-position:0 -234px;overflow:hidden;}
.quick_toggle .return_top{display:none;}
.quick_links_allow_gotop .return_top{display:block;}
.quick_links{position:absolute;top:50%;left:0;margin-top:-190px;*margin-top:-220px;background:#444851;z-index:2;width:40px;}
.quick_links a.message_list{background:url(../images/ibar_sprites.png) no-repeat;line-height:16px;height:133px;background-position:-23px -225px;color:#fff;margin:20px 0 10px;}
.quick_links_min .quick_links_panel{right:280px;}
.quick_links li,.quick_toggle li{position:relative;display:block;left:0;top:0px;}
.history_list,.leave_message,.mpbtn_histroy,.mpbtn_wdsc,.mpbtn_recharge{margin-bottom:6px;}
.quick_links a:hover,.quick_links a.current,.quick_toggle a:hover{background:#ed145b;text-decoration:none;}
.quick_links a.message_list .span{width:16px;display:block;height:48px;margin:38px 0 0 14px;cursor:pointer;}
.quick_links a.message_list .cart_num{width:21px;height:21px;display:block;border-radius:50%;background:#ed145b;text-align:center;line-height:21px;margin:9px 0 0 10px;cursor:pointer;color:#fff;}
.quick_links i.setting{background-position:0 0;width:18px;height:19px;top:10px;left:11px;}
.quick_links a:hover i.setting,.quick_links .current i.setting{background-position:-33px 0;}
.quick_links i.message{background-position:0px -29px;width:23px;height:18px;top:11px;left:9px;}
.quick_links a:hover i.message,.quick_links .current i.message{background-position:-33px -29px;}
.quick_links i.cart{background-position:0px -29px;}
.quick_links i.view{width:18px;height:18px;background-position:0 -57px;top:10px;left:11px;}
.quick_links a:hover i.view,.quick_links .current i.view{background-position:-33px -57px;}
.quick_links .qa{width:18px;height:15px;background-position:0 -85px;top:11px;left:11px;}
.quick_links a:hover i.qa,.quick_links .current i.qa{background-position:-33px -85px;}
.quick_links .zuji{width:11px;height:24px;background-position:-4px -110px;top:8px;left:14px;}
.quick_links a:hover i.zuji,.quick_links .current i.zuji{background-position:-36px -110px;}
.quick_links .chongzhi{background:url(../images/chongzhi.png) no-repeat;width:35px;height:35px;top:2px;left:3px;}
.quick_links .wdsc{background:url(../images/wdsc.png) no-repeat;width:35px;height:35px;top:2px;left:3px;}
.quick_toggle .mpbtn_qrcode{width:18px;height:18px;top:11px;left:11px;background-position:0 -302px;}
.quick_toggle .top{background-position:0 -201px;width:17px;height:14px;top:12px;left:12px;}
.quick_toggle a:hover .top,.quick_links a.current .top{background-position:-33px -201px;}
.quick_toggle i.kfzx{width:15px;height:16px;top:11px;left:12px;background-position:0 -175px;}
.quick_toggle a:hover i.kfzx{background-position:-33px -175px;}
/* quick_links_pop */
.quick_links_pop{position:absolute;top:0;right:0;display:none;box-shadow:0 0 5px #999;border-radius:5px 0 0 5px;border:1px solid #999;behavior:url(js/htc.htc);}
.quick_links_pop .arrow,.quick_links_pop .arrow i{display:none;border-color:transparent #ddd;border-style:dashed solid;border-width:12px 0 12px 12px;font-size:0;height:0;width:0;position:absolute;left:100%;top:12px;}
.quick_links_pop .arrow i{border-color:transparent #f9fafc;margin:-12px 0 0 -13px;left:0;top:0;}
.quick_links_pop .fix_bg{display:none;border-top-width:0;border-radius:0 0 3px 3px;margin:0 0 -4px -250px;height:2px;width:500px;overflow:hidden;position:absolute;bottom:0;left:50%;}
.quick_links_pop .pop_panel{font-size:12px;width:100%;height:628px;position:relative;}
.quick_cart_list,.quick_history_list,.quick_links_pop .links,.quick_my_qlinks,.quick_message_list,.quick_leave_message,.quick_mpbtn_histroy,.quick_mpbtn_wdsc,.quick_mpbtn_recharge{position:absolute;width:280px;left:0;top:0;background:#fff;height:100%;display:block;}
.quick_cart_list .user_cart_inner,.quick_history_list .history_slider{display:block;border:0;margin:0;position:static;}
.quick_cart_list .user_cart_inner .del{display:none;}
.quick_history_list .title i{background-position:-170px -34px;}
.quick_leave_message .title i{background-position:-160px 0;}
.quick_leave_message .types{font-size:0;position:absolute;left:148px;top:18px;white-space:nowrap;}
.quick_leave_message .types input,.quick_leave_message .types label{font-size:12px;margin-right:20px;vertical-align:middle;white-space:nowrap;}
.quick_leave_message .types input{margin:-2px 3px 0 0;height:13px;width:13px;*margin-top:0;}
.quick_leave_message .txt{padding:15px 0;}
.quick_leave_message .txt textarea{display:block;background:#fff;border:1px solid #e8e8e8;border-radius:3px;box-shadow:0 1px 0 #fff,inset 0 1px 4px rgba(0,0,0,.1);margin:0 auto;padding:8px;height:68px;width:90%;}
.quick_leave_message .token{padding:0 0 14px 16px;height:26px;}
.quick_leave_message .token input{background:#fff;border:1px solid #ddd;padding:3px 4px;width:76px;vertical-align:middle;}
.quick_leave_message .token img{margin-left:5px;vertical-align:middle;}
.quick_leave_message .btns{float:right;margin-top:-42px;padding-right:16px;}
.quick_leave_message .btn{background-position:0 -356px;cursor:pointer;font-size:0;padding-left:20px;text-shadow:0 1px 0 #355ba9;overflow:visible;}
.quick_leave_message .btn:hover{background-position:0 -386px;}
.quick_leave_message .btn span{background-position:100% -356px;font-size:12px;padding-right:20px;*height:29px;}
.quick_leave_message .btn:hover span{background-position:100% -386px;}
.quick_links_pop .no_data{color:#333;font-size:14px;padding:35px 10px;text-align:center;}
.quick_links_pop .no_data i{display:inline-block;background:url(../images/cart_new.png) no-repeat 0 -188px;margin:0 10px 0 0;height:36px;width:60px;vertical-align:middle;}
.quick_links_pop .links li{border-top:1px solid #f1f1f1;vertical-align:top;}
.quick_links_pop .links a{display:block;background:#FCFCFC;color:#333;font-size:14px;padding:12px 15px;}
.quick_links_pop .links a:hover{background-color:#F2F3F4;color:#4467a7;}
.quick_links_pop .links .tips{float:right;color:#61c2ed;font-size:12px;}
.quick_my_qlinks .title i{background-position:-200px 0;height:22px;width:22px;}
.quick_message_list .title i{background-position:-200px -34px;height:22px;width:22px;}
.quick_message_list .no_data i{background-image:url(../images/quick_links_no_msg.png);background-position:0 0;height:45px;width:62px;}
/*修改*/
.ibar_plugin_title{height:38px;line-height:38px;border-bottom:1px solid #dedede;color:#333;font-size:14px;font-weight:700;width:267px;margin:0 auto;}
.ibar_closebtn{width:20px;height:20px;background-position:5px -267px;padding:5px;overflow:hidden;position:absolute;top:4px;right:4px;}
.ibar_plugin_content{position:absolute;width:100%;top:0;bottom:0;_height:expression((document.documentElement.clientHeight-100-40)+"px");overflow:hidden;}
.ibar_cart_group{width:250px;padding:0 20px 0 10px;background:#fff;}
.ibar_cart_group_header{height:34px;line-height:34px;border-bottom:1px solid #dedede;}
.ibar_cart_group_title{float:left;font-size:14px;}
.ibar_cart_group_header a{float:right;color:#ed145b}
.ibar_cart_group_header a:hover{text-decoration:underline;}
.cart_item{padding:15px 0;border-bottom:1px dotted #ddd;}
.cart_item_pic{position:relative;float:left;width:87px;height:87px;}
.cart_item_pic img{width:85px;height:85px;border:1px solid #f4f4f4;}
.cart_item_desc{float:left;width:150px;padding:3px 0 0 10px;}
.cart_item_name{display:inline-block;width:100%;height:36px;overflow:hidden;line-height:18px;color:#5c5c5c;}
.cart_item_sku{width:160px;height:24px;line-height:24px;color:#999;}
.cart_price{color:#ed145b;font-weight:700;font-family:Arial,Helvetica;}
.cart_handler{position:absolute;height:100px;bottom:0;width:100%;background:#fff;}
.cart_handler_header{width:260px;margin:8px 10px;float:left;}
.cart_handler_left{float:left;}
.cart_handler_right{float:right;font-weight:700;font-size:16px;font-family:Arial;color:#ed145b;}
.cart_go_btn{display:block;height:33px;line-height:33px;font-size:19px;font-family:SimHei;color:#fff;text-align:center;text-decoration:none;background:#ed145b;width:260px;margin:0 10px;float:left;}
.cart_go_btn:hover{color:#fff;}
.ia-head-list{height:66px;width:244px;margin-left:15px;background:#f3f3f3;overflow:hidden;zoom:1;margin-top:15px;color:#4a4a4a;}
.ia-head-list a{color:inherit;}
.ia-head-list .pl{width:80px;border-right:dashed 1px #ccc;height:47px;margin-top:10px;text-align:center;float:left;}
.ia-head-list .num{font-size:16px;height:26px;font-family:arial;}
.ia-head-list .money{border-right:0;}
.ga-expiredsoon{width:244px;margin-left:15px;margin-top:20px;}
.ga-expiredsoon .es-head{color:#5c5c5c;height:13px;border-left:3px solid #5c5c5c;padding-left:13px;}
.ia-none{background:url(../images/null_icon.png) no-repeat center 50px;text-align:center;padding-top:150px;padding-bottom:30px;font-family:"微软雅黑";font-size:16px;color:#797979;}
.jiaru{margin-top:40px;}
.ibar-history-head{position:relative;font-size:14px;border-bottom:solid 1px #dedede;height:37px;line-height:37px;width:255px;margin-left:10px;}
.ibar-history-head a{float:right;color:#ed145b;}
.ibar-history-head a:hover{text-decoration:underline;}
.imp_item{width:255px;padding-top:10px;border-bottom:dashed 1px #d5d5d5;overflow:hidden;padding-bottom:15px;margin-bottom:-1px;margin-left:10px;}
.imp_item .pic{float:left;display:inline;margin-right:10px;}
.imp_item .tit{height:40px;overflow:hidden;width:140px;word-break:break-all;}
.imp_item .tit a{color:#5c5c5c;line-height:18px;}
.imp_item .tit a:hover{color:#ed145b;line-height:18px;}
.imp_item .price{color:#ed145b;font-weight:700;margin-bottom:10px;}
.imp_item .price em{font-family:arial;font-size:14px;}
.imp_item .imp-addCart{background:#f32166;background:-webkit-linear-gradient(top,#fb2f72,#ed145b);color:#fff;width:90px;height:28px;float:left;display:inline;line-height:28px;text-align:center;}
.sc{float:right;line-height:22px;margin-right:7px;}
.ibar_recharge_form{width:220px;margin:0 auto;padding:15px 0;}
.ibar_recharge-field{border:1px solid #ddd;height:30px;margin-bottom:10px;}
.ibar_recharge-field label{width:40px;text-align:center;color:#fff;background:#737373;line-height:30px;float:left;}
.ibar_recharge-fl{position:relative;float:left;width:170px;padding-left:5px;}
.ibar_recharge-iwrapper{padding-top:7px;}
.ibar_recharge-iwrapper input{border:0;outline:0 none;}
i.ibar_recharge-contact{width:13px;height:14px;background:url(../images/contact.png);top:8px;right:5px;cursor:pointer;}
.ibar_recharge-mod{line-height:30px;color:#737373;font-weight:700;cursor:pointer;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;}
i.ibar_recharge-arrow{width:6px;height:3px;background:url(../images/arrow-down.png);top:14px;right:8px;cursor:pointer;}
.ibar_recharge-vbox{border:1px solid #ddd;background:#fff;position:absolute;left:0;top:30px;width:177px;}
.ibar_recharge-vbox li{float:left;width:68px;border-right:1px solid #ddd;padding:7px 10px;line-height:1;cursor:pointer;}
.ibar_recharge-vbox li.sanwe{border:0;}
.ibar_recharge-vbox .selected,.ibar_recharge-vbox li:hover{background:#ececec;}
.ibar_recharge-btn{text-align:center;padding-top:3px;}
.ibar_recharge-btn input{border:0;color:#fff;display:inline-block;width:115px;height:31px;font-size:16px;background:#f32166;background:-webkit-linear-gradient(top,#fb2f72,#ed145b);cursor:pointer;}
.ibar_recharge-btn input:hover{background:-webkit-linear-gradient(top,#fa578c,#f73776);}
.ibar_login_box{width:267px;height:185px;padding:10px;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.4);border-radius:5px 0 0 5px;border-left:1px solid #ccc\0;border-top:1px solid #ccc\0;border-bottom:1px solid #ccc\0;z-index:3;position:absolute;top:0px;left:-287px;left:-288px\0;display:none;}
.ibar_login_box .avatar_box{width:267px;overflow:hidden;height:120px;}
.status_login .avatar_imgbox{float:left;margin:6px 20px 0 5px;display:inline;}
.ibar_login_box .avatar_imgbox{width:100px;height:100px;border-radius:50%;overflow:hidden;}
.ibar_login_box .avatar_box p{font-size:14px;color:#333;text-align:center;}
.status_login .user_info{overflow:hidden;color:#333;padding-top:30px;line-height:24px;width:140px;float:left;}
.status_login .user_info li{height:24px;line-height:24px;overflow:hidden;white-space:nowrap;}
.ibar_login_box .login_btnbox{width:267px;height:79px;border-top:1px dotted #d5d5d5;overflow:hidden;padding-top:15px;clear:both;}
.ibar_login_box .login_btnbox a{width:94px;height:30px;line-height:30px;text-align:center;border:1px solid;color:#333;text-decoration:none;float:left;background-position:0 -408px;background-repeat:repeat-x;border-color:#e9e9e9;}
.ibar_login_box .login_btnbox .login_order{margin:0 10px 0 35px;}
.ibar_login_box .login_btnbox a:hover{text-decoration:none;background-position:0 -366px;border-color:#fccadb;background:none;}
.ibar_login_box .login_btnbox .login_favorite{border-color:#e9e9e9}
.ibar_login_box .icon_arrow_white{position:absolute;right:-5px;top:15px;width:5px;height:9px;background-position:0 -253px;}
/*飞入购物车*/
#plist{width:100%;height:auto;float:left;overflow:hidden;padding-top:10px;}
#plist li{float:left;width:240px;height:auto;overflow:hidden;padding:0px 20px 20px 0px;}
#plist .extra{padding:2px 0;height:16px;line-height:16px;overflow:hidden;color:#005aa0;float:left;padding-left:2px;}
#plist .extra a{float:left;font-size:12px;}
#plist .btns{margin-top:5px;zoom:1;float:left;padding-left:2px;}
#plist .btns a{float:left;height:19px;padding:0 9px;border:1px solid #ddd;border-radius:2px;margin:0 8px 0 0;background:#F7F7F7;line-height:18px;line-height:19px\9;text-align:center;text-decoration:none;color:#333;background:-moz-linear-gradient(top,#f7f7f7,#f2f2f2);background:-webkit-gradient(linear,0 0,0 100%,from(#f7f7f7),to(#f2f2f2));filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7f7f7",endColorstr="#f2f2f2");-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7f7f7",endColorstr="#f2f2f2")";}
#plist.plist-n7a .p-img{height:240px;}
.index_banner{position:relative;margin-bottom:20px;height:500px;}
.index_banner li{position:absolute;top:0;left:0;overflow:hidden;width:100%;height:500px;}
.index_banner li a{display:block;margin:0 auto;width:1000px;height:500px;}
.index_banner .clert{width:100%;position:absolute;z-index:99;bottom:0;left:0;height:30px;line-height:30px;text-align:center;}
.index_banner cite{z-index:999;height:15px;}
.index_banner cite span{display:inline-block;margin:0 4px;width:10px;height:10px;background-color:#666;text-indent:-999em;opacity:.8;cursor:pointer;border-radius:5px;}
.index_banner cite span.cur{background-color:#000;cursor:default;}
.flei{padding-left:28px;}
.flei a{display:block;background:url(store_images/xiala12497.gif) 125px 4px no-repeat;}
.flei a:hover{color:#666;text-decoration:none;}
.flei i{display:block;width:8px;height:8px;background:url(store_images/xiala12497.gif) -20px -102px no-repeat;float:left;margin:10px 8px 0 0;}
#plist .btns a.btn-compare{padding:0;}
#plist .btns a.btn-compare input{float:left;margin:3px 5px;}
#plist .btns a.btn-compare label{margin-right:5px;}
.main{width:1000px;margin:0 auto;}
.settleup-2013{height:34px;position:fixed;right:45px;z-index:900;}
.shoping-small{width:119px;}
.fly_item{border:1px solid #000;width:38px;height:38px;overflow:hidden;position:absolute;visibility:hidden;opacity:.5;filter:alpha(opacity=50);}
.shop_cart{width:106px;height:25px;line-height:25px;padding-top:8px;font-family:'microsoft yahei';font-size:12px;text-indent:34px;color:#000;position:absolute;right:50px;top:240px;}
分享到QQ
分享到微博
微信扫一扫
