jquery商城購物車右側懸浮加入購物車動畫效果
<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>
<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>