Benutzer:Baum64/TagCloud

index.html

<!DOCTYPE html>
<html>
<head>
	<link href="style.css" rel="stylesheet" type="text/css"/>
	<script src="tagsCloud.js"></script>
</head>
<body>
<div id="tagscloud">
      <a href="https://de.wikipedia.org/wiki/Asphalt" target="_blank" class="tagc1" style="left: 113.554px; top: 30.1925px; z-index: 102; opacity: 0.118615; display: none;">Asphalt</a>
	  <a href="https://de.wikipedia.org/wiki/Bernstein" target="_blank" class="tagc3" style="left: 136.828px; top: 34.752px; z-index: 102; opacity: 0.111076; color: rgb(255, 255, 255); padding: 5px; display: none;">Bernstein</a>
	  <a href="https://de.wikipedia.org/wiki/Blei" target="_blank" class="tagc3" style="left: 95.415px; top: 30.9076px; z-index: 103; opacity: 0.119797; color: rgb(255, 255, 255); padding: 5px; display: none;">Blei</a>
	  <a href="https://de.wikipedia.org/wiki/Keramischer_Faserverbundwerkstoff" target="_blank" class="tagc1" style="left: 58.2577px; top: 45.3038px; z-index: 107; opacity: 0.181538; color: rgb(255, 255, 255); padding: 5px;">Keramischer Faserverbundwerkstoff</a>
	  <a href="https://de.wikipedia.org/wiki/Kristallisation_(Polymer)" target="_blank" class="tagc3" style="left: 65.4534px; top: 42.9294px; z-index: 119; opacity: 0.389813; color: rgb(255, 255, 255); padding: 5px;">Kristallisation (Polymer)</a>
	  <a href="https://de.wikipedia.org/wiki/Kunststoff" target="_blank" class="tagc2" style="left: 108.202px; top: 30.0199px; z-index: 102; opacity: 0.117901; color: rgb(255, 255, 255); padding: 5px; display: none;">Kunststoff</a>
	  <a href="https://de.wikipedia.org/wiki/Linoleum" target="_blank" class="tagc2" style="left: 155.111px; top: 56.2987px; z-index: 143; opacity: 1.20117; color: rgb(255, 255, 255); padding: 5px;">Linoleum</a>
	  <a href="https://de.wikipedia.org/wiki/Lithium" target="_blank" class="tagc1" style="left: 178.188px; top: 63.6679px; z-index: 101; opacity: 0.102853; display: none;">Lithium</a>
	  <a href="https://de.wikipedia.org/wiki/Mangan" target="_blank" class="tagc1" style="left: 166.312px; top: 51.4474px; z-index: 101; opacity: 0.102451; display: none;">Mangan</a>
	  <a href="https://de.wikipedia.org/wiki/Metallurgie" target="_blank" class="tagc3" style="left: 126.4px; top: 31.9141px; z-index: 102; opacity: 0.11366; color: rgb(255, 255, 255); padding: 5px; display: none;">Metallurgie</a>
	  <a href="https://de.wikipedia.org/wiki/Papier" target="_blank" class="tagc2" style="left: 70.8082px; top: 35.6041px; z-index: 103; opacity: 0.120472; color: rgb(255, 255, 255); padding: 5px; display: none;">Papier</a>     
</div>
</body>
</html>

style.css

#tagscloud{
	width:250px;
	height:260px;
	position:relative;
	font-size:12px;
	color:#333;
	margin:20px auto 0;
	text-align:center;
}
#tagscloud a{
	position:absolute;
	top:0px;
	left:0px;
	color:#333;
	font-family:Arial;
	text-decoration:none;
	margin:0 10px 15px 0;
	line-height:18px;
	text-align:center;
	font-size:12px;
	padding:1px 5px;
	display:inline-block;
	border-radius:3px;
}
#tagscloud a.tagc1{
	background:#666;
	color:#fff;
}
#tagscloud a.tagc2{
	background:#F16E50;
	color:#fff;
}
#tagscloud a.tagc3{
	background:#006633;
	color:#fff;
}
#tagscloud a:hover{
	color:#fff;
	background:#0099ff;
}

tagsCloud.js

var radius = 90;
var d = 200;
var dtr = Math.PI / 180;
var mcList = [];
var lasta = 1;
var lastb = 1;
var distr = true;
var tspeed = 5;
var size = 200;
var mouseX = 0;
var mouseY = 10;
var howElliptical = 1;
var aA = null;
var oDiv = null;
window.onload=function ()
{
	var i=0;
	var oTag=null;
	oDiv=document.getElementById('tagscloud');
	aA=oDiv.getElementsByTagName('a');
	for(i=0;i<aA.length;i++)
	{
		oTag={};		
		aA[i].onmouseover = (function (obj) {
			return function () {
				obj.on = true;
				this.style.zIndex = 9999;
				this.style.color = '#fff';
				this.style.padding = '5px 5px';
				this.style.filter = "alpha(opacity=100)";
				this.style.opacity = 1;
			}
		})(oTag)
		aA[i].onmouseout = (function (obj) {
			return function () {
				obj.on = false;
				this.style.zIndex = obj.zIndex;
				this.style.color = '#fff';
				this.style.padding = '5px';
				this.style.filter = "alpha(opacity=" + 100 * obj.alpha + ")";
				this.style.opacity = obj.alpha;
				this.style.zIndex = obj.zIndex;
			}
		})(oTag)
		oTag.offsetWidth = aA[i].offsetWidth;
		oTag.offsetHeight = aA[i].offsetHeight;
		mcList.push(oTag);
	}
	sineCosine( 0,0,0 );
	positionAll();
	(function () {
            update();
            setTimeout(arguments.callee, 40);
        })();
};
function update()
{
	var a, b, c = 0;
        a = (Math.min(Math.max(-mouseY, -size), size) / radius) * tspeed;
        b = (-Math.min(Math.max(-mouseX, -size), size) / radius) * tspeed;
        lasta = a;
        lastb = b;
        if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01) {
            return;
        }
        sineCosine(a, b, c);
        for (var i = 0; i < mcList.length; i++) {
            if (mcList[i].on) {
                continue;
            }
            var rx1 = mcList[i].cx;
            var ry1 = mcList[i].cy * ca + mcList[i].cz * (-sa);
            var rz1 = mcList[i].cy * sa + mcList[i].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[i].cx = rx3;
            mcList[i].cy = ry3;
            mcList[i].cz = rz3;

            per = d / (d + rz3);

            mcList[i].x = (howElliptical * rx3 * per) - (howElliptical * 2);
            mcList[i].y = ry3 * per;
            mcList[i].scale = per;
            var alpha = per;
            alpha = (alpha - 0.6) * (10 / 6);
            mcList[i].alpha = alpha * alpha * alpha - 0.2;
            mcList[i].zIndex = Math.ceil(100 - Math.floor(mcList[i].cz));
        }
        doPosition();
}
function positionAll()
{
	var phi = 0;
    var theta = 0;
    var max = mcList.length;
    for (var i = 0; i < max; i++) {
        if (distr) {
            phi = Math.acos(-1 + (2 * (i + 1) - 1) / max);
            theta = Math.sqrt(max * Math.PI) * phi;
        } else {
            phi = Math.random() * (Math.PI);
            theta = Math.random() * (2 * Math.PI);
        }
        //坐标变换
        mcList[i].cx = radius * Math.cos(theta) * Math.sin(phi);
        mcList[i].cy = radius * Math.sin(theta) * Math.sin(phi);
        mcList[i].cz = radius * Math.cos(phi);

        aA[i].style.left = mcList[i].cx + oDiv.offsetWidth / 2 - mcList[i].offsetWidth / 2 + 'px';
        aA[i].style.top = mcList[i].cy + oDiv.offsetHeight / 2 - mcList[i].offsetHeight / 2 + 'px';
    }
}
function doPosition()
{
	var l = oDiv.offsetWidth / 2;
        var t = oDiv.offsetHeight / 2;
        for (var i = 0; i < mcList.length; i++) {
            if (mcList[i].on) {
                continue;
            }
            var aAs = aA[i].style;
            if (mcList[i].alpha > 0.1) {
                if (aAs.display != '')
                    aAs.display = '';
            } else {
                if (aAs.display != 'none')
                    aAs.display = 'none';
                continue;
            }
            aAs.left = mcList[i].cx + l - mcList[i].offsetWidth / 2 + 'px';
            aAs.top = mcList[i].cy + t - mcList[i].offsetHeight / 2 + 'px';
            //aAs.fontSize=Math.ceil(12*mcList[i].scale/2)+8+'px';
            //aAs.filter="progid:DXImageTransform.Microsoft.Alpha(opacity="+100*mcList[i].alpha+")";
            aAs.filter = "alpha(opacity=" + 100 * mcList[i].alpha + ")";
            aAs.zIndex = mcList[i].zIndex;
            aAs.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);
}

Testliste

Liste manuell aktualisieren | SPARQL | Bilder suchen

Diese Liste wird periodisch von Wikidata aus durch diesen Bot automatisch generiert. Manuelle Bearbeitungen werden beim nächsten Update gelöscht!

Item	Name	Beschreibung	Tätigkeit
Q22999966	Jürgen Eckert	deutscher Ingenieur und Werkstoffwissenschaftler	Materialwissenschaft Hochschullehrer
Q95984080	Maja Kuzmanović	Forscher	Materialwissenschaft
Q111771532	Takeshi Kanazawa	Schiffbauingenieur, Tragwerksplaner und Materialwissenschaft (1920–2003) ♂	Schiffbauingenieur Tragwerksplaner Materialwissenschaft
Q88924861	Yayuan Liu	Forscherin und Materialwissenschaftin (*1992) ♀	Forscher Materialwissenschaft