JS模仿Windows屏幕掩护，七彩的泡泡屏保

发布时间：2018-08-13 22:28:18 所属栏目：活动来源：站长网

导读：本例给各人先容 Java Script模仿实现windows的屏幕掩护结果，运行后可以看到结果，兼容IE6在内的险些全部赏识器，作者将JS技能施展的极尽描述，让我们这些网页建造初学者有种瞠乎其后的感受，可见只要专心去做，没有什么实现不了的结果，不管 jQuery 也好

　　本例给各人先容JavaScript模仿实现windows的屏幕掩护结果，运行后可以看到结果，兼容IE6在内的险些全部赏识器，作者将JS技能施展的极尽描述，让我们这些网页建造初学者有种“瞠乎其后”的感受，可见只要专心去做，没有什么实现不了的结果，不管jQuery也好，JS也好。

　　示例代码：

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>仿多彩变色泡泡屏幕掩护结果</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> html,body{border:none;overflow:hidden;height:100%;} body{background:url(/uploads/common/images/14402.jpg) bottom;} </style> </head> <body onload="Demo()"> <script> /** * JavaScript Bubbles * By EtherDream 2010 */ +function() { // 赏识器帮助 var _VER_ = navigator.userAgent; var _FF_ = /<b>Firefox</b>/.test(_VER_); var _IE6_ = /IE 6/.test(_VER_); var W3C = !!window.addEventListener; try{document.execCommand("BackgroundImageCache", false, true)}catch(e){} // 常量 var R = 111; //泡泡半径 var POW_RATE = 0.001; //赔偿概率 var POW_MIN = 0.1; //赔偿范畴(基于降生速率) var POW_MAX = 0.3; var START_X_MIN = 8; //X偏向降生速率范畴 var START_X_MAX = 12; var START_Y_MIN = 6; //Y偏向降生速率范畴 var START_Y_MAX = 8; var D2 = 4 * R * R; //圆心间隔^2的范畴.小于最小值则进入重叠状态 var rnd = Math.random; var arrBubs = []; var iBottom; var iRight; //function Init() //{ if(W3C) document.addEventListener("resize", handleResize, false); else window.attachEvent("onresize", handleResize); handleResize(); Timer(render, 17); / <p style="text-align:right;">（编辑：湖南网）</p> <p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p> </td> </tr> </table> </div> <div class="dede_pagess"><ul class="pagelist"></ul></div> <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div> <div class="g-box10"> <div class="t-2">相关内容</div> <ul class="b-box12"></ul> <ul class="b-box13"><li><a href="https://www.hunanwang.cn/html/huodong/20200711/612190.html" target="_blank">4458打造首个“地摊货源博览会”跟上这个期间</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20180813/367708.html" target="_blank">JS弹出层代码层居中并可以封锁和拖拽</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20201104/642755.html" target="_blank">SEO的意义乳化液做SEO优化</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20201130/651948.html" target="_blank">网站栏目页seo优化应该怎么做好</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20191210/486871.html" target="_blank">2019全球架构师峰会（北京站）闭幕，由极客邦科技主办</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20201103/642269.html" target="_blank">奈何优化网址URL才气起到最好的结果</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20200704/609690.html" target="_blank">4458打造首个“地摊货源展览会”跟上这个时代</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20180814/367941.html" target="_blank">又一款跟从鼠标结果，光标指针下的“方块”</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20190221/401179.html" target="_blank">新一代穿墙王 AmpliFi无线包围套装评测</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20191205/484252.html" target="_blank">2019年36氪新经济之王大会落幕，嗨学网荣获职业教诲之王称谓</a></li><div class="cl"></div></ul> </div> </div> </div> <div class="right-1 fr"> <div class="g-box8"> <div class="t-2">推荐文章</div> <ul></ul> </div> <div class="g-box11"> <div class="t-2">站长推荐</div> <ul class="b-box7"><li><a href="https://www.hunanwang.cn/html/huodong/20191213/489312.html" target="_blank">我的网站为何降权原本是点击题目</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20201202/652642.html" target="_blank">私域流量五大误区</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20190202/398249.html" target="_blank">自信更担当！美国CES展上的新爱国者情怀</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20200114/506923.html" target="_blank">新零售岑岭论坛：纳斯机构解读电商直播新零售“下</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20170716/328789.html" target="_blank">博科助力澳大利亚ISP拓展宽带网络商机</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20201029/640505.html" target="_blank">笨人SEO 笨人能做好搜刮引擎优化吗？</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20180820/370634.html" target="_blank">用CSS实现交错的两个层，网页机关代码</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20190220/400812.html" target="_blank">新一代穿墙王 AmpliFi无线覆盖套装评测</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20180816/368862.html" target="_blank">鼠标颠末期，改变表格行、列的配景颜色</a></li><li><a href="https://www.hunanwang.cn/html/huodong/20201208/655670.html" target="_blank">更新了几年的站没有流量是咋回事</a></li></ul> </div> <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 }); </script> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div> <div class="g-box3 u-3"> <div class="t-1">热点阅读</div> <ul class="b-box2"></ul> </div> <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div> </div> <div class="cl"></div> </div> <div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div> <div class="footer"> <p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p> <p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p> <p>Copygight © 2008-2022 https://www.hunanwang.cn/ All Rights Reserved. 湖南网</p> <p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p> </div> </body> </html>