红包飞过效果

最新推荐文章于 2020-12-24 17:40:45 发布

想做大牛的蜗牛

最新推荐文章于 2020-12-24 17:40:45 发布

阅读量613

点赞数

分类专栏：前端文章标签： animate Math-atan

本文链接：https://blog.csdn.net/xiaowoniuqiren/article/details/73551449

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

点击产生红包，到指定位置

这里写图片描述

如图所示，点击按钮就产生红包，然后飞向指定位置，需要有一个斜线的角度，还需要知道点击的位置和红包的位置

html代码

<body>
    <ul class="ul">
        <li class=""><button onclick="hong.getBao(event,this)">点击置评</button></li>
        <li class=""><button onclick="hong.getBao(event,this)">点击置评</button></li>
        <li class=""><button onclick="hong.getBao(event,this)">点击置评</button></li>
        <li class=""><button onclick="hong.getBao(event,this)">点击置评</button></li>
    </ul>
    <div class="hongbao">
        <p class="text-center">88.88</p>
        <p class="text-center">恭喜获得红包</p>
    </div>
</body>

css代码

ul{
	width: 1200px;
	background-color: #ffffff;
	margin: 30px auto;
	padding: 20px 30px;
}
ul li{
	list-style: none;
	padding: 20px;
	border:1px solid #ebebeb;
}
.text-center{
	text-align: center;
}
.hongbao{
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 100px;
	height: 100px;
	background-color: red;
	color: #fff;
}
.package{
	position: fixed;
}

JS代码

var hong={
    getBao:function(event,ob){
        // alert('ces');

        var package='<p class="package"><img src="images/hong.png"/></p>';
        $(ob).parent().append(package);
        // var win_height=$(document).height()-80;  //屏幕的高度
        // var win_width=$(document).width()-80;  //屏幕的宽度
        // console.log(event.x+','+event.y+','+win_height+','+win_width);
        // $(".hongbao").position().top;  //红包的高度
        // $(".hongbao").position().left; //红包的宽度
        // console.log($(".hongbao").position().top+','+$(".hongbao").position().left);
        //

        var diff_x = event.x - $(".hongbao").position().left;
        var diff_y = event.y - $(".hongbao").position().top;
        var data = 360*Math.atan(diff_y/diff_x)/(2*Math.PI);   //获取红包飞的角度
        // console.log(data);
        $('.package').css({
            'position':'fixed',
            'left': event.x + 'px',
            'top' : event.y + 'px',
            'transform': "rotate("+data+"deg)"
        });
        $('.package').animate({
            'left':$(".hongbao").position().left +'px',
            'top':$(".hongbao").position().top+'px'
        },9800,function(){
            $(ob).parents().children('.package').remove();
        });

    }
}