本文以实例介绍聚美优品的加入购物车效果。
页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO，最主要是可以免费下载。1、查看该特效演示及免费下载，请访问【素材火】：http://www.sucaihuo.com/js/64.html
HTML
首先我们先放置三个商品：
......
接着我们放置一个抛物线图片及右侧购物车浮动层。
2、
jQuery
$(".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 src = $(this).parents("li").find('.p-img').find("img").attr("src");
$("#flyItem").find("img").attr("src", src);
// 滚动大小
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();
});
});
}
AD：真正免费，域名+虚机+企业邮箱=0元
已抢66257个
抢
已抢35942个
抢
已抢19831个
抢