JavaScript实现动态圆形标签云效果

35 浏览量更新于2024-08-28 收藏 153KB PDF 举报

"JavaScript实现的圆形浮动标签云效果实例，通过JavaScript代码创建了一个动态的、围绕圆形旋转的标签云效果，无需使用Div容器，而是直接使用文字加链接的方式展示。当鼠标悬停在标签上时，标签会有边框和背景色变化，提供良好的交互体验。" 在JavaScript编程中，实现这种圆形浮动标签云效果主要涉及到以下几个关键点： 1. **布局与样式**：HTML部分定义了页面的基本结构，`<body>`背景色设置为蓝色，`<div id="div1">`作为标签云的容器，设置了相对定位以便于子元素绝对定位。CSS样式定义了每个标签`<a>`的样式，包括颜色、字体权重、内边距以及鼠标悬停时的边框和背景色变化。 2. **JavaScript核心逻辑**： - 定义了变量`radius`表示圆的半径，`dtr`用于将角度转换为弧度，`d`表示标签之间的距离，`mcList`存储每个标签对象，`active`表示是否处于运动状态，`lasta`和`lastb`用于记录上一次的位置，`distr`控制分布方式，`speed`表示旋转速度，`size`表示标签大小，`mouseX`和`mouseY`存储鼠标位置，`howElliptical`控制椭圆的形状，`aA`和`oDiv`是临时变量。 - `window.onload`事件触发时，初始化标签云，遍历所有`<a>`标签并将其添加到`mcList`数组中，然后设置每个标签的位置和旋转角度。 - `onmousemove`事件处理鼠标移动，更新`mouseX`和`mouseY`，根据鼠标位置调整标签云的分布。 - 使用`setInterval`定时器，周期性地更新每个标签的位置，实现旋转效果。计算每个标签的新位置，考虑了旋转速度、椭圆形状和标签大小等因素。 3. **动态效果**：标签云的动态效果是通过不断更新每个标签的`left`和`top`属性实现的，模拟了围绕圆形路径的运动。同时，`onmouseover`和`onmouseout`事件用于处理鼠标悬停时的样式变化，增加了用户交互感。 4. **动画原理**：这种效果利用了JavaScript的时间间隔函数`setInterval`来不断改变元素的位置，模拟了连续的动画效果。通过控制每个标签的坐标和旋转角度，使得它们看起来像是在圆形路径上运动。 5. **优化与适应性**：为了适应不同数量的标签，JavaScript会自动调整显示数量，确保视觉效果最佳。同时，由于没有固定数量的Div包裹标签，这种方法对于标签数量的变化具有很好的适应性。这个实例展示了JavaScript如何用于创建动态、交互式的网页元素，特别是对于创建视觉吸引力强、用户体验好的标签云效果。这种技术可以应用于网站导航、热门话题展示等场景，提升网页的互动性和趣味性。

JavaScript实现的圆形浮动标签云效果实例实现的圆形浮动标签云效果实例

本文实例讲述了JavaScript实现的圆形浮动标签云效果。分享给大家供大家参考。具体如下：

这里介绍的JS标签云效果，在鼠标的作用下会自动转动，整体上围绕成一个圆形，各个标签之间无需Div代码，直接文字+链

接的形式，有多少就显示多少，JavaScript会自动调整显示数量，让视觉效果最佳。

运行效果如下图所示：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>js关键字球状旋转效果</title>

<style>

body{background:#09c;}

#div1{height:400px;width:450px; position:relative; margin:10px auto;}

#div1 a{position:absolute;top:0px;left:0px;color:#fff;font-weight:bold;padding:3px 6px;}

#div1 a:hover{border:1px solid #eee;background:#000;border-radius:5px;}

</style>

var radius = 150;

var dtr = Math.PI/180;

var d=300;

var mcList = [];

var active = false;

var lasta = 1;

var lastb = 1;

var distr = true;

var tspeed=2;

var size=250;

var mouseX=0;

var mouseY=0;

var howElliptical=1;

var aA=null;

var oDiv=null;

window.onload=function ()

{

var i=0;

var oTag=null;

oDiv=document.getElementById('div1');

aA=oDiv.getElementsByTagName('a');

for(i=0;i<aA.length;i++)

{

oTag={};

oTag.offsetWidth=aA[i].offsetWidth;

oTag.offsetHeight=aA[i].offsetHeight;

mcList.push(oTag);

}

sineCosine( 0,0,0 );

positionAll();

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38625184

粉丝: 4
资源: 947

JavaScript实现动态圆形标签云效果

JavaScript实现圆形浮动标签云效果

JavaScript实现图片浮动动画效果

Qt5中使用JavaScript实现图形旋转功能的实例解析

TweenMax.js + svg实现浮动的球演示动画效果源码.zip

简单的圆形放大效果

js实现简单的无缝轮播效果

MediumClapFlutter一个自定义浮动操作按钮FAB类似于Medium中的拍手效果

CSS3小球浮动按钮特效代码

CSS圆角边框制作指南与实例

HTML5 Canvas彩色浮动粒子特效.zip

最新资源