本文以实例介绍聚美优品的加入购物车效果。
页面底部有演示、免费下载链接。若是想看更多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元
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
SublimeText3汉化版
中文版，非常好用
SublimeText3 Linux新版
SublimeText3 Linux最新版
禅工作室 13.0.1
功能强大的PHP集成开发环境
