人物画像————圆球转动效果
2024-05-13 21:13:36
前言：
<!doctype html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>人物画像</title><meta name="author" content="hongru.chen" /><style type="text/css">html {overflow: hidden}body,.screen {overflow: hidden;width: 500px;height: 500px;position: absolute;margin: 0;padding: 0;border: 1px solid red;}#screen {left: 0;top: 0;zoom: 1;}#screen a {position: absolute;font-size: 12px;overflow: hidden;padding: 1px 2px;font-weight: bold;}#screen a:hover {border: 1px solid #ccc;background: #666}</style><script src="jquery.min.js"></script><script type="text/javascript">var tt="";var BeautifullMath = function() {var obj = [],xm = 0,ym = 0,axe = 0,aye = 0,parts = 50,scr, aArr, txe, tye, nw, nh;var colorArr = ['black', 'blue', 'red', 'green', 'yellow'];var addEvent = function(o, e, f) {window.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' + e, function() {f.call(o)})}var resize = function() {nw = scr.offsetWidth * .5;nh = scr.offsetHeight * .5;}var init = function(id, f) {scr = document.getElementById(id);aArr = document.getElementsByTagName('a');// function fun(e){
// e = e || window.event;
// xm = e.clientX;
// ym = e.clientY;
// }addEvent(document, 'mousemove', function(e) {
// fun(e);
// console.log(e.target)console.log(e.target.tagName)if(e.target.tagName == "A"){return false;clearInterval(tt);}e = e || window.event;xm = e.clientX;ym = e.clientY;});resize();addEvent(window, 'resize', resize);__init(f);tt = setInterval(run, 10);}var __init = function(f) {for(var i = 0; i < aArr.length; i++) {var o = {};o.p = aArr[i];o.p.style.color = colorArr[Math.round(Math.random() * 4)];var r = i / parts,j, a, b;j = i % parts;
// a = Math.floor(j) / 200 + (Math.floor(j / 2) % 10) / 5 * Math.PI * 2;a = Math.floor(j) / 50 + (Math.floor(j / 2) % 10) / 5 * Math.PI * 2;b = Math.acos(-0.9 + (j % 4) * 0.6);r = !!f ? f(r) : r - r * r + .5;var sbr = Math.sin(b) * r;o.x = Math.sin(a) * sbr;o.y = Math.cos(a) * sbr;o.z = Math.cos(b) * r;obj.push(o);o.transform = function() {var ax = .02 * txe,ay = .02 * tye,cx = Math.cos(ax),sx = Math.sin(ax),cy = Math.cos(ay),sy = Math.sin(ay);//rotationvar z = this.y * sx + this.z * cx;this.y = this.y * cx + this.z * -sx;this.z = this.x * -sy + z * cy;this.x = this.x * cy + z * sy;//3dvar scale = 1.3 / (1 + this.z),x = this.x * scale * nh + nw - scale * 2,y = this.y * scale * nh + nh - scale * 2;//set stylevar p = this.p.style;if(x >= 0 && y >= 0 && x < nw * 2 && y < nh * 2) {var c = Math.round(256 + (-this.z * 256));p.left = Math.round(x) + 'px';p.top = Math.round(y) + 'px';p.fontSize = Math.round(14 * scale) + 'px';
// p.fontSize = (Math.random()*50 +scale) + 'px';p.zIndex = 200 + Math.floor(-this.z * 100);p.opacity = .6 - this.z;p.filter = 'alpha(opacity=' + 100 * (.6 - this.z) + ')';} else p.width = "0px";}}}//run function var run = function() {var se = 1 / nh;txe = (ym - axe) * se;tye = (xm - aye) * se;axe += txe;aye += tye;/* ---- anim particles ---- */for(var i = 0, o; o = obj[i]; i++) o.transform();}return {init: init}}();onload = function() {BeautifullMath.init('screen', function(r) {return .4;});}</script></head><body><div id="screen" class="screen"><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a></div></body></html>2020/09/22扩展，自动匀速旋转
1、去掉鼠标移入效果
2、修改滚动方向
<!doctype html>
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>人物画像</title><meta name="author" content="hongru.chen" /><style type="text/css">html {overflow: hidden}body,.screen {overflow: hidden;width: 500px;height: 500px;position: absolute;margin: 0;padding: 0;border: 1px solid red;}#screen {left: 0;top: 0;zoom: 1;}#screen a {position: absolute;font-size: 12px;overflow: hidden;padding: 1px 2px;font-weight: bold;}#screen a:hover {border: 1px solid #ccc;background: #666}</style><script src="jquery.min.js"></script><script type="text/javascript">var tt="";var BeautifullMath = function() {var obj = [],xm = 0,ym = 0,axe = 0,aye = 0,parts = 50,scr, aArr, txe, tye, nw, nh;var colorArr = ['black', 'blue', 'red', 'green', 'yellow'];var addEvent = function(o, e, f) {window.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on' + e, function() {f.call(o)})}var resize = function() {nw = scr.offsetWidth * .5;nh = scr.offsetHeight * .5;}var init = function(id, f) {scr = document.getElementById(id);aArr = document.getElementsByTagName('a');// function fun(e){
// e = e || window.event;
// xm = e.clientX;
// ym = e.clientY;
// }
// addEvent(document, 'mousemove', function(e) {
// fun(e);
// console.log(e.target)
// console.log(e.target.tagName)
// if(e.target.tagName == "A"){
// return false;
// clearInterval(tt);
// }
// e = e || window.event;
// xm = e.clientX;
// ym = e.clientY;
//
// });resize();addEvent(window, 'resize', resize);__init(f);tt = setInterval(run, 10);}var __init = function(f) {for(var i = 0; i < aArr.length; i++) {var o = {};o.p = aArr[i];o.p.style.color = colorArr[Math.round(Math.random() * 4)];var r = i / parts,j, a, b;j = i % parts;
// a = Math.floor(j) / 200 + (Math.floor(j / 2) % 10) / 5 * Math.PI * 2;a = Math.floor(j) / 50 + (Math.floor(j / 2) % 10) / 5 * Math.PI * 2;b = Math.acos(-0.9 + (j % 4) * 0.6);r = !!f ? f(r) : r - r * r + .5;var sbr = Math.sin(b) * r;o.x = Math.sin(a) * sbr;o.y = Math.cos(a) * sbr;o.z = Math.cos(b) * r;obj.push(o);o.transform = function() {var ax = .02 * txe,ay = .02 * tye,cx = Math.cos(ax),sx = Math.sin(ax),cy = Math.cos(ay),sy = Math.sin(ay);//rotationvar z = this.y * sx + this.z * cx;this.y = this.y * cx + this.z * -sx;this.z = this.x * -sy + z * cy;this.x = this.x * cy + z * sy;//3dvar scale = 1.3 / (1 + this.z),x = this.x * scale * nh + nw - scale * 2,y = this.y * scale * nh + nh - scale * 2;//set stylevar p = this.p.style;if(x >= 0 && y >= 0 && x < nw * 2 && y < nh * 2) {var c = Math.round(256 + (-this.z * 256));p.left = Math.round(x) + 'px';p.top = Math.round(y) + 'px';p.fontSize = Math.round(14 * scale) + 'px';
// p.fontSize = (Math.random()*50 +scale) + 'px';p.zIndex = 200 + Math.floor(-this.z * 100);p.opacity = .6 - this.z;p.filter = 'alpha(opacity=' + 100 * (.6 - this.z) + ')';} else p.width = "0px";}}}//run function var run = function() {var se = 1 / nh;// axe=100//绝对值越大，速度越快
// aye=100//绝对值越大，速度越快axe=-100//绝对值越大，速度越快aye=-100//绝对值越大，速度越快txe = (ym - axe) * se;tye = (xm - aye) * se;axe += txe;aye += tye;/* ---- anim particles ---- */for(var i = 0, o; o = obj[i]; i++) o.transform();}return {init: init}}();onload = function() {BeautifullMath.init('screen', function(r) {return .4;});}</script></head><body><div id="screen" class="screen"><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a><a href="http://www.cnblogs.com/hongru/">老腊肉666</a></div></body></html>效果：
人物画像————圆球转动效果相关推荐
- 使用midjourney搞出一套三国人物画像！
当下已进入如火如荼的全民AI时代,最近体验了下midjourney,使用它的以图生图功能生成出来一套三国人物画像,和大家分享下使用心得. 使用midjourney的准备工作 下载工具 使用mi ...
- 深度学习实战23(进阶版)-语义分割实战，实现人物图像抠图的效果（计算机视觉）
大家好,我是微学AI,今天给大家带来深度学习实战23(进阶版)-语义分割实战,实现人物图像抠图的效果.语义分割是计算机视觉中的一项重要任务,其目标是将图像中的每个像素都分配一个语义类别标签.与传统的目 ...
- 简单人物画像_你真的理解用户画像吗？| 船说
" 「设计师沙龙」是ARK下半年开始逐渐形成的传统,由ARKers自发组织,分为视觉和交互两类,每月各举办一次.大家围绕一个话题展开,聊聊行业最新案例和工作上的心得,帮助大家共同进步. AR ...
- 什么叫大数据人物画像_大数据时代，如何构建精准用户画像，直击精细化运营...
移动互联网时代,精细化运营逐渐成为企业发展的重要竞争力,"用户画像"的概念也应运而生.用户画像是指,在大数据时代,企业通过对海量数据信息进行清洗.聚类.分析,将数据抽象成标签,再利 ...
- 简单人物画像_天天谈【用户画像】95％的人根本不知道自己在说什么
很多人对用户调研.用户群体.用户画像这几个概念是混淆的,这三个其实不断深入的过程.用户画像( personas)的概念最早由Alan Cooper提出--"Personas are a co ...
- UE4之ACharacter移动人物并显示动画效果
这里主要涉及两个类 ACharacter 和 UAnimInstance 两个类 ACharacter继承了APawn类,主要增加了几个组件,最大的特点是可以设置一个人形的形状.通过USkeletal ...
- 简单人物画像_简单的素描画人物图片
简单的素描画人物图片 人物素描是素描中最常见的,所以我们一定要掌握好关于人物素描的一些方法技巧才行.下面给大家整理了简单的素描画人物图片,欢迎阅读! 简单的素描画人物图片1 简单的素描画人物图片2 简 ...
- Cocos2D结合CoreGraphics实现RPG人物中空黑洞吸入效果
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 之前的博文中我们实现了RPG人物的复古效果. 现在我们再完点h ...
- 简单人物画像_怎样把复杂的人物肖像画简单化
原标题:怎样把复杂的人物肖像画简单化 人物肖像画虽然很复杂 但通过我们接下来全面的分析 努力的你一定可以解决这些问题 炯炯有神的眼睛 眼睛作为一个完整的球体,这个球体会对不同视角下眼睛的样子产生影响. ...
最新文章
- mysql anyvalue报错_Mysql 的ANY_VALUE()函数和 ONLY_FULL_GROUP_BY 模式
- Java 进行 RSA 加解密时不得不考虑到的那些事儿
- 针对MySQL死锁问题的思路分析
- 成就你一生的100个哲理——修身养性篇
- rabbitmq-5-案例2-简单的案例+exchange
- c++ 输出控制iomanip
- html无损转换pdf,Pdf2html ：高保真PDF至HTML转换
- 云+X案例展 | 民生类：中国电信天翼云携手国家天文台打造“大国重器”
- js实现椭圆轨迹_华为开发者大会2020隆重召开，亿健T10椭圆机荣耀参展
- EXCEL VLOOKUP函数的使用
- jQuery插件开发精品教程，让你的jQuery提升一个台阶
- pr人像磨皮美容插件：Beauty Box for Premiere Pro
- 荐书|图解深度学习与神经网络：从张量到TensorFlow实现
- Weka的下载与安装
- 第一台计算机英语句子,20个虚拟语气句子带翻译
- 南京市儿童医院用医保身份（医保通道）网上预约挂号以及取号、付费看病流程
- php命名空间的设计思想和缺点
- 管式静态混合器 不锈钢管道混合器
- 未连接到互联网代理服务器出现问题，或者地址有误，该如何解决？
- 正交采样 matlab,MATLAB数值积分(正交)