jquery 3D 구형 내 비게 이 션 의 글 분류

며칠 전 왼쪽 에 있 는 이 3D 구형 네 비게 이 션 의 글 분 류 를 썼 는데 여기 서 세부 사항 을 간단하게 기록 했다.효과:분류 제목 은 3D 구형 효 과 를 나타 내 고 분류 제목 을 클릭 하면 해당 분류 에 해당 하 는 추천 글 목록 이 팝 업 됩 니 다.효과 캡 처:HTML:
 
<div id="mainList">
<div id="list">
<ul>
<li><a class="HTML" onclick="ClickLink(this)" href="#">HTML</a></li>
<li><a class="CSS" onclick="ClickLink(this)" href="#">CSS</a></li>
<li><a class="JS" onclick="ClickLink(this)" href="#">JavaScript</a></li>
<li><a class="AJAX" onclick="ClickLink(this)" href="#">Ajax</a></li>
<li><a class="ASPNET" onclick="ClickLink(this)" href="#">Asp.net</a></li>
<li><a class="CSHARP" onclick="ClickLink(this)" href="#">C#</a></li>
<li><a class="DEBUG" onclick="ClickLink(this)" href="#">Debugging</a></li>
<li><a class="PERF" onclick="ClickLink(this)" href="#">Performance</a></li>
<li><a class="ARCHITERT" onclick="ClickLink(this)" href="#">Architect</a></li>
</ul>
</div>
핵심 JS:동적 생 성 3D 구형 구름+팝 업 모드 창-articlemap.js
 
$(function() {
var element = $('#list a'); ;
var offset = 0;
var stepping = 0.02;
var list = $('#list');
var $list = $(list)
$list.mousemove(function(e) {
var topOfList = $list.eq(0).offset().top
var listHeight = $list.height()
stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1;
});
for (var i = element.length - 1; i >= 0; i--) {
element[i].elemAngle = i * Math.PI * 2 / element.length;
}
setInterval(render, 50);
function render() {
for (var i = element.length - 1; i >= 0; i--) {
var angle = element[i].elemAngle + offset;
x = 120 + Math.sin(angle) * 30;
y = 45 + Math.cos(angle) * 40;
size = Math.round(15 - Math.sin(angle) * 15);
var elementCenter = $(element[i]).width() / 2;
var leftValue = (($list.width() / 2) * x / 100 - elementCenter) + "px"
$(element[i]).css("fontSize", size + "pt");
$(element[i]).css("opacity", size / 100);
$(element[i]).css("zIndex", size);
$(element[i]).css("left", leftValue);
$(element[i]).css("top", y + "%");
}
offset += stepping;
}
});
function ClickLink(item) {
var typName = $(item).text();
var links = null;
switch (typName) {
case "HTML":
links = TrainLinks(Links.HTML);
break;
case "CSS":
links = TrainLinks(Links.CSS);
break;
case "JavaScript":
links = TrainLinks(Links.JavaScript);
break;
case "Ajax":
links = TrainLinks(Links.Ajax);
break;
case "Asp.net":
links = TrainLinks(Links.Aspnet);
break;
case "C#":
links = TrainLinks(Links.CSharp);
break;
case "Debugging":
links = TrainLinks(Links.Debugging);
break;
case "Performance":
links = TrainLinks(Links.Performance);
break;
case "Architect":
links = TrainLinks(Links.Architect);
break;
}
CommonHelper.showNoBtnAlert(typName, links);
}
function TrainLinks(arr) {
var links = " , !";
if (arr.length > 0) {
links = '<div><ul>';
}
for (i = 0, j = arr.length; i < j; i++) {
links += '<li><a target="_blank" href="' + arr[i][0] + '">' + arr[i][1] + '</a></li>';
}
if (arr.length > 0) {
links += '</ul></div>';
}
return links;
}
추천 글 목록 을 보조 저장 하 는 JS(앞으로 이 파일 을 수정 하여 추천 글 을 유지 할 것):
 
var Links = {
HTML: [],
CSS: [["http://www.cnblogs.com/justinw/archive/2010/06/16/1758922.html", " 50 "]],
JavaScript: [
["http://www.cnblogs.com/justinw/archive/2009/11/27/1611728.html", "[ ]AjaxControlToolkitTests : "],
["http://www.cnblogs.com/justinw/archive/2009/11/30/1613391.html", "[ ]AjaxControlToolkitTests : (1) "],
["http://www.cnblogs.com/justinw/archive/2009/12/02/1615382.html", "[JavaScript] document.createDocumentFragment "],
],
Ajax: [],
Aspnet: [],
CSharp: [],
......
Performance: [
["http://www.cnblogs.com/justinw/archive/2009/11/26/1611397.html", "[ ] :dynaTrace Ajax Edition"]
]
}
기타:jQuery UI 의 Dialog 와 사용자 정의 CSS 설정 도 참조 하 였 습 니 다.구체 적 으로 실례 를 참고 하면 된다.소스 코드 다운로드

좋은 웹페이지 즐겨찾기