我们在页面上放置一个背景旋转.bg，未开启的百宝箱#gift及提示#tips
![[php框架] Smarty基础商品教程 Smarty入门教程 Smarty框架教程 共10课](https://jy.tp.yuanmeng.life/uploads/images/20210319/f47dc487eb949895833cd962fddc6a8b.jpg)
附件
<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>$(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);
}
}*
回帖描述：*
链接类型：*
下载链接：
验证通过自动获取下载链接
*
描述：*
回帖描述：*
链接类型：*
阅读权限：*
下载链接：
微信客服
QQ客服
QQ群
