文档章节

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

yope
 yope
发布于 2015/04/02 22:26
字数 199
阅读 3160
收藏 33

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

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

<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! 

© 著作权归作者所有

共有 人打赏支持
yope
粉丝 15
博文 40
码字总数 34264
作品 0
厦门
程序员
私信 提问
分享10个帮助你实现超酷特效的jQuery插件

日期:2012-4-4 来源:GBin1.com 今天我们这篇文章中将推荐给大家10个超酷的jQuery插件帮助大家实现超酷的jQuery特效,绝对超过其它的普通jQuery插件。希望大家喜欢! 1. jQuery Lens Flare...

gbin1
2012/04/05
0
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
11/04
0
0
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
10/29
0
0
jQuery实现飞入购物车功能

要实现的效果: 思路:点击商品,图片就会飞入购物车,不但变小,而且加入到购物车后消失 了,不但如此,商品的图片还在,所以我们使用克隆的方法,加入到购物车后清除购物车即可,然后购物车...

无忧you
06/26
0
0
2011年最新20个jQuery构建的超酷视觉效果教程

日期:2011/08/03 原文:line25.com 编译:Terry li - GBin1.com 作为web开发程序员来说,我们都非常喜欢jQuery构造的超酷视觉效果。在本篇GBin1文章中我们将精选一组jQuery效果教程。大家将...

gbin1
2011/08/03
383
0

没有更多内容

加载失败,请刷新页面

加载更多

20181213 上课截图

小丑鱼00
12分钟前
0
0
nginx+php-fpm配置后页面显示空白的解决方法以及用nginx和php-fpm解决“502 Bad Gateway”问题

https://stackoverflow.com/questions/15423500/nginx-showing-blank-php-pages For reference, I am attaching my location block for catching files with the .php extension: location ~......

Yao--靠自己
19分钟前
1
0
mac 没声音

somehow不时就会出现这种情况。之前都得重启。 其实可以直接在terminal里打以下命令: sudo kextunload /System/Library/Extensions/AppleHDA.kext sudo kextload /System/Library/Extension...

dubox
35分钟前
1
0
看完让你彻底搞懂Websocket原理

作者:Ovear 链接:https://www.zhihu.com/question/20215561/answer/40316953 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 额。。最高票答案没答到点...

时刻在奔跑
50分钟前
2
0
Spring Cloud Stream消费失败后的处理策略(一):自动重试

之前写了几篇关于Spring Cloud Stream使用中的常见问题,比如: 如何处理消息重复消费 如何消费自己生产的消息 下面几天就集中来详细聊聊,当消息消费失败之后该如何处理的几种方式。不过不论...

程序猿DD
52分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部