jqueryの記事分類 3D球面ナビゲーション_jquery-jsチュートリアル-php.cn

jqueryの記事分類 3D球面ナビゲーション_jquery

WBOY

リリース： 2016-05-16 18:23:39

オリジナル

1369 人が閲覧しました

先日、左記の3D全天球ナビゲーションの記事分類について書きましたが、その実装内容を簡単に記録しておきます。

効果:
カテゴリのタイトルをクリックすると、このカテゴリに対応するおすすめ記事のリストが表示されます。
エフェクトのスクリーンショット:
jqueryの記事分類 3D球面ナビゲーション_jquery

HTML:

コードをコピーコードは次のとおりです。

ul>

HTML

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

JavaScript

Ajax

Asp.net ;/li>

;デバッグ

パフォーマンス

Architect< ;/a>

Core JS: 3D 球状クラウドポップアップを動的に生成modal form-articlemap.js

コードをコピーコードは次のとおりです。 $(function () {

var 要素 = $('#list a') ;

var ステップ = 0.02;
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;
}
関数 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 ", サイズ "pt");
$(element[i]).css("opacity", size / 100);
$(element[i]).css("zIndex", size);
$(element[i] ).css("left", leftValue);
$(element[i]).css("top", y "%");オフセット = ステップ;
}
});
関数 ClickLink(item) {
var typName = $(item).text();
var links = null; (typName) {
case " HTML":
links = TrainLinks(Links.HTML);
case "CSS":
links = TrainLinks(Links.CSS); 🎜>break;
case " JavaScript":
links = TrainLinks(Links.JavaScript);
case "Ajax":
links = TrainLinks(Links.Ajax); 🎜>break;
case " Asp.net":
links = TrainLinks(Links.Aspnet);
case "C#":
links = TrainLinks(Links.CSharp) ;
ブレーク;
ケース "デバッグ":
ブレーク "パフォーマンス":
リンク = TrainLinks(Links.Performance) ;
break;
ケース "Architect":
links(Links.Architect);
CommonHelper.showNoBtnAlert(typName, links); }
function TrainLinks(arr) {
var links = "これは利用可能ですが、まだ利用できません。 ";
if (arr.length > 0) {
links = '

' ';
}
if (arr.length > 0) {
リンク = '

'; }
リンクを返す
}

推奨記事のリストの保存を支援する 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 自動テスト フレームワークの完全な分析 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のダイアログや一部のCSSカスタマイズ設定も引用詳細については、こちらの例を参照してください。
ソースコードをダウンロード