前端js做公司庆典页面背景旋转星云文字从左向右穿过

上篇文章是planA
这是planB

效果图

上传视频很麻烦上传gif还不行。。。。。。
这套代码可以实现多台屏幕不同尺寸的电脑联屏
index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>15周年</title><link rel="stylesheet" href="css/normalize.min.css"><link rel="stylesheet" href="css/style.css"><style>* {padding: 0;margin: 0;font-family: "微软雅黑"}.hd {width: 100%;height: 100%;overflow: hidden;font-size: 200px;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}.marquee {// width: 300%;  注释为适配// 写死可实现联屏 width: 6000px;display: inline-block;white-space: nowrap;position: absolute;color: #fff;// right: -300%; 注释为适配//写死可实现联屏right: -6000px;top: 50%;transform: translateY(-50%);animation:50s scroll linear infinite;}@keyframes scroll {0% {// right: -300%; 注释为适配 // 写死可实现联屏right: -6000px;}100% {//  right: 100%; 注释为适配// 写死可实现联屏right: 6000px;}}</style>
</head><body><canvas id='canv'></canvas><h4 class="hd"><span class="marquee">汇思十五载，同心创精彩。祝xx成立15周年快乐</span></h4><script src='js/jquery.min.js'></script><!-- 星云 --><script src="js/script.js"></script>
</body></html>

normalize.min.css

button,hr,input{overflow:visible}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} menu,article,aside,details,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{}button,select{text-transform:none}[type=submit], [type=reset],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}/*# sourceMappingURL=normalize.min.css.map */

style.css

body {overflow: hidden;margin: 0;padding: 0;background: hsla(242, 30%, 5%, 1);
}canvas {width: 100%;
}

script.js

/*
(Book REF) HTML5 Canvas Ch. 5:  Math, Physics, and Animation ::: Uniform Circular Motion
By Steve Fulton and Jeff Fulton
*/
window.requestAnimFrame = (function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function(callback) {window.setTimeout(callback, 1000 / 60);};
})();
window.addEventListener('load', start, false);var c,$,w,h,msX,msY,midX,midY,num = 650,parts = [],begin = 50,repeat = 20,end = Math.PI * 2,force = null,msdn = false;function start() {c = document.getElementById('canv');$ = c.getContext('2d');w = c.width = window.innerWidth;h = c.height = window.innerHeight;midX = w / 2;midY = h / 2;force = Math.max(w, h) * 0.09;flow = begin;window.requestAnimFrame(create);run();
}function run() {window.requestAnimFrame(run);go();
}function Part() {this.deg = 0;this.rad = 0;this.x = 0;this.y = 0;this.distX = 0;this.distY = 0;this.color = 'rgb(' + Math.floor(Math.random() * 130) + ',' + Math.floor(Math.random() * 50) + ',' + Math.floor(Math.random() * 100) + ')';this.size;
}function create() {var n = num;while (n--) {var p = new Part();p.deg = Math.floor(Math.random() * 360);p.rad = Math.floor(Math.random() * w * 0.5);p.x = p.distX = Math.floor(Math.random() * w);p.y = p.distY = Math.floor(Math.random() * h);p.size = 1 + Math.floor(Math.random() * (p.rad * 0.055));parts[n] = p;}c.onmousemove = msmv;c.onmousedown = msdn;c.onmouseup = msup;var int = setInterval(function() {flow--;if (flow === repeat) clearInterval(int);}, 20);
}function go() {$.globalCompositeOperation = 'source-over';$.fillStyle = 'hsla(242, 30%, 5%, .55)';$.fillRect(0, 0, w, h);$.globalCompositeOperation = 'lighter';var mx = msX;var my = msY;var bounds = force;if (msdn) {bounds = force * 2;}var n = num;while (n--) {var p = parts[n];var radi = Math.PI / 180 * p.deg;p.distX = midX + p.rad * Math.cos(radi);p.distY = midY + p.rad * Math.sin(radi) * 0.4;if (mx && my) {var react = Math.floor((bounds * 0.5) + Math.random() * (bounds * 0.9));if (p.distX - mx > 0 &&p.distX - mx < bounds &&p.distY - my > 0 &&p.distY - my < bounds) {p.distX += react;p.distY += react;} else if (p.distX - mx > 0 &&p.distX - mx < bounds &&p.distY - my < 0 &&p.distY - my > -bounds) {p.distX += react;p.distY -= react;} else if (p.distX - mx < 0 &&p.distX - mx > -bounds &&p.distY - my > 0 &&p.distY - my < bounds) {p.distX -= react;p.distY += react;} else if (p.distX - mx < 0 &&p.distX - mx > -bounds &&p.distY - my < 0 &&p.distY - my > -bounds) {p.distY -= react;p.distY -= react;}}p.x += ((p.distX - p.x) / flow);p.y += ((p.distY - p.y) / flow);var x = p.x;var y = p.y;var s = p.size * (p.y * 1.5 / h);if (s < 0.1) {s = 0;}$.beginPath();$.fillStyle = p.color;$.arc(x, y, s, 0, end, true);$.fill();$.closePath();var vary;if (p.size < 2) {vary = 4;} else if (p.size < 3) {vary = 3;} else if (p.size < 4) {vary = 2;} else {vary = 1;}vary *= (p.y / (h * 0.9));p.deg += vary;p.deg = p.deg % 360;}
}function msmv(e) {var p = getPos(e.target);var sX = window.pageXOffset;var sY = window.pageYOffset;msX = e.clientX - p.x + sX;msY = e.clientY - p.y + sY;
}function msdn(e) {msdn = true;
}function msup(e) {msdn = false;
}function getPos(el) {var cosmo = {};cosmo.x = el.offsetLeft;cosmo.y = el.offsetTop;while (el.offsetParent) {el = el.offsetParent;cosmo.x += el.offsetLeft;cosmo.y += el.offsetTop;}return cosmo;
}

最后还有一个jquery.min.js就不给大家了复制就能跑而且对配置较低的电脑也比较友好，
上一版老电脑跑起来卡顿。。。。。。

前端js做公司庆典页面背景旋转星云文字从左向右穿过相关推荐

带你玩转JavaWeb开发之四 -如何用JS做登录注册页面校验
今日内容使用JQuery完成页面定时弹出广告使用JQuery完成表格的隔行换色使用JQuery完成复选框的全选效果使用JQuery完成省市联动效果使用JQuery完成下列列表左右选择使用J ...
前端js实现路由切换页面 pushState replaceState
window.history 我们可以通过window.history的两个方法来控制浏览器的路由改变,但不会让浏览器刷新页面. pushState 会追加浏览器的路由历史,但不会刷新页面,可以用这种 ...
前端js获取域名和页面完整地址（方法整理带http或https）
js代码: <script language="javascript"> //获取域名 host = window.location.host; host2=docum ...
前端js代码循环在页面中输出星星（很早之前代码以此记录-画星星）
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
zbb20181214 js,html 点击页面出现游走文字富强民主民主
<script src="jquery-1.11.1.min.js"></script> <script type="text/javasc ...
前端笔记html+css+vue, 页面布局、定位、字体背景等和一些常用方法
目录弹性布局: 定位: overflow溢出: 表单: vue数据存取: vuex store 全局数据: vux弹窗,软提示,硬提示 ElementUI MessageBox 弹框简单用法背景设 ...
vue里面怎么实现页面跳转_vue.js怎样做跳转页面？
vue.js怎样做跳转页面?下面本篇文章给大家介绍一下vue.js跳转页面.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 我们知道在vue里进行页面跳转的话,我们使用这个标签组件 ...
html 特效背景旋转圆点 js特效
韩梦飞沙韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha html 特效背景旋转圆点 js特效阿里云的页面 2018杭州·云栖大会_抢票中 ...
php网站自动变暗,如何使用JS弹出DIV并使整个页面背景变暗
这次给大家带来如何使用JS弹出DIV并使整个页面背景变暗,使用JS弹出DIV并使整个页面背景变暗的注意事项有哪些,下面就是实战案例,一起来看一下. 1.首先写一个遮罩层p,然后再写一个弹窗的p 提示 ...

前端js做公司庆典页面背景旋转星云文字从左向右穿过

前端js做公司庆典页面背景旋转星云文字从左向右穿过相关推荐

最新文章

热门文章