- 资源介绍
- 更新记录
- 安装教程
html5移动端手机微信抢红包雨代码,打开页面,红包随机飘落进行抢红包,点击可查看中奖情况。
js代码
<script type="text/javascript"> $(document).ready(function() { var win = (parseInt($(".couten").css("width"))) - 60; $(".mo").css("height", $(document).height()); $(".couten").css("height", $(document).height()); $(".backward").css("height", $(document).height()); $("li").css({}); // 点击确认的时候关闭模态层 $(".sen a").click(function(){ $(".mo").css("display", "none") }); var del = function(){ nums++; // console.info(nums); // console.log($(".li" + nums).css("left")); $(".li" + nums).remove(); setTimeout(del,200) } var add = function() { var hb = parseInt(Math.random() * (3 - 1) + 1); var Wh = parseInt(Math.random() * (70 - 30) + 20); var Left = parseInt(Math.random() * (win - 0) + 0); var rot = (parseInt(Math.random() * (45 - (-45)) - 45)) + "deg"; // console.log(rot) num++; $(".couten").append("<li class='li" + num + "' ><a href='javascript:;'><img src='images/hb_" + hb + ".png'></a></li>"); $(".li" + num).css({ "left": Left, }); $(".li" + num + " a img").css({ "width": Wh, "transform": "rotate(" + rot + ")", "-webkit-transform": "rotate(" + rot + ")", "-ms-transform": "rotate(" + rot + ")", /* Internet Explorer */ "-moz-transform": "rotate(" + rot + ")", /* Firefox */ "-webkit-transform": "rotate(" + rot + ")",/* Safari 和 Chrome */ "-o-transform": "rotate(" + rot + ")" /* Opera */ }); $(".li" + num).animate({'top':$(window).height()+20},5000,function(){ //删掉已经显示的红包 this.remove() }); //点击红包的时候弹出模态层 $(".li" + num).click(function(){ $(".mo").css("display", "block") }); setTimeout(add,200) } //增加红包 var num = 0; setTimeout(add,3000); //倒数计时 var backward = function(){ numz--; if(numz>0){ $(".backward span").html(numz); }else{ $(".backward").remove(); } setTimeout(backward,1000) } var numz = 4; backward(); }) </script>
猜你喜欢
-
CSS3发光按钮特效代码
2021-02-13 -
HTML5彩色烟花网页背景动画特效
2021-02-13 -
HTML5鼠标控制树生长方向形状动画特效
2021-02-13 -
input输入框按照字母顺序筛选城市
2021-02-07 -
Bootstrap漂亮超酷动画进度条代码
2021-02-13 -
html5 svg+css3仿微信加载框动画特效
2021-02-07 -
HTML5 Canvas全屏彩色气泡动画特效
2021-02-13 -
html5 WebGL酷炫网页动画特效
2021-02-13 -
CSS3 3D运动步数统计样式代码
2021-02-13 -
CSS3带关闭按钮登录窗口代码
2021-02-07
-
CSS3 3D立体感指针时钟代码
2021-02-13 -
HTML5 Canvas绘制漂亮的樱花树背景特效
2021-02-07 -
css3绘制的打乒乓球动画特效
2021-02-07 -
jQuery随机选择音乐试题代码
2021-02-13 -
网易邮箱6.0介绍上下滚动动画效果插件jquery.ful
2021-02-07 -
css实现支持点击关闭提示框源代码
2021-02-07 -
js俄罗斯方块网页游戏代码
2021-02-07 -
可爱的CSS3卡通大象动画特效
2021-02-13 -
带过渡动画效果的CSS3分页代码
2021-02-13 -
vue.js在线网页渐变背景颜色选择工具代码
2021-02-07
猜你在找
1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!lyebiz@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
优源网 » html5移动端手机微信抢红包雨代码
优源网 » html5移动端手机微信抢红包雨代码
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 资源不能下载?
- 2021-02-13Hi,初次和大家见面了,请多关照!