这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 简单实现标签云效果, 基于 miaov.js 文件实现标签云的 3D 滚动效果, 非常简单实用, 需要的朋友可以参考下
本文实例讲述了 js 简单实现标签云效果。分享给大家供大家参考。具体如下:
这里的 JavaScript 标签云,基于妙味课堂 miaov.js 文件,非常流行的网页效果,在网页的右侧或左侧开辟一小块地方,用来显示热门的标签,形式就选择标签云吧,绝对酷哦,相信你也会喜欢。
运行效果如下图所示:
具体代码如下:
- <!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=utf-8" />
- <title>
- js标签云
- </title>
- <style>
- body {background: #000;} #div1 {position:relative; width:450px; height:450px;
- margin: 20px auto 0; } #div1 a {position:absolute; top:0px; left:0px; font-family:
- Microsoft YaHei; color:#fff; font-weight:bold; text-decoration:none; padding:
- 3px 6px; } #div1 a:hover {border: 1px solid #eee; background: #000; } #div1
- .blue {color:blue;} #div1 .red {color:red;} #div1 .yellow {color:yellow;}
- p { font: 16px Microsoft YaHei; text-align: center; color: #ba0c0c; } p
- a { font-size: 14px; color: #ba0c0c; } p a:hover { color: red; } p a:hover
- {color:red; }
- </style>
- <script type="text/javascript" src="miaov.js">
- </script>
- </head>
- <body>
- <div id="div1">
- <a href="#">
- JS课程
- </a>
- <a href="#" class="red">
- 教程
- </a>
- <a href="#">
- 回头一眸
- </a>
- <a href="#">
- 精品
- </a>
- <a href="#" class="blue">
- 源码下载
- </a>
- <a href="#">
- SEO
- </a>
- <a href="#" class="red">
- 特效
- </a>
- <a href="#">
- 继承
- </a>
- <a href="#" class="red">
- phperz
- </a>
- <a href="#" class="blue">
- OOP
- </a>
- <a href="#">
- XHTML
- </a>
- <a href="#">
- W3C
- </a>
- <a href="#">
- 石川
- </a>
- <a href="#" class="yellow">
- 人生如歌
- </a>
- <a href="#">
- blue
- </a>
- </div>
- </body>
- </html>
miaov.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 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);
- }
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0625/270093.html