css 滚动词云

请添加图片描述
css + javascript 实现滚动词云效果

// 163css.js
var radius = 120;
var dtr = Math.PI / 180;
var d = 300;
var mcList = [];
var active = false;
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed = 10;
var size = 250;
var mouseX = 0;
var mouseY = 0;
var howElliptical = 1;
var aA = null;
var oDiv = null;
window.onload = function() {var b = 0;var a = null;oDiv = document.getElementById("div1");aA = oDiv.getElementsByTagName("a");for (b = 0; b < aA.length; b++) {a = {};a.offsetWidth = aA[b].offsetWidth;a.offsetHeight = aA[b].offsetHeight;mcList.push(a)}sineCosine(0, 0, 0);positionAll();oDiv.onmouseover = function() {active = true};oDiv.onmouseout = function() {active = false};oDiv.onmousemove = function(e) {var c = window.event || e;mouseX = c.clientX - (oDiv.offsetLeft + oDiv.offsetWidth / 2);mouseY = c.clientY - (oDiv.offsetTop + oDiv.offsetHeight / 2);mouseX /= 5;mouseY /= 5};setInterval(update, 30)
}
;
function update() {var o;var n;if (active) {o = (-Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;n = (Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed} else {o = lasta * 0.98;n = lastb * 0.98}lasta = o;lastb = n;if (Math.abs(o) <= 0.01 && Math.abs(n) <= 0.01) {return}var m = 0;sineCosine(o, n, m);for (var h = 0; h < mcList.length; h++) {var r = mcList[h].cx;var l = mcList[h].cy * ca + mcList[h].cz * (-sa);var g = mcList[h].cy * sa + mcList[h].cz * ca;var q = r * cb + g * sb;var k = l;var f = r * (-sb) + g * cb;var p = q * cc + k * (-sc);var i = q * sc + k * cc;var e = f;mcList[h].cx = p;mcList[h].cy = i;mcList[h].cz = e;per = d / (d + e);mcList[h].x = (howElliptical * p * per) - (howElliptical * 2);mcList[h].y = i * per;mcList[h].scale = per;mcList[h].alpha = per;mcList[h].alpha = (mcList[h].alpha - 0.6) * (10 / 6)}doPosition();depthSort()
}
function depthSort() {var a = 0;var b = [];for (a = 0; a < aA.length; a++) {b.push(aA[a])}b.sort(function(e, c) {if (e.cz > c.cz) {return -1} else {if (e.cz < c.cz) {return 1} else {return 0}}});for (a = 0; a < b.length; a++) {b[a].style.zIndex = a}
}
function positionAll() {var g = 0;var e = 0;var a = mcList.length;var c = 0;var f = [];var b = document.createDocumentFragment();for (c = 0; c < aA.length; c++) {f.push(aA[c])}f.sort(function() {return Math.random() < 0.5 ? 1 : -1});for (c = 0; c < f.length; c++) {b.appendChild(f[c])}oDiv.appendChild(b);for (var c = 1; c < a + 1; c++) {if (distr) {g = Math.acos(-1 + (2 * c - 1) / a);e = Math.sqrt(a * Math.PI) * g} else {g = Math.random() * (Math.PI);e = Math.random() * (2 * Math.PI)}mcList[c - 1].cx = radius * Math.cos(e) * Math.sin(g);mcList[c - 1].cy = radius * Math.sin(e) * Math.sin(g);mcList[c - 1].cz = radius * Math.cos(g);aA[c - 1].style.left = mcList[c - 1].cx + oDiv.offsetWidth / 2 - mcList[c - 1].offsetWidth / 2 + "px";aA[c - 1].style.top = mcList[c - 1].cy + oDiv.offsetHeight / 2 - mcList[c - 1].offsetHeight / 2 + "px"}
}
function doPosition() {var a = oDiv.offsetWidth / 2;var c = oDiv.offsetHeight / 2;for (var b = 0; b < mcList.length; b++) {aA[b].style.left = mcList[b].cx + a - mcList[b].offsetWidth / 2 + "px";aA[b].style.top = mcList[b].cy + c - mcList[b].offsetHeight / 2 + "px";aA[b].style.fontSize = Math.ceil(12 * mcList[b].scale / 2) + 8 + "px";aA[b].style.filter = "alpha(opacity=" + 100 * mcList[b].alpha + ")";aA[b].style.opacity = mcList[b].alpha}
}
function sineCosine(f, e, g) {sa = Math.sin(f * dtr);ca = Math.cos(f * dtr);sb = Math.sin(e * dtr);cb = Math.cos(e * dtr);sc = Math.sin(g * dtr);cc = Math.cos(g * dtr)
}
;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0047)http://bdzh.jg91.com/templets/20130926/163.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"><title></title><style type="text/css">body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em {margin: 0;padding: 0;border: 0;}ul,ol,li {list-style: none;}#div1 {height: 220px;margin: 30px 30px 30px 0;padding: 0;position: relative;width: 700px;}#div1 a {background: #e6ae77;color: #fff;display: block;font-weight: bold;left: 0;padding: 5px;position: absolute;text-decoration: none;top: 0}#div1 a.aa {background: #e6ae77;color: #fff}#div1 a:hover {border: 2px solid #FF0000}</style><script type="text/javascript" src="zywdscripts/163css.js"></script><base target="_blank"/></head><body marginheight="0" marginwidth="0" style="background-color:#fbf3e8;"><div id="div1" class="fl"><a class="aa" href="/zswd/cs/144913210L624KJ6KAG5F85.html" style="left: 249.401px; top: 154.869px; font-size: 17px; opacity: 1.41512; z-index: 0;">脾的主要功能与运化</a><a href="/zswd/cs/144913619IEAIC54KAIJAB.html" style="left: 161.406px; top: 175.185px; font-size: 17px; opacity: 1.37021; z-index: 1;">怎样理解肺主宣发、肃降，通调水道？</a><a href="/zswd/cs/14491311HLJ6F6GE3FFIB4C.html" style="left: 167.192px; top: 218.945px; font-size: 15px; opacity: 0.743456; z-index: 2;">怎样理解脾统血和肝藏血？</a><a href="/zswd/nj/143301678694IJ72B7H67EA.html" style="left: 261.768px; top: 193.054px; font-size: 14px; opacity: 0.587244; z-index: 3;">阳气在人体中有什么重要作用？</a><a class="aa" href="/zswd/nj/14330162DFBKIE643G15JBB.html" style="left: 302.582px; top: 121.413px; font-size: 15px; opacity: 0.827579; z-index: 4;">怎样理解阳气和阴精的相互关系</a><a class="aa" href="/zswd/sh/14330162J2B6JI66F9A9H2K.html" style="left: 283.997px; top: 65.5633px; font-size: 17px; opacity: 1.35815; z-index: 5;">什么是六经辨证</a><a class="aa" href="/zswd/sh/14330167JLF7ED143G81FGG.html" style="left: 157.006px; top: 62.9974px; font-size: 18px; opacity: 1.67517; z-index: 6;">为什么要辨阴阳两纲？如何辨别</a><a class="aa" href="/zswd/jk/14421668I7AC54EDID7A5K.html" style="left: 107.187px; top: 107.793px; font-size: 17px; opacity: 1.26451; z-index: 7;">怎样通过闻语声、察呼吸来判断病位？</a><a href="/zswd/jk/14421616CEJ94DI89BB82F5.html" style="left: 88.1175px; top: 163.194px; font-size: 15px; opacity: 0.695773; z-index: 8;">怎样掌握先后缓急和审因论治的原则？</a><a href="/zswd/wb/14330174KK514F15CKDI9AJ.html" style="left: 147.83px; top: 188.301px; font-size: 13px; opacity: 0.365502; z-index: 9;">为什么说温病是多种外感急性热性病的总称？</a><a href="/zswd/zy/143311615D575D47BH7H8I8K.html" style="left: 198.677px; top: 161.476px; font-size: 13px; opacity: 0.264945; z-index: 10;">药物的气和味有何关系？</a><a class="aa" href="/zswd/zy/143311612H75G27BHA554ABF.html" style="left: 280.629px; top: 94.4186px; font-size: 13px; opacity: 0.355097; z-index: 11;">升降浮沉对认识和运用药物有何临床意义</a><a class="aa" href="/zswd/fj/14411617KAI2IE4KBDGD32F.html" style="left: 259.491px; top: 23.8429px; font-size: 14px; opacity: 0.622616; z-index: 12;">中成药的特点是什么？怎样选用中成药？</a><a href="/zswd/zj/144913128H4GJAE5GB03GF8.html" style="left: 215.695px; top: -11.1293px; font-size: 14px; opacity: 0.948329; z-index: 13;">针刺时的基本手法与辅助手法有哪些</a></div></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/364668.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

weiyang**3.控制台01

weiyang**3.控制台01

1. 搭建单群组FISCO BCOS联盟链 使用开发部署工具 build_chain.sh脚本在本地搭建一条4 节点的FISCO BCOS链&#xff0c;以Ubuntu 22.04 64bit系统为例操作。 1.1 安装依赖 sudo apt install -y openssl curl 1.2 创建操作目录, 下载安装脚本 ## 创建操作目录 cd ~ &&a…
阅读更多...
【保姆级教程＋配置源码】在VScode配置C/C++环境

【保姆级教程＋配置源码】在VScode配置C/C++环境

目录 一、下载VScode 1. 在官网直接下载安装即可 2. 安装中文插件 二、下载C语言编译器MinGW-W64 三、配置编译器环境变量 1. 解压下载的压缩包&#xff0c;复制该文件夹下bin目录所在地址 2. 在电脑搜索环境变量并打开 3. 点击环境变量→选择系统变量里的Path→点击编…
阅读更多...
uniapp - 微信小程序 - 自定义底部tabbar

uniapp - 微信小程序 - 自定义底部tabbar

废话不多说&#xff0c;直接行源码 这里需要的底部tabbar的图片在这里 我的资源里面呢 图片是这样的 先看成品吧 首先 - BaseApp\components\Tabbar.vue <script setup>import {ref,nextTick,watch} from "vue"// 核心 - 隐藏uniapp自带的底部tabbaruni.hi…
阅读更多...
如何配置Redis + Rdis在IDEA中的使用

如何配置Redis + Rdis在IDEA中的使用

文章目录 Step1. 下载zipStep2. 修改环境变量Step3. 启动Redis服务端Step4. 启动Redis客户端Step5. IDEA中链接Redis Step1. 下载zip 下载 Redis-x64-xxx.zip压缩包&#xff0c;解压到 E 盘后&#xff0c;将文件夹重新命名为 redis 下载地址&#xff1a;Redis下载地址 Step2…
阅读更多...
STM32F1+HAL库+FreeTOTS学习2——STM32移植FreeRTOS

STM32F1+HAL库+FreeTOTS学习2——STM32移植FreeRTOS

STM32F1HAL库FreeTOTS学习2——STM32移植FreeRTOS 获取FreeRTOS源码创建工程窥探源码移植 上期我们认识了FreeRTOS&#xff0c;对FreeRTOS有了个初步的认识&#xff0c;这一期我们来上手移植FreeRTOS到STM32上。 获取FreeRTOS源码 进入官网&#xff1a;https://www.freertos.o…
阅读更多...
MySQL8 新特性——公用表表达式用法 with t1 as (select * from user)

MySQL8 新特性——公用表表达式用法 with t1 as (select * from user)

MySQL8 新特性——公用表表达式用法_mysql ctes-CSDN博客 1.普通公用表表达式 MySQL8 新特性——公用表表达式用法 在MySQL 8.0及更高版本中&#xff0c;引入了公用表表达式&#xff08;Common Table Expressions&#xff0c;CTEs&#xff09;&#xff0c;它是一种方便且可重…
阅读更多...
PDF处理篇：如何调整 PDF 图像的大小

PDF处理篇：如何调整 PDF 图像的大小

将视觉效果无缝集成到 PDF 中的能力使它们成为强大的通信工具。然而&#xff0c;笨拙的图像大小会迅速扰乱文档的流程&#xff0c;阻碍清晰度和专业性。幸运的是&#xff0c;GeekerPDF 和Adobe Acrobat等流行的应用程序提供了用户友好的解决方案来应对这一挑战。这个全面的指南…
阅读更多...
动画重定向——当给一个人物模型用别人物的动画时，会遇到人物与动画不匹配问题，怎么解决呢？

动画重定向——当给一个人物模型用别人物的动画时，会遇到人物与动画不匹配问题，怎么解决呢？

每日一句&#xff1a;实践出真知&#xff0c;试错方确信 目录 最开始我想的原因&#xff01; 分析一下动画相关参数 Animator组件参数详解&#xff1a; 人物模型的导入设置参数&#xff1a; Skinned Mesh Renderer组件详解: Skinned Mesh Renderer工作原理 设置Skinned …
阅读更多...
数据结构历年考研真题对应知识点（树的基本概念）

数据结构历年考研真题对应知识点（树的基本概念）

目录 5.1树的基本概念 5.1.2基本术语 【森林中树的数量、边数和结点数的关系&#xff08;2016&#xff09;】 5.1.3树的性质 【树中结点数和度数的关系的应用&#xff08;2010、2016&#xff09;】 【指定结点数的三叉树的最小高度分析&#xff08;2022&#xff09;】 5.1…
阅读更多...
Ubuntu 安装Nginx服务

Ubuntu 安装Nginx服务

转自&#xff1a;https://blog.csdn.net/yegu001/article/details/135411588 Package: nginx Architecture: amd64 Version: 1.18.0-6ubuntu14.4 Priority: optional Section: web Origin: Ubuntu Maintainer: Ubuntu Developers <ubuntu-devel-discusslists.ubuntu.com>…
阅读更多...
QT拖放事件之五：自定义拖放操作-拖动中的修饰符操作

QT拖放事件之五：自定义拖放操作-拖动中的修饰符操作

1、效果 2、代码 #include "SelfButton.h" #include <QApplication>SelfButton::SelfButton(QString str ,QWidget* parent):Q
阅读更多...
【计算机毕业设计】基于Springboot的智能物流管理系统【源码+lw+部署文档】

【计算机毕业设计】基于Springboot的智能物流管理系统【源码+lw+部署文档】

包含论文源码的压缩包较大&#xff0c;请私信或者加我的绿色小软件获取 免责声明&#xff1a;资料部分来源于合法的互联网渠道收集和整理&#xff0c;部分自己学习积累成果&#xff0c;供大家学习参考与交流。收取的费用仅用于收集和整理资料耗费时间的酬劳。 本人尊重原创作者…
阅读更多...
机械设计简单介绍

机械设计简单介绍

机械设计简单介绍 1 介绍1.1 概述1.2 机械机构设计基本步骤1.3 关键1.3.1 静力学1.3.2 动力学1.3.3 运动学1.3.4 刚度学 1.4 示例【机械臂】 2 资料2.1 知识体系2.2 博客类汇总2.3 免费CAD模型获取2.4 3D打印2.5 SolidWorks 3 具备能力3.1 熟练翻阅 机械设计手册3.2 知道 N 家常…
阅读更多...
【C++】初识C++（一）

【C++】初识C++（一）

一.什么是C C语言是结构化和模块化的语言&#xff0c;适合处理较小规模的程序。对于复杂的问题&#xff0c;规模较大的程序&#xff0c;需要高度 的抽象和建模时&#xff0c;C语言则不合适。为了解决软件危机&#xff0c; 20世纪80年代&#xff0c; 计算机界提出了OOP(object o…
阅读更多...
为什么IP地址会被列入黑名单？

为什么IP地址会被列入黑名单？

您是否曾经历过网站访客数量骤减或电子邮件投递失败的困扰&#xff1f;这背后或许隐藏着一个常被忽略的原因&#xff1a;您的IP地址可能已经被列入了黑名单内。尽管您并没有进行任何违法的网络操作&#xff0c;但这个问题依然可能出现。那么&#xff0c;究竟黑名单是什么&#…
阅读更多...
SerDes介绍以及原语使用介绍（4）ISERDESE2原语仿真

SerDes介绍以及原语使用介绍（4）ISERDESE2原语仿真

文章目录 前言一、iserdese2_module模块二、oserdese2_module模块三、顶层模块四、仿真结果分析 前言 上文详细介绍了ISERDESE2原语的使用&#xff0c;本文根据仿真对ISERDESE2原语的使用进一步加深印象。在仿真时&#xff0c;与OSERDESE进行回环。 一、iserdese2_module模块…
阅读更多...
算法金 | 协方差、方差、标准差、协方差矩阵

算法金 | 协方差、方差、标准差、协方差矩阵

大侠幸会&#xff0c;在下全网同名「算法金」 0 基础转 AI 上岸&#xff0c;多个算法赛 Top 「日更万日&#xff0c;让更多人享受智能乐趣」 抱个拳&#xff0c;送个礼 1. 方差 方差是统计学中用来度量一组数据分散程度的重要指标。它反映了数据点与其均值之间的偏离程度。在…
阅读更多...
fastzdp_login的第一次构建

fastzdp_login的第一次构建

概述 为了方便能够快捷的实现fastapi实现登录相关功能代码开发&#xff0c;决定开发一个开源的fastapi组件库&#xff0c;想了很多个名字&#xff0c;在检查pypi的时候发现都被占用了&#xff0c;所以最终决定使用fastzdp_login这个名字。 fast代表的时fastapi。zdp代表的是张…
阅读更多...
“ONLYOFFICE 8.1：提升用户体验和编辑功能的全面升级”

“ONLYOFFICE 8.1：提升用户体验和编辑功能的全面升级”

引言 官网链接 在当今快节奏的工作环境中&#xff0c;高效地处理文档是每个职场人士必备的技能。ONLYOFFICE 桌面编辑器凭借其强大的功能和用户友好的界面&#xff0c;成为了提升文档处理效率的得力助手。本文将介绍 ONLYOFFICE 桌面编辑器的核心特性&#xff0c;并展示如何通…
阅读更多...
Zynq7000系列FPGA中的DMA控制器简介（二）

Zynq7000系列FPGA中的DMA控制器简介（二）

AXI互连上的DMA传输 所有DMA事务都使用AXI接口在PL中的片上存储器、DDR存储器和从外设之间传递数据。PL中的从设备通过DMAC的外部请求接口与DMAC通信&#xff0c;以控制数据流。这意味着从设备可以请求DMA交易&#xff0c;以便将数据从源地址传输到目标地址。 虽然DMAC在技术…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023