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

本文以实例介绍聚美优品的加入购物车效果。


页面底部有演示、免费下载链接。若是想看更多js特效、网站源码、 js教程请访问【素材火】 http://www.sucaihuo.com/js 还有演示DEMO，最主要是可以免费下载。1、<br> HTML<br> 首先我们先放置三个商品：<br> <li> <br>     <div> <br>         <div> <br>             <a> <br>                 <img src="/static/imghwm/default1.png" data-src="http://img10.360buyimg.com/n8/jfs/t796/330/522006924/150196/c7b07d46/552b6b96N0f14084b.jpg" class="lazy" alt="jQuery仿聚美优品加入购物车效果" >                 width="220" height="282" /> <br>             </a> <br>         </div> <br>         <div> <br>             <a> <br>                 花开二度2015新款夏装韩版波西米亚风女装中长款无袖宽松雪纺沙滩 <br>             </a> <br>         </div> <br>         <div> <br>             <a> <br>                 加入购物车 <br>             </a> <br>         </div> <br>     </div> <br> </li> <br> ......<br> 接着我们放置一个抛物线图片及右侧购物车浮动层。<br> <div> <br>   <img src="/static/imghwm/default1.png" data-src="images/item-pic.jpg" class="lazy" alt="jQuery仿聚美优品加入购物车效果" > <br> </div> <br> 2、<br> jQuery<br> $(".quick_links_panel li").mouseenter(function() { <br>     $(this).children(".mp_tooltip").animate({ <br>         left: -92, <br>         queue: true <br>     }); <br>     $(this).children(".mp_tooltip").css("visibility", "visible"); <br>     $(this).children(".ibar_login_box").css("display", "block"); <br> }); <br> $(".quick_links_panel li").mouseleave(function() { <br>     $(this).children(".mp_tooltip").css("visibility", "hidden"); <br>     $(this).children(".mp_tooltip").animate({ <br>         left: -121, <br>         queue: true <br>     }); <br>     $(this).children(".ibar_login_box").css("display", "none"); <br> }); <br> $(".quick_toggle li").mouseover(function() { <br>     $(this).children(".mp_qrcode").show(); <br> }); <br> $(".quick_toggle li").mouseleave(function() { <br>     $(this).children(".mp_qrcode").hide(); <br> }); <br>  <br> // 元素以及其他一些变量 <br> var eleFlyElement = document.querySelector("#flyItem"), <br> eleShopCart = document.querySelector("#shopCart"); <br> var numberItem = 0; <br> // 抛物线运动 <br> var myParabola = funParabola(eleFlyElement, eleShopCart, { <br>     speed: 400, <br>     //抛物线速度 <br>     curvature: 0.0008, <br>     //控制抛物线弧度 <br>     complete: function() { <br>         eleFlyElement.style.visibility = "hidden"; <br>         eleShopCart.querySelector("span").innerHTML = ++numberItem; <br>     } <br> }); <br> // 绑定点击事件 <br> if (eleFlyElement && eleShopCart) { <br>  <br>     [].slice.call(document.getElementsByClassName("btnCart")).forEach(function(button) { <br>         button.addEventListener("click", <br>         function(event) { <br>             var src = $(this).parents("li").find('.p-img').find("img").attr("src"); <br>             $("#flyItem").find("img").attr("src", src); <br>             // 滚动大小 <br>             var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft || 0, <br>             scrollTop = document.documentElement.scrollTop || document.body.scrollTop || 0; <br>             eleFlyElement.style.left = event.clientX + scrollLeft + "px"; <br>             eleFlyElement.style.top = event.clientY + scrollTop + "px"; <br>             eleFlyElement.style.visibility = "visible"; <br>  <br>             // 需要重定位 <br>             myParabola.position().move(); <br>         }); <br>     }); <br> }查看该特效演示及免费下载，请访问【素材火】：http://www.sucaihuo.com/js/64.html

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