• jQuery仿天猫完美加入购物车


    转载自:http://www.iteye.com/topic/1138064

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head> 
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
            <title>jQuery仿天猫完美加入购物车</title>
            <meta name="keywords" content="jquery购物车,加入购物车" />
            <meta name="description" content="jquery加入购物车帅气效果,和天猫、聚美优品类似" />
            <link rel="stylesheet" type="text/css" href="http://www.sucaihuo.com/jquery/css/common.css" />
            <link rel="stylesheet" type="text/css" href="css/demo.css" />
        </head>
        <body>
            <div class="head">
                <div class="head_inner">
                    <a class="logo" href="http://www.sucaihuo.com">
                        <img alt="素材火logo" src="http://www.sucaihuo.com/Public/images/logo.jpg">
                    </a>
                </div>
            </div>
            <div class="container">
                <h2 class="title"><a href="http://www.sucaihuo.com/jquery/demo/1/">jQuery仿天猫完美加入购物车</a></h2>
                <div class="demo clearfix">
                    <div class="per">
                        <img src="images/1.jpg" width="180" height="240" alt="图片二"/>
                        <h3>¥<span>259.00</span></h3>
                        <div class="title">春款真皮坡跟大码单鞋内增高女士鞋子</div>
                        <a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
                    </div>
                    <div class="per">
                        <img src="images/2.jpg" width="180" height="240" alt="图片二"/>
                        <h3>¥<span>136.00</span></h3>
                        <div class="title">韩国代购情侣棉衣棉服女款韩版羊羔毛大衣</div>
                        <a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
                    </div>
                    <div class="per">
                        <img src="images/3.jpg" width="180" height="240" alt="图片三"/>
                        <h3>¥<span>¥728.00</span></h3>
                        <div class="title">冬季运动情侣羽绒棉马甲男士薄马甲</div>
                        <a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
                    </div>
                    <div class="per">
                        <img src="images/4.jpg" width="180" height="240" alt="图片四"/>
                        <h3>¥<span>119.00</span></h3>
                        <div class="title">原创-城市简约文艺纯色棉麻新中式小立领</div>
                        <a href="javascript:void(0);" class="button orange addcart">加入购物车</a>
                    </div>
                </div>
            </div>
            <div class="cart-sidebar">
                <div class="cart">
                    <i id="icon-cart"></i>
                    <span>购物车</span>
                </div>
            </div>
            <div id="tip">成功加入购物车!</div>
            <div class="foot">
                Powered by sucaihuo.com  本站皆为作者原创,转载请注明原文链接:<a href="http://www.sucaihuo.com" target="_blank">www.sucaihuo.com</a>
            </div>
            <script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script>
            <script src="js/jquery.fly.min.js"></script>
            <!--[if lte IE 9]>
            <script src="js/requestAnimationFrame.js"></script>
            <![endif]-->
            <script type="text/javascript">
                $(function() {
                    var offset = $("#icon-cart").offset();
                    $(".addcart").click(function(event) {
                        var img = $(this).parent().children('img').attr('src');//获取当前点击图片链接
                        var flyer = $('<img class="flyer-img" src="' + img + '">');//抛物体对象
                        flyer.fly({
                            start: {
                                left: event.pageX, //抛物体起点横坐标
                                top: event.pageY////抛物体起点纵坐标
                            },
                            end: {
                                left: offset.left + 10, //抛物体终点横坐标
                                top: offset.top + 10, //抛物体终点纵坐标
                            },
                            onEnd: function() {
                                $("#tip").show().animate({ '200px'}, 300).fadeOut(500);//成功加入购物车动画效果
                                this.destory();//销毁抛物体
                            }
                        });
                    });
                });
            </script>
        </body>
    </html>

    dome.css

    .demo{width:830px; margin:0 auto}
    .cart-sidebar{z-index: 1999;width: 35px;color: #FFFFFF;position: fixed;top: 0;right: 0;background: #000000;height:100%;}
    .cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;}
    .cart span{display:block;width:20px;margin:0 auto;}
    .cart i{width:35px;height:35px;display:block; background:url(../images/cart.png) no-repeat;}
    #tip{position:fixed; top:300px; right:35px; z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none}
    .per{float:left; border:1px solid #e0e0e0; text-align:center;padding:10px 0;width:198px;margin-right: 5px}
    .per .title{  text-align:left;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;width:180px;margin:0 0 10px 10px}
    .per:hover{border:1px solid #f90}
    .per h3{line-height:32px; font-size:14px; color:#f30;font-weight:500}
    .per h3 span{font-size:20px}
    .flyer-img{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;}
    
    .button {
        display: inline-block;
        outline: none;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        font: 16px/100% 'Microsoft yahei',Arial, Helvetica, sans-serif;
        padding: .5em 2em .55em;
        text-shadow: 0 1px 1px rgba(0,0,0,.3);
        -webkit-border-radius: .5em; 
        -moz-border-radius: .5em;
        border-radius: .5em;
        -webkit-per-shadow: 0 1px 2px rgba(0,0,0,.2);
        -moz-per-shadow: 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 1px 2px rgba(0,0,0,.2);
    }
    /*****加入购物车按钮****/
    .button:hover {
        text-decoration: none;
    }
    .orange {
        color: #fef4e9;
        border: solid 1px #da7c0c;
        background: #f78d1d;
        background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
        background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
    }
    .orange:hover {
        background: #f47c20;
        background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
        background: -moz-linear-gradient(top,  #f88e11,  #f06015);
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
    }

    jquery.fly.min.js

    /*! fly - v1.0.0 - 2014-12-22
    * https://github.com/amibug/fly
    * Copyright (c) 2014 wuyuedong; Licensed MIT */
    !function(a){a.fly=function(b,c){var d={version:"1.0.0",autoPlay:!0,vertex_Rtop:20,speed:1.2,start:{},end:{},onEnd:a.noop},e=this,f=a(b);e.init=function(a){this.setOptions(a),!!this.settings.autoPlay&&this.play()},e.setOptions=function(b){this.settings=a.extend(!0,{},d,b);var c=this.settings,e=c.start,g=c.end;f.css({marginTop:"0px",marginLeft:"0px",position:"fixed"}).appendTo("body"),null!=g.width&&null!=g.height&&a.extend(!0,e,{f.width(),height:f.height()});var h=Math.min(e.top,g.top)-Math.abs(e.left-g.left)/3;h<c.vertex_Rtop&&(h=Math.min(c.vertex_Rtop,Math.min(e.top,g.top)));var i=Math.sqrt(Math.pow(e.top-g.top,2)+Math.pow(e.left-g.left,2)),j=Math.ceil(Math.min(Math.max(Math.log(i)/.05-75,30),100)/c.speed),k=e.top==h?0:-Math.sqrt((g.top-h)/(e.top-h)),l=(k*e.left-g.left)/(k-1),m=g.left==l?0:(g.top-h)/Math.pow(g.left-l,2);a.extend(!0,c,{count:-1,steps:j,vertex_left:l,vertex_top:h,curvature:m})},e.play=function(){this.move()},e.move=function(){var b=this.settings,c=b.start,d=b.count,e=b.steps,g=b.end,h=c.left+(g.left-c.left)*d/e,i=0==b.curvature?c.top+(g.top-c.top)*d/e:b.curvature*Math.pow(h-b.vertex_left,2)+b.vertex_top;if(null!=g.width&&null!=g.height){var j=e/2,k=g.width-(g.width-c.width)*Math.cos(j>d?0:(d-j)/(e-j)*Math.PI/2),l=g.height-(g.height-c.height)*Math.cos(j>d?0:(d-j)/(e-j)*Math.PI/2);f.css({k+"px",height:l+"px","font-size":Math.min(k,l)+"px"})}f.css({left:h+"px",top:i+"px"}),b.count++;var m=window.requestAnimationFrame(a.proxy(this.move,this));d==e&&(window.cancelAnimationFrame(m),b.onEnd.apply(this))},e.destory=function(){f.remove()},e.init(c)},a.fn.fly=function(b){return this.each(function(){void 0==a(this).data("fly")&&a(this).data("fly",new a.fly(this,b))})}}(jQuery);

    效果演示地址:http://www.sucaihuo.com/jquery/demo/1/

  • 相关阅读:
    本地缓存方式
    iOS Touch ID 身份认证
    iOS之WKWebView
    [Objective-C]关联(objc_setAssociatedObject、objc_getAssociatedObject、objc_removeAssociatedObjects)
    iOS利用UIDocumentInteractionController和Quick Look打开或预览文档
    轮播图的无限轮播
    贝赛尔曲线UIBezierPath(后续)
    贝赛尔曲线UIBezierPath
    NSRunLoop的进一步理解
    CADisplayLink 及定时器的使用
  • 原文地址:https://www.cnblogs.com/yangzhilong/p/4516390.html
Copyright © 2020-2023  润新知