码迷,mamicode.com
首页 > 其他好文 > 详细

飞入购物车功能

时间:2017-09-27 13:21:33      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:show   eve   idt   分享   es2017   htm   inf   .com   ade   

最近开发无形的系统,做飞入购物车的功能

技术分享

 

抛物线飞入购物车

引用插件http://www.jq22.com/jquery-info4560

$(function() {
    var offset = $("#end").offset();  //结束的地方的元素
    $(".btn-smb").click(function(event){   //是$(".btn-smb")这个元素点击促发的 开始动画的位置就是这个元素的位置为起点
        var addcar = $(this);
        var img = addcar.parentsUntil("li").find(‘img‘).attr(‘src‘);
        var flyer = $(‘<img class="u-flyer" src="‘+img+‘">‘);
        flyer.fly({
            start: {
                left: event.pageX,
                top: event.pageY
            },
            end: {
                left: offset.left+10,
                top: offset.top+10,
                width: 0,
                height: 0
            },
            onEnd: function(){
                $("#msg").show().animate({width: ‘250px‘}, 300).fadeOut(1000);
//按钮变成禁用 addcar.css(
"cursor","default").attr("disabled","disabled").unbind(‘click‘);
//数字+1 $(
"#num").html(parseInt($("#num").html())+1);
//按钮文字变成一已预订 addcar.text(
"已预定"); this.destory(); } }); }); });

 

飞入购物车功能

标签:show   eve   idt   分享   es2017   htm   inf   .com   ade   

原文地址:http://www.cnblogs.com/rong88/p/7600741.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!