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

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

导读：本例给大家介绍 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.hxwgxz.com/html/huodong/20170616/464559.html" target="_blank">DCCache助运营商缓解资源紧张</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20180822/488154.html" target="_blank">网页拖动模块，Js层拖拽，加减号收缩和展开</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20200222/596891.html" target="_blank">年入千万小红书的魔力真的那么大吗</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201217/671183.html" target="_blank">自我营销做个人品牌仅需做好四个步骤</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201130/668033.html" target="_blank">网站优化的整个完整步骤</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20191206/568097.html" target="_blank">布局首届世界5G大会：5G优先网带来游戏风口</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201124/667087.html" target="_blank">想做好网站SEO 重点核心的方法就是暴增式运维</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20190722/539953.html" target="_blank">强敌当前，小米CC制胜难</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201122/666705.html" target="_blank">2020年要怎么开会？MAXHUB邀您到“互联网之光”博览会亲身体</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20181220/507956.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.hxwgxz.com/html/huodong/20200108/582560.html" target="_blank">南京同仁堂“1+6”体重管理社交新零售峰会完美谢</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20190102/508937.html" target="_blank">巨头为何纷纷大干快上智能音箱？</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20181220/507957.html" target="_blank">微信：成也社交，“败”也社交</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201112/665059.html" target="_blank">第三届进博会未受新冠影响累计意向成交726.2亿美</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201210/669981.html" target="_blank">2020快手直播交流大会将在三市启动</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20191127/563042.html" target="_blank">2018年第二届线下流量创新峰会强力来袭！</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201107/664009.html" target="_blank">关于网站盈利的一些模式解析（新手必看）</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20201004/659272.html" target="_blank">圆满落幕| SSOT2020领跑智慧办公市场复苏，展示创</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20191211/571307.html" target="_blank">2019国际第三代半导体专业赛两大赛区决战深圳</a></li><li><a href="https://www.hxwgxz.com/html/huodong/20190130/510883.html" target="_blank">符合中国用户口味 Google Wear OS探秘之旅</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.hxwgxz.com/ All Rights Reserved. 核心网</p> <p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p> </div> </body> </html>