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-隐藏字段

文章目录 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读取语文成绩 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序代码 四、程序说明 五、运行结果 六、考点分析 七、 推荐资料 1、蓝桥杯比赛 2、考级资料 3、其它资料 python读取语文成绩 2022年3月 python编程等级考试级编程题 一、题目…

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

背景 构建时出现大量错误 原因 中文注释问题 解决 方法1. 报错代码附近的中文注释全部删掉。。。 方法2. 报错的文件添加 // Chinese word comment solution #pragma execution_character_set("utf-8")

第二天: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 ,…

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深度学习框架】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…

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

首先&#xff0c;去官网下载对应芯片的原理图和封装&#xff0c;之后用分别双击打开原理图和封装。之后打开自己的原理图库和封装库。如下图&#xff1a; 打开原理图和封装后框选&#xff0c;之后crlC复制&#xff0c;之后点开自己的原理图库和封装库&#xff0c;随便单击一个元…

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

在Ubuntu16.04下采用如下dpkg命令安装deb软件安装包时&#xff1a; sudo dpkg -i XXXX.deb 发生安装失败&#xff0c;返回信息为&#xff02;正处理时有错误发生&#xff02;&#xff0c;并且在安装过程中出现&#xff02;依赖关系问题-仍未被配置&#xff02;的提示&#xff0…

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 函数

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

K8S基础简介

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

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)

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

BLACKBOX.AI:解锁编程学习新纪元,加速开发的AI得力助手

文章目录 &#x1f4af;BLACKBOX.AI 官网&#x1f341;1 BLACKBOX.AI 工具使用教程&#x1f341;2 BLACKBOX.AI工具使用界面介绍&#x1f341;3 Chat(聊天)功能&#x1f341;4 Explore (探索)功能&#x1f48e;4.1 Terminal(终端)功能&#x1f48e;4.2 Discover(发现)功能&…

ros1仿真导航机器人 hector_mapping gmapping

仅为学习记录和一些自己的思考&#xff0c;不具有参考意义。 1 hector_mapping 建图过程 &#xff08;1&#xff09;gazebo仿真 roslaunch why_simulation why_slam.launch <launch><!-- We resume the logic in empty_world.launch, changing only the name of t…

助农扶贫网站

摘要&#xff1a;随着信息科技的快速发展和互联网的普及&#xff0c;信息技术在助力农业发展、促进农村振兴以及扶贫工作中发挥着越来越重要的作用。本文基于Spring Boot框架和Vue.js前端开发技术&#xff0c;设计完成了一个助农扶贫电商网站。网站提供便捷的农产品信息发布、农…

three.js - MeshStandardMaterial(标准网格材质)- 金属贴图、粗糙贴图

金属贴图、粗糙贴图 金属贴图&#xff1a;metalnessMap 和 粗糙贴图&#xff1a;roughnessMap&#xff0c;是用于模拟物体表面属性的两种重要贴图技术&#xff0c;这两种贴图&#xff0c;通常与基于物理的渲染&#xff08;PBR&#xff09;材质&#xff08;如&#xff1a;MeshSt…

DC-DC产品设计PCB注意事项

DC-DC的电路比LDO会复杂很多&#xff0c;噪声也更大&#xff0c;布局和layout要求更高&#xff0c;layout的好坏直接影响DC-DC的性能&#xff0c;所以了解DC-DC的layout至关重要。 一、Bad Layout EMI&#xff0c;DC-DC的SW管脚上面会有较高的dv/dt&#xff0c; 比较高的dv/d…

FastAPI教程II

本文参考FastAPI教程https://fastapi.tiangolo.com/zh/tutorial Cookie参数 定义Cookie参数与定义Query和Path参数一样。 具体步骤如下&#xff1a; 导入Cookie&#xff1a;from fastapi import Cookie声明Cookie参数&#xff0c;声明Cookie参数的方式与声明Query和Path参数…