脚本宝典收集整理的这篇文章主要介绍了

vue模仿新年集福活动(移动端)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>自己随便写着玩的一个“集福”活动,没有后端配合,只是前端的一个效果展示,没有写入缓存,刷新后数据就没有了,主要功能有抽卡,点击卡片查看介绍,集齐之后合成卡片,增加抽卡次数,直接获取稀缺卡,增加稀缺卡获取概率等功能。<br />下面是截图和源码;</p> <p><span class="img-wrap"><img data-src="/img/bVboxD9?w=374&amp;h=635" src="/img/bVboxD9?w=374&amp;h=635" alt="clipboard.png" title="clipboard.png" style="cursor: pointer; display: inline;"></span></p> <p><a href="http://www.zdhx-edu.com/mobile/collectFu/index.html" rel="nofollow noreferrer" target="_blank">在线预览(不保证一直能打开)</a></p> <p>缺少图片,补齐图片后就正常了<br /><a href="https://jsfiddle.net/zhoou/4y6nqwsf/2/" rel="nofollow noreferrer" target="_blank">https://jsfiddle.net/zhoou/4y...</a><button class="btn btn-xs btn-default ml10 preview" data-url="zhoou/4y6nqwsf/2/" data-typeid="0">点击预览</button></p> <p>源码下载地址:<br />链接: <a href="https://pan.baidu.com/s/10rNR5UnHmbssNFbT5PQ0ag" rel="nofollow noreferrer" target="_blank">https://pan.baidu.com/s/10rNR...</a> 提取码: gk22 </p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p>PS:一些小问题:有时打开后li的高度没有及时撑开,会显示成一坨,刷新一下就可以了,不知道有没有更好的控制高度的解决方案(翻转效果元素要绝对定位,导致li的高度不能动态调整,我使用js算的)</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

vue模仿新年集福活动(移动端)

全部内容,希望文章能够帮你解决

vue模仿新年集福活动(移动端)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过