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.mzph.cn/pingmian/37903.shtml

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

相关文章

MySQL高级-MVCC-隐藏字段

MySQL高级-MVCC-隐藏字段

文章目录 1、介绍2、测试2.1、进入服务器中的 /var/lib/mysql/atguigu/2.2、查看有主键的表 stu2.3、查看没有主键的表 employee2.3.1、创建表 employee2.3.2、查看表结构及其其中的字段信息 1、介绍 ---------------- | id | age | name | ---------------- | 1 | 1 | Js…
阅读更多...
python读取语文成绩 青少年编程电子学会python编程等级考试三级真题解析2022年3月

python读取语文成绩 青少年编程电子学会python编程等级考试三级真题解析2022年3月

目录 python读取语文成绩 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python读取语文成绩 2022年3月 python编程等级考试级编程题 一、题目…
阅读更多...
【Qt】之【Bug】大量出现“未定义的标识符”问题

【Qt】之【Bug】大量出现“未定义的标识符”问题

背景 构建时出现大量错误 原因 中文注释问题 解决 方法1. 报错代码附近的中文注释全部删掉。。。 方法2. 报错的文件添加 // Chinese word comment solution #pragma execution_character_set("utf-8")
阅读更多...
第二天：ALOAM前端讲解【第3部分】

第二天：ALOAM前端讲解【第3部分】

（2）面特征 点到面的距离公式： d H = ∣ ( X ~ ( k + 1 , i ) L − X ˉ ( k , j ) L ) ⋅ ( ( X ˉ ( k , j ) L − X ˉ ( k , l ) L ) ( X ˉ ( k , j ) L − X ˉ ( k , m ) L ) ) ∣ ∣ ( X ˉ ( k , j ) L − X ˉ ( k , l ) L ) ( X ˉ ( k , j ) L − X ˉ ( k ,…
阅读更多...
Vue如何引用组件

Vue如何引用组件

在 Vue.js 中&#xff0c;你可以通过几种方式引用组件&#xff1a; 全局注册 在 main.js 或你的主入口文件中&#xff0c;你可以使用 Vue.component() 方法来全局注册一个组件。这意味着这个组件可以在你的 Vue 应用的任何地方使用。 import MyComponent from ./components/…
阅读更多...
Linux常用命令大全（超详细！！！）

Linux常用命令大全（超详细！！！）

文章目录 1.Linux是什么1.1 关于Linux我们主要学习什么1.1 学习Linux常见命令的前置知识 2. Linux常见命令2.1 ls命令2.2 cd命令2.3 pwd命令2.4 touch命令2.5 cat命令2.6 echo命令2.7 vim命令2.8 mkdir 命令2.9 rm命令2.10 cp命令2.11 mv命令2.12 grep命令2.13 ps命令2.14 nets…
阅读更多...
文华财经通达信同花顺期货通盘立方博易大师主图指标公式源码

文华财经通达信同花顺期货通盘立方博易大师主图指标公式源码

买线:EMA(C,2); 卖线:EMA(SLOPE(C,21)*20C,42); BU:CROSS(买线,卖线); SEL:CROSS(卖线,买线); STICKLINE1(买线>卖线,LOW,MIN(O,C),0.1,1),COLORRED; STICKLINE1(买线>卖线,MAX(O,C),HIGH,0.1,1),COLORRED; STICKLINE(买线>卖线,CLOSE,OPEN,8,1),COLORRED; STI…
阅读更多...
【简单讲解下OneFlow深度学习框架】

【简单讲解下OneFlow深度学习框架】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…
阅读更多...
AD如何将厂家的元器件库，添加到自己的元器件库

AD如何将厂家的元器件库，添加到自己的元器件库

首先&#xff0c;去官网下载对应芯片的原理图和封装&#xff0c;之后用分别双击打开原理图和封装。之后打开自己的原理图库和封装库。如下图&#xff1a; 打开原理图和封装后框选&#xff0c;之后crlC复制&#xff0c;之后点开自己的原理图库和封装库&#xff0c;随便单击一个元…
阅读更多...
Linux(Ubuntu20.04)系统中安装deb软件包错误(依赖关系问题-仍未被配置)解决的办法

Linux(Ubuntu20.04)系统中安装deb软件包错误(依赖关系问题-仍未被配置)解决的办法

在Ubuntu16.04下采用如下dpkg命令安装deb软件安装包时&#xff1a; sudo dpkg -i XXXX.deb 发生安装失败&#xff0c;返回信息为&#xff02;正处理时有错误发生&#xff02;&#xff0c;并且在安装过程中出现&#xff02;依赖关系问题-仍未被配置&#xff02;的提示&#xff0…
阅读更多...
【数据分析“三剑客”】—— NumPy

【数据分析“三剑客”】—— NumPy

本系列数据分析博客使用jupyter notebook作为开发环境&#xff0c;如果你还不是很熟悉jupyter notebook&#xff0c;我推荐你可以先花几十分钟实现学习一下我关于python开发环境搭建介绍的博客&#xff1a;python开发环境搭建——pycharm和jupyternotebook_jupyter跟pycharm代码…
阅读更多...
RClone挂载有阿里云的AList

RClone挂载有阿里云的AList

转自个人博客&#xff1a;https://www.jjy2023.cn/2024/05/23/rclone%e6%8c%82%e8%bd%bd%e6%9c%89%e9%98%bf%e9%87%8c%e4%ba%91%e7%9a%84alist-md/ RClone挂载一般的AList可以直接使用mount命令&#xff0c;但是阿里云需要使用指定头部Referer:https://www.aliyundrive.com/ &a…
阅读更多...
51单片机第11步_在C语言中插入汇编语言

51单片机第11步_在C语言中插入汇编语言

本章重点介绍如何在C语言中插入汇编语言。要不是有记录&#xff0c;真不知道怎么搞。 /* 你在 Project Workspace窗口中,将光标移到DELAY.c处,点下鼠标右键,选择"Options for file DELAY.c", 点击右边的"Generate Assembler SRC File"和“Assemble SRC …
阅读更多...
【PL理论深化】(12) Ocaml 语言：高阶函数 | map 函数 | filter 函数 | fold 函数

【PL理论深化】(12) Ocaml 语言：高阶函数 | map 函数 | filter 函数 | fold 函数

&#x1f4ac; 写在前面&#xff1a;在函数式编程中&#xff0c;除了递归函数外&#xff0c;还经常使用高阶函数。高阶函数是指接收其他函数作为参数或返回另一个函数的函数。高阶函数通过抽象编程模式以实现重用&#xff0c;使程序可以在更高层次上进行编写。让我们重点看看常…
阅读更多...
K8S基础简介

K8S基础简介

用于自动部署&#xff0c;扩展和管理容器化应用程序的开源系统。 功能&#xff1a; 服务发现和负载均衡&#xff1b; 存储编排&#xff1b; 自动部署和回滚&#xff1b; 自动二进制打包&#xff1b; 自我修复&#xff1b; 密钥与配置管理&#xff1b; 1. K8S组件 主从方式架…
阅读更多...
A - ABA and BAB-AtCoder Regular Contest 180

A - ABA and BAB-AtCoder Regular Contest 180

A - ABA and BAB 一、分析 这道题要计算出ABA和BAB组合出的字符串的变化情况并对MOD取模。 首先想到子串中出现ABAB和BABA这两种情况的处理是一样的&#xff0c;他们的变换只会产出两种变化&#xff0c;如ABAB>ABAB/AB&#xff1b;只会变成这两种情况&#xff0c;那么将长…
阅读更多...
$nextTick

$nextTick

一、词义简介&#xff1a; next下一次 Tick轮询 二、应用场景&#xff1a; 当改变数据后&#xff0c;要基于更新后的新DOM进行某些操作时&#xff0c;要在nextTick所指定的回调中执行 三、原理&#xff1a; n e x t T i c k 下一次轮询的时候再执行&#xff0c; v u e 并不是说…
阅读更多...
socket编程常见操作

socket编程常见操作

1、连接的建立 分为两种&#xff1a;服务端处理接收客户端的连接&#xff1b;服务端作为客户端连接第三方服务 //作为服务端 int listenfd socket(AF_INET, SOCK_STREAM, 0); bind(listenfd, (struct sockaddr*)&servaddr, sizeof(servaddr))) listen(listenfd, 10); //…
阅读更多...
SARscape打开Sentinel1A SAR SLC产品（CSDB_20240630）

SARscape打开Sentinel1A SAR SLC产品（CSDB_20240630）

1.打开envi&#xff0c;在右侧工具包栏输入“sentinel-1”&#xff0c;并点击打开工具包。 2. 弹出文件导入界面&#xff0c;点击右侧Browse按钮。 3. 选在本地下载好的Sentinel1产品&#xff0c;文件路径最好全是英文&#xff0c;不要出现中文和特殊字符。 4 点击下方“Exec”…
阅读更多...
python项目实战——人生重开模拟器

python项目实战——人生重开模拟器

文章目录 1.菜单栏的编写2.玩家确定颜值、体质、智力、家境3.生成性别4.设定角色出生点5.各个年龄段的变化5.1 幼年阶段5.2 青年阶段5.3中年阶段5.4 晚年阶段 6.整体代码 人生重开模拟器是一款文字类小游戏. 玩家可根据提示输入角色的初始属性之后, 就可以开启不同的人生经历. …
阅读更多...
最新文章

Copyright @ 2022~2023