基于jQuery实现 图片飞入购物车特效

在此之前 我还用了一个别人封装的类库 用起来感觉棒棒滴,完美的抛物线,后来问题来了 不能适应各种分辨率,那么美的抛物线也是白搭……

再后来我就只好另寻他法喽

<div class="end">终点</div>
<img src="####" class="picture" />

<script src="####/jquery.min.js"></script>
<script>
$(function(){
$(‘.picture‘).click(function(){
var flyElm = $(‘.lanrenzhijia‘).clone().css(‘opacity‘,‘0.7‘);
flyElm.css({
    ‘z-index‘: 9000,
    ‘display‘: ‘block‘,
    ‘position‘: ‘absolute‘,
    ‘top‘: $(‘.picture‘).offset().top +‘px‘,
    ‘left‘: $(‘.picture‘).offset().left +‘px‘,
    ‘width‘: $(‘.picture‘).width() +‘px‘,
    ‘height‘: $(‘.picture‘).height() +‘px‘
});
$(‘body‘).append(flyElm);
    flyElm.animate({
    top:$(‘.end‘).offset().top,
    left:$(‘.end‘).offset().left,
    width:50,
    height:50,
},‘slow‘);
});
});
</script>

原生的就是简洁美丽,用完之后的感觉是萌萌哒! duang! daung! daung!

时间: 2024-10-19 18:17:09

基于jQuery实现 图片飞入购物车特效的相关文章

基于jQuery悬停图片变色放大特效

分享一款基于jQuery悬停图片变色放大特效是一款响应式鼠标悬停图片放大效果代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style="width: 620px; margin: 40px auto 0 auto;"> <div class="img"> <div class="inner"> <div> <img src="image/1-1.

一款基于jQuery的图片场景标注提示弹窗特效

爱编程小编今天给大家分享一款基于jQuery的图片场景标注提示弹窗特效,这款实例适合在图片上标注某个物件,单击弹出详情说明,兼容360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗,不支持IE8及以下浏览器.效果非常不错.效果如下: 在线预览   源码下载 实现的过程. 这款实例要引用jquery和jquery ui库,还有一个实现的main.js库.需上的朋友可以点击上现的下载按钮下载来看看. html代码部分: <div class="container

基于jQuery+CSS3实现人物跳动特效

分享一款基于jQuery+CSS3实现人物跳动特效.这是一款类似gif图片效果的CSS3动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="charector-wrap " id="js_wrap"> <div class="charector"> </div> </div> <a class="run-xfast" h

基于jQuery遮罩图片hover翻转效果

基于jQuery遮罩图片hover翻转效果.这是一款基于jQuery+css3实现的鼠标经过遮罩图片翻转特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="index_hd"> <div class="fr hd_r major-list-outer"> <ul class="major-list"> <li class="major-item&qu

基于jQuery加载进度条特效代码

基于jQuery加载进度条特效代码是一款简单的加载新数据,获取数据jQuery进度条代码. 在线预览   源码下载 实现的代码. html代码: <div id="main"> <div class="demo"> <div class="bars"> <span id="bar">55</span> </div> <div class="

一款基于jQuery的图片分组切换焦点图插件

这是一款基于jQuery的图片切换焦点图插件,这款jQuery焦点图插件的特点是图片可以分组切换,也就是说一次可以切换多张图片,相比其他焦点图插件,它能节省更多的空间,可以向用户展示更多的图片,非常实用. 在线预览   源码下载 实现的代码. html代码: <div class="device"> <h2> <a href="javascript:;" class="pre">上一组</a><

基于jQuery HTML5添加到购物车代码

基于jQuery HTML5添加到购物车代码.这是一款支持选择颜色跟样式的添加购物车代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <header> <h1>Quick Add to Cart</h1> </header> <a href="#0" class="cd-cart"> <span>0</span> </a> <ul class

基于jquery右侧悬浮加入购物车代码

分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览   源码下载 实现的代码: <!--左侧产品parabola.js控制--> <div class="main"> <div id="plist"> <ul> <li> <div class="lh_wrap"> <div class="

10款基于jQuery的图片滑块焦点图插件

1.Material UI – Material Design CSS 框架 Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才是焦点.Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React 组件.可以作为 NPM 安装包,使用 browserify 和 reactify 的依赖管理和 J