最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

jQuery开启百宝箱摇头效果

来源:http://www.erdangjiade.com/ 沐浴春风 2015-06-02 08:01浏览(2214)

本文参考了一篇html5+css3(rotate)百宝箱开启动画效果,但兼容性不好,因此本文用js简单的写了这个开启百宝箱摇头效果,页面不是很好看,可以自行修改。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

jQuery开启百宝箱摇头效果
分类:其它特效 > 动画效果 难易:初级
查看演示

加我微信,拉你进VIP群学习:

下载资源 下载积分: 30 积分

我们在页面上放置一个背景旋转.bg,未开启的百宝箱#gift及提示#tips

<div class="bg"></div>
<div class="open-has ">
    <div class="tips" id="tips">
        <i class="arrow"></i>
    </div>
</div>
<div class="gift" id="gift"></div>

jQuery

$(function() {
    $("#gift").click(function() { //点击百宝箱
        shake($(this)); //摇头效果
        $("#tips").fadeOut(1000); //隐藏“点击开启百宝箱提示”
        $(this).animate({ //摇头后向下滑动
            top: '320px'
        },
        500,
        function() {
            $(this).css("backgroundImage", "url(img/2.png)"); //替换开启后的图片
            alert("恭喜获得300¥!")
        });
    })
})

摇头效果

function shake(obj) {
    box_left = parseInt(obj.css("left")); //获取当前对象左边距离
    for (var i = 1; 6 >= i; i++) { //左右摇动各3次
        obj.animate({
            left: box_left - (60 - 10 * i)
        },
        70);
        obj.animate({
            left: box_left + 2 * (60 - 10 * i)
        },
        70);
    }
}
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/139.html
评论0
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

1 2