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

发布时间：2018-08-15 21:29:49 所属栏目：聚会来源：站长网

导读：本例给大家介绍 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.0391zz.com/html/juhui/juhui/2019/1106/145109.html" target="_blank">聚焦魔都的观象台、2020上海餐饮连锁加盟展</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/1114/215760.html" target="_blank">高交会：高新企业源中瑞在此出展区块链BAAS技术</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/1124/216812.html" target="_blank">网站优化过程中常见违规行为</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/0703/203956.html" target="_blank">【确定了】CIO班15周年年会等你来！</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/0111/172154.html" target="_blank">推动安全高效能源体系建设多个行业组织联合打造能源电力领</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/0724/205690.html" target="_blank">干货笔记|717新渠道大会27位嘉宾分享的干货合集</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/0331/197145.html" target="_blank">2020第6届深圳国际互联网与电子商务博览会（CIE）</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/0716/204887.html" target="_blank">上海防疫物资用品展7月30日即将召开-欢迎莅临参观</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/1124/216820.html" target="_blank">一文秒懂python正则表达式常用函数</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2018/1025/99711.html" target="_blank">代码简洁的模态窗口,可拖动、拽的层代码</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.0391zz.com/html/juhui/juhui/2020/1029/213907.html" target="_blank">11月19-21日深圳国际全触与显示展|这些触摸屏和显</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/0703/203949.html" target="_blank">聚焦“复工后企业的年度战略规划” 清科创业学院</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2019/0722/130042.html" target="_blank">单体酒店“被连锁”并非唯一出路，参差多态或许是</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/1215/218442.html" target="_blank">2020电脑显示器排行榜：平价办公、电竞品牌分析</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2018/0918/97993.html" target="_blank">jQuery动态隐藏Div的代码，淡入出动画效果</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/1126/217039.html" target="_blank">sem竞价的常见误区</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/0703/203962.html" target="_blank">2020中国互联网大会第三场会前沙龙智慧交通专场在</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/1130/217332.html" target="_blank">核心关键词如何选择和定位优化</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/1106/214893.html" target="_blank">网站title标题文章标题打造的技巧</a></li><li><a href="https://www.0391zz.com/html/juhui/juhui/2020/1124/216873.html" target="_blank">SEO如何发外链使页面快速收录</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.0391zz.com/ All Rights Reserved. 焦作站长网</p> <p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p> </div> </body> </html>