欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  php教程

jQuery仿聚美优品加入购物车效果

程序员文章站 2022-04-20 10:33:34
...
本文以实例介绍聚美优品的加入购物车效果。
jQuery仿聚美优品加入购物车效果

页面底部有演示、免费下载链接。若是想看更多js特效网站源码js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO,最主要是可以免费下载。1、
HTML
首先我们先放置三个商品:



  • ......
    接着我们放置一个抛物线图片及右侧购物车浮动层。

    jQuery仿聚美优品加入购物车效果

    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();
    });
    });
    }
    查看该特效演示及免费下载,请访问【素材火】:http://www.sucaihuo.com/js/64.html

    AD:真正免费,域名+虚机+企业邮箱=0元