Jquery 3D 구형 탐색의 기사 분류_jquery-JS 튜토리얼-php.cn

Jquery 3D 구형 탐색의 기사 분류_jquery

WBOY

풀어 주다： 2016-05-16 18:23:39

원래의

1365명이 탐색했습니다.

며칠 전 왼쪽에 3D 구형 내비게이션의 기사 분류에 대해 썼습니다. 여기에 구현 세부 사항에 대한 간략한 기록이 있습니다.

효과:
카테고리 제목을 클릭하면 해당 카테고리에 해당하는 추천글 목록이 팝업됩니다.
효과 스크린샷:
Jquery 3D 구형 탐색의 기사 분류_jquery

HTML:

코드 복사 코드는 다음과 같습니다.

ul>

HTML

;a class=" CSS" onclick="ClickLink(this)" href="#">CSS

JavaScript

Ajax

Asp.net< ;/li>

;디버깅

성능

Architect< ;/a>

핵심 JS: 3D 구형 구름 팝업을 동적으로 생성 modal form-articlemap.js

코드 복사 코드는 다음과 같습니다.

$(function () {

var 요소 = $('#list a');
var offset = 0;
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 수학 .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 ", 크기 "pt");
$(element[i]).css("불투명도", 크기 / 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()
varlinks = null; (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(Links.Ajax); 🎜>break;
case " Asp.net":
links = TrainLinks(Links.Aspnet);
break
case "C#":
links = TrainLinks(Links.CSharp) ;
break;
케이스 "디버깅":
links = TrainLinks(Links.Debugging);
break
케이스 "성능":
links(Links.Performance) ;
break;
케이스 "Architect":
trainLinks(Links.Architect)
break
}
CommonHelper.showNoBtnAlert
}
function TrainLinks(arr) {
varlinks = "사용할 수 있지만 아직은 아닙니다! ";
if (arr.length > 0) {
links = '

' ';
}
if (arr.length > 0) {
links = '

코드 복사 코드는 다음과 같습니다.

 
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 자동 테스트 프레임워크 1의 전체 분석: 아키텍처"], 
["http://www.cnblogs.com/justinw/archive/2009 /11/30/1613391.html ", "[원본] AjaxControlToolkitTests 자동 테스트 프레임워크의 전체 분석 2부: 구현(1) "], 
["http://www.cnblogs.com/justinw/archive/ 2009/12/02/1615382.html", "[JavaScript] 성능 최적화를 위해 document.createDocumentFragment 사용"], 
], 
Ajax: [], 
Aspnet: [], 
CSharp : [], 
.... .... 
성능: [ 
["http://www.cnblogs.com/justinw/archive/2009/11/26/1611397.html", " [권장] 프론트엔드 성능 분석 도구: dynaTrace Ajax Edition"] 
] 
} 

기타:
jQuery UI의 Dialog 및 일부 사용자 정의 CSS 설정도 인용됩니다. 자세한 내용은 여기를 참조하세요.
소스코드 다운로드