zoukankan      html  css  js  c++  java
  • JQuery 浮标动画

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>添加物品的浮标动画</title>
        <script src="js/jquery-1.12.4.min.js"></script>
        <script>
            
            $(function(){
    
                var $cartPostion = $("#cart").offset();
                var $cartWidth = $("#cart").width();
                var $cartHeight = $("#cart").height();
                //此处根据情况获取长宽, 或者inner 或者outer 或者outer(true)
    
                var $pW = $("#point").width();
                var $pH = $("#point").height();
                // console.log ( $cartPostion );
    
                //点击元素, 调用函数
                $("#goods").click(function(){
                    //锁定元素位置.定位红点位置且显示
                    var iPostion = $(this).offset();
                    var iWidth = $(this).width();
                    var iHeight = $(this).height();
                    // alert(iPostion.left)
                    // offset获取的是字典对象, 调用的话使用.跟随需要调用的key:left;top
    
                    // alert(parseInt(iPostion.left+iWidth/2-$pW/2))
                    //定位红点位置.
                    $("#point").css({
                        'left':parseInt(iPostion.left+iWidth/2-$pW/2),
                        'top':parseInt(iPostion.top+iHeight/2-$pH/2),
                        'display':'block',
                        //此处 直接更改属性display为block和使用函数show()达成的效果一样.
                    });
                        // $("#point").show();
                        //数值计算的时候, 应用parseInt转成整数.
    
    
                    //计算购物车位置,与元素位置差
                    $("#point").animate({
                        left:parseInt( $cartPostion.left+$cartWidth/2-$pW/2 ),
                        top:parseInt( $cartPostion.top+$cartHeight/2-$pH/2 ),
                    },200,function(){
    
                        $("#point").css({'display':'none'});
                        var iNum = $("#num").html();
                        iNum++;
                        $("#num").html(iNum)
    
                    })
    
                    //设置红点运动轨迹,画面结束数量增加
    
                })
    
            })    
    
    
        </script>
    
        <style>
            #goods{
                width: 100px;
                height: 100px;
                margin: 200px;
                background: tan;
                text-align: center;
                font: 30px/100px "Microsoft Yahei";
                cursor: pointer;
            }
    
            #cart{
                width: 100px;
                height: 40px;
                background-color: cyan;
                text-align: center;
                font: 16px/40px "Microsoft Yahei";
                position: absolute;
                right: 20px;
                top: 20px;
            }
            #point{
                width: 20px;
                height: 20px;
                background-color: red;
                display: none;
                position: absolute;
                left: 0;
                top: 0;
                opacity: 0.5;
                z-index: 9999;
                border-radius: 35%;
            }
    
            #num{
                width: 40%;
                height: 100%;
                float: right;
                background: white;
                /*font: 24px/100% "Microsoft Yahei";*/
                color: red;
                border:2px dashed #000;
                box-sizing: border-box;
            }
    
        </style>
    </head>
    <body>
        <div id="goods">商品</div>
        <div id="point"></div>
        <div id="cart">购物车
            <div id="num">0</div>
        </div>
    
    </body>
    </html>
  • 相关阅读:
    mysql 远程登陆不上
    hdu 5339 Untitled【搜索】
    SqlServer 书目
    passwordauthentication yes
    oracle 11g RAC ocfs2
    Oracle 11g RAC database on ASM, ACFS or OCFS2
    CentOS ips bonding
    Oracle 11g RAC features
    openStack 王者归来之 trivial matters
    openstack windows 2008 img
  • 原文地址:https://www.cnblogs.com/jrri/p/11347606.html
Copyright © 2011-2022 走看看