JavaScript实现的圆形浮动标签云效果实例资源-CSDN文库

161 浏览量 2021-01-21 12:42:14 上传评论收藏 153KB PDF 举报

资源推荐

资源详情

资源评论

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

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

<script type="text/javascript">

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

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip