3D标签JS特效

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

<head>

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

<title>3D标签JS特效</title>

<!-- <script type="text/javascript" src="./js/tags.js"></script> -->

<script type="text/javascript">

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 = 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(‘tagsList‘);


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. = function() {

active = true;

};


oDiv. = function() {

active = false;

};


oDiv. = 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>

<style type="text/css">

body {

background: #24313d;

}


#tagsList {

position: relative;

width: 450px;

height: 450px;

margin: 150px auto 0;

}


#tagsList a {

position: absolute;

top: 0px;

left: 0px;

font-family: Microsoft YaHei;

color: #fff;

font-weight: bold;

text-decoration: none;

padding: 3px 6px;

}


#tagsList a:hover {

color: #FF0000;

letter-spacing: 2px;

}

</style>

</head>

<body>

<div id="tagsList">

<a href="./NewFile.html" title="星级评分" target="_blank">星级评分</a> <a

href="./NewFile.html" title="层特效" target="_blank">层特效</a> <a

href="#/Article.aspx?kid=3" title="关键字">关键字</a> <a

href="#/Article.aspx?kid=4" title="拖拽">拖拽</a> <a

href="#/Article.aspx?kid=5" title="分页插件">分页插件</a> <a

href="#/Article.aspx?kid=6" title="时间插件">时间插件</a> <a

href="#/Article.aspx?kid=7" title="弹出层">弹出层</a> <a

href="#/Article.aspx?kid=8" title="数据统计">数据统计</a> <a

href="#/Article.aspx?kid=9" title="HTML5">HTML5</a> <a

href="#/Article.aspx?kid=10" title="置顶特效">置顶特效</a> <a

href="#/Article.aspx?kid=11" title="选项卡">选项卡</a> <a

href="#/Article.aspx?kid=12" title="导航菜单">导航菜单</a> <a

href="#/Article.aspx?kid=13" title="原创">原创</a> <a

href="#/Article.aspx?kid=14" title="动画插件">动画插件</a> <a

href="#/Article.aspx?kid=15" title="实用特效">实用特效</a> <a

href="#/Article.aspx?kid=16" title="table插件">table插件</a> <a

href="#/Article.aspx?kid=17" title="文字特效">文字特效</a> <a

href="#/Article.aspx?kid=18" title="图片特效">图片特效</a> <a

href="#/Article.aspx?kid=19" title="在线客服">在线客服</a> <a

href="#/Article.aspx?kid=20" title="瀑布流">瀑布流</a> <a

href="#/Article.aspx?kid=21" title="网友蘑菇">网友蘑菇</a>

</div>

</body>

</html>


本文出自 “jquerymobile” 博客,谢绝转载!

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。