这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 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">
- <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();
- oDiv.onmouseover = function() {
- active = true;
- };
- oDiv.onmouseout = function() {
- active = false;
- };
- oDiv.onmousemove = function(ev) {
- var oEvent = window.event || ev;
- mouseX = oEvent.clientX - (oDiv.offsetLeft + oDiv.offsetWidth / 2);
- mouseY = oEvent.clientY - (oDiv.offsetTop + oDiv.offsetHeight / 2);
- mouseX /= 5;
- mouseY /= 5;
- };
- setInterval(update, 30);
- };
- function update() {
- var a;
- var b;
- if (active) {
- a = ( - Math.min(Math.max( - mouseY, -size), size) / radius) * tspeed;
- b = (Math.min(Math.max( - mouseX, -size), size) / radius) * tspeed;
- } else {
- a = lasta * 0.98;
- b = lastb * 0.98;
- }
- lasta = a;
- lastb = b;
- if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
- return;
- }
- var c = 0;
- sineCosine(a, b, c);
- for (var j = 0; j < mcList.length; j++) {
- var rx1 = mcList[j].cx;
- var ry1 = mcList[j].cy * ca + mcList[j].cz * ( - sa);
- var rz1 = mcList[j].cy * sa + mcList[j].cz * ca;
- var rx2 = rx1 * cb + rz1 * sb;
- var ry2 = ry1;
- var rz2 = rx1 * ( - sb) + rz1 * cb;
- var rx3 = rx2 * cc + ry2 * ( - sc);
- var ry3 = rx2 * sc + ry2 * cc;
- var rz3 = rz2;
- mcList[j].cx = rx3;
- mcList[j].cy = ry3;
- mcList[j].cz = rz3;
- per = d / (d + rz3);
- mcList[j].x = (howElliptical * rx3 * per) - (howElliptical * 2);
- mcList[j].y = ry3 * per;
- mcList[j].scale = per;
- mcList[j].alpha = per;
- mcList[j].alpha = (mcList[j].alpha - 0.6) * (10 / 6);
- }
- doPosition();
- depthSort();
- }
- function depthSort() {
- var i = 0;
- var aTmp = [];
- for (i = 0; i < aA.length; i++) {
- aTmp.push(aA[i]);
- }
- aTmp.sort(function(vItem1, vItem2) {
- if (vItem1.cz > vItem2.cz) {
- return - 1;
- } else if (vItem1.cz < vItem2.cz) {
- return 1;
- } else {
- return 0;
- }
- });
- for (i = 0; i < aTmp.length; i++) {
- aTmp[i].style.zIndex = i;
- }
- }
- function positionAll() {
- var phi = 0;
- var theta = 0;
- var max = mcList.length;
- var i = 0;
- var aTmp = [];
- var oFragment = document.createDocumentFragment();
- //随机排序
- for (i = 0; i < aA.length; i++) {
- aTmp.push(aA[i]);
- }
- aTmp.sort(function() {
- return Math.random() < 0.5 ? 1 : -1;
- });
- for (i = 0; i < aTmp.length; i++) {
- oFragment.appendChild(aTmp[i]);
- }
- oDiv.appendChild(oFragment);
- for (var i = 1; i < max + 1; i++) {
- if (distr) {
- phi = Math.acos( - 1 + (2 * i - 1) / max);
- theta = Math.sqrt(max * Math.PI) * phi;
- } else {
- phi = Math.random() * (Math.PI);
- theta = Math.random() * (2 * Math.PI);
- }
- //坐标变换
- mcList[i - 1].cx = radius * Math.cos(theta) * Math.sin(phi);
- mcList[i - 1].cy = radius * Math.sin(theta) * Math.sin(phi);
- mcList[i - 1].cz = radius * Math.cos(phi);
- aA[i - 1].style.left = mcList[i - 1].cx + oDiv.offsetWidth / 2 - mcList[i - 1].offsetWidth / 2 + 'px';
- aA[i - 1].style.top = mcList[i - 1].cy + oDiv.offsetHeight / 2 - mcList[i - 1].offsetHeight / 2 + 'px';
- }
- }
- function doPosition() {
- var l = oDiv.offsetWidth / 2;
- var t = oDiv.offsetHeight / 2;
- for (var i = 0; i < mcList.length; i++) {
- aA[i].style.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
- aA[i].style.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
- aA[i].style.fontSize = Math.ceil(12 * mcList[i].scale / 2) + 8 + 'px';
- aA[i].style.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
- aA[i].style.opacity = mcList[i].alpha;
- }
- }
- function sineCosine(a, b, c) {
- sa = Math.sin(a * dtr);
- ca = Math.cos(a * dtr);
- sb = Math.sin(b * dtr);
- cb = Math.cos(b * dtr);
- sc = Math.sin(c * dtr);
- cc = Math.cos(c * dtr);
- }
- </script>
- </head>
- <body>
- <!-- 代码开始 -->
- <div id="div1">
- <a href="#" target="_blank">
- 起名取名
- </a>
- <a href="#" target="_blank">
- 宣传策划
- </a>
- <a href="#" target="_blank">
- 网游试玩
- </a>
- <a href="#" target="_blank">
- 短信表白
- </a>
- <a href="#" target="_blank">
- 外语翻译
- </a>
- <a href="#" target="_blank">
- 产品推广
- </a>
- <a href="#" target="_blank">
- 网络营销
- </a>
- <a href="#" target="_blank">
- 动漫设计
- </a>
- <a href="#" target="_blank">
- 招聘求职
- </a>
- <a href="#" target="_blank">
- 家居装修
- </a>
- <a href="#" target="_blank">
- 影视创作
- </a>
- <a href="#" target="_blank">
- 照片美化
- </a>
- <a href="#" target="_blank">
- 产品设计
- </a>
- <a href="#" target="_blank">
- 包装设计
- </a>
- <a href="#" target="_blank">
- Logo设计
- </a>
- <a href="#" target="_blank">
- 海报设计
- </a>
- <a href="#" target="_blank">
- 程序开发
- </a>
- <a href="#" target="_blank">
- 网站开发
- </a>
- <a href="#" target="_blank">
- 配音配词
- </a>
- <a href="#" target="_blank">
- 产品推广
- </a>
- <a href="#" target="_blank">
- 网络营销
- </a>
- <a href="#" target="_blank">
- 动漫设计
- </a>
- <a href="#" target="_blank">
- 家居装修
- </a>
- <a href="#" target="_blank">
- 影视创作
- </a>
- <a href="#" target="_blank">
- 照片美化
- </a>
- </div>
- <!-- 代码结束 -->
- <div style="text-align:center;clear:both">
- <p>
- 适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
- </p>
- </div>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0410/270095.html