موضوع:
1. تبين أن هناك حالات غير كافية ولا يمكن تحريكها (ليتم حلها)
2. لا يمكن للنظام التلوين بشكل عشوائي وتلقائي (سيتم حله)
أولاً، موقع ويب رفيع المستوى يستخدم Tag Cloud - موقع مشاركة الصور Flickr. مصمم سحابة العلامات هو مصمم التفاعل ستيوارت باترفيلد. وفي وقت لاحق، تم اعتماد سحابة العلامات من قبل مواقع الويب مثل del وTechnorati.
أول ظهور منشور لسحابة العلامات (أو على الأقل قائمة مرجحة) التي تتلخص في "ملفات مموهة" في الغالب كان في Microserfs لدوجلاس كوبلاند (1995). في Lester Leaps Out، يستخدم الشاعر الويلزي لانداو نفس المنطق لترجيح النص لإنشاء خريطة نصية رسومية لوصف موسيقى الجاز. تظهر القصيدة في كتابه Magic Fire شيفروليه (1980).
مقتطف كود HTML
انسخ رمز الكود كما يلي:
<!DOCTYPE html>
<أتش تي أم أل>
<الرؤوس>
<meta charset=utf-8 />
<title>ملصق كروي ثلاثي الأبعاد</title>
<link rel="stylesheet" type="text/css" href="3Dtag_style.css" />
<script type="text/javascript" src="3Dtag.js"></script>
</رؤوس>
<الجسم>
<div معرف = "div1">
<a href="#">فئات الفاكهة</a>
<a href="#">أبل</a>
<a href="#">الموز</a>
<a href="#">البطيخ</a>
<a href="#">3Dtag</a>
<a href="#">تحسين محركات البحث</a>
<a href="#">فاكهة التنين</a>
<a href="#">كمثرى</a>
<a href="#">كروية</a>
<a href="#">CSS</a>
<a href="#">PHP</a>
<a href="#">جافا</a>
<a href="#">وراثة</a>
<a href="#">C#</a>
<a href="#">OOP</a>
<a href="#">فئات اللغة</a>
<a href="#">الطماطم</a>
<a href="#">C++</a>
<a href="#">ج</a>
<a href="#">الطماطم</a>
<a href="#">عرض توضيحي</a>
</div>
<p>علامة كروية ثلاثية الأبعاد</p>
</body></html>
مقتطف جافا سكريبت
انسخ رمز الكود كما يلي:
var radius = 120; // نصف قطر الدوران;
فار دتر = Math.PI/180;
فارد=300;
var mcList = [];
فار نشط = خطأ؛
فار لاستا = 1؛
فار لاستب = 1؛
فار توزيع = صحيح؛
فار tspeed=10;
حجم فار = 250؛
فار mouseX=0;
فار mouseY=0;
var howElliptical=1;
var aA=null;
var oDiv=null;
window.onload=function ()
{
فار ط=0;
var oTag=null;
oDiv=document.getElementById('div1');
aA=oDiv.getElementsByTagName('a');
ل(i=0;i<aA.length;i++)
{
oTag={};
oTag.offsetWidth=aA[i].offsetWidth;
oTag.offsetHeight=aA[i].offsetHeight;
mcList.push(oTag);
}
جيب التمام( 0,0,0 );
PositionAll();
oDiv.onmouseover=function ()
{
نشط = صحيح؛
};
oDiv.onmouseout=function ()
{
نشط = خطأ؛
};
oDiv.onmousemove=وظيفة (إيف)
{
var oEvent=window.event ||.
mouseX=oEvent.clientX-(oDiv.offsetLeft+oDiv.offsetWidth/2);
mouseY=oEvent.clientY-(oDiv.offsetTop+oDiv.offsetHeight/2);
mouseX/=5;
mouseY/=5;
};
setInterval(update, 30);
};
تحديث الوظيفة ()
{
فار أ ؛
فار ب؛
إذا (نشط)
{
a = (-Math.min( Math.max( -mouseY, -size ), size ) / radius ) * tspeed;
b = (Math.min( Math.max( -mouseX, -size ), size ) / radius ) * tspeed;
}
آخر
{
أ = لاستا * 0.98؛
ب = لاستب * 0.98؛
}
lasta=a;
lastb=b;
إذا(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
{
يعود؛
}
فار ج=0;
جيب الجيب (أ، ب، ج)؛
ل(فار ي=0;ي<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;
فار rx2=rx1*cb+rz1*sb;
فار ry2=ry1;
فار rz2=rx1*(-sb)+rz1*cb;
فار rx3=rx2*cc+ry2*(-sc);
فار ry3=rx2*sc+ry2*cc;
فار rz3=rz2;
mcList[j].cx=rx3;
mcList[j].cy=ry3;
mcList[j].cz=rz3;
لكل=د/(د+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();
DeepSort();
}
فرز عمق الوظيفة ()
{
فار ط=0;
var aTmp=[];
ل(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
الوظيفة (vItem1، vItem2)
{
إذا (vItem1.cz>vItem2.cz)
{
العودة -1؛
}
وإلا إذا (vItem1.cz<vItem2.cz)
{
العودة 1؛
}
آخر
{
العودة 0؛
}
}
);
ل(i=0;i<aTmp.length;i++)
{
aTmp[i].style.zIndex=i;
}
}
موضع الوظيفة الكل ()
{
فارفي=0;
فار ثيتا=0;
var max=mcList. length;
فار ط=0;
var aTmp=[];
var oFragment=document.createDocumentFragment();
// فرز عشوائي
ل(i=0;i<aA.length;i++)
{
aTmp.push(aA[i]);
}
aTmp.sort
(
وظيفة()
{
إرجاع Math.random()<0.5?1:-1;
}
);
ل(i=0;i<aTmp.length;i++)
{
oFragment.appendChild(aTmp[i]);
}
oDiv.appendChild(oFragment);
for(var i=1; i<max+1; i++){
إذا (توزيع)
{
phi = Math.acos(-1+(2*i-1)/max);
ثيتا = Math.sqrt(max*Math.PI)*phi;
}
آخر
{
phi = Math.random()*(Math.PI);
ثيتا = 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';
}
}
الدالة 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;
}
}
دالة جيب التمام (أ، ب، ج)
{
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);
سم مكعب = Math.cos(c * dtr);
}
مقتطف كود CSS
انسخ رمز الكود كما يلي:
الجسم {الخلفية: #000 url(index.png) مركز عدم التكرار 230px;}
#div1 {الموضع: العرض: 450 بكسل؛ الارتفاع: 450 بكسل؛
#div1 a {position:absolute; left:0px;
#div1 أ:تحويم {border: 1px Solid #eee الخلفية: #000 }
#div1 .أزرق {اللون:أزرق؛}
#div1 .أحمر {اللون:أحمر؛}
#div1 .أصفر {اللون:أصفر؛}
p { الخط: 16 بكسل Microsoft YaHei؛ محاذاة النص: المركز؛
pa { حجم الخط: 14 بكسل اللون: #ba0c0c }
با: تحوم { اللون: أحمر }