دائري دوارة / قائمة مكبرة مع مسج

Question

أحاول تقديم قائمة تحتوي على 5 عناصر / أيقونات مع المرء المحدد في الوسط. النقر فوق اليسار أو اليمين في هذا الرمز المركزي، يدور القائمة اليسرى أو اليمين، والتفاؤ بجولة الحواف وتحريك أي عنصر كان الأقرب إلى الحافة مرة أخرى عبر الجانب الآخر. ينقلك النقر فوق العنصر المركزي إلى عنوان URL المرتبط.

يجب أن تكبر القائمة أيضا في وسيلة مماثلة ل Dock OS X باستثناء مستويات التكبير بناء على موضع وليس Mouseover.

لقد صنعت مخططا من الأسهل فهمه من التشتت.

_{(مصدر: yfrog.com.)}

لقد تمكنت من تربيتها معا إصدار مسج بسيط، حيث تبادل العناصر المواضع حسب الحاجة، ولكن لا يمكن معرفة كيفية تحريك هذه الحركة، وخاصة التفاف حول جزء الحواف، وتغيير الحجم بناء على الموضع.

أنا أظن الرمز الخاص بي ربما ليس هو الأفضل أيضا :)

HTML كما يلي:

<div id="nav">
<div id="leftnav"></div>
<div id="rightnav"></div>
<div id="navblock1" class="navblock">
    one
</div>
<div id="navblock2" class="navblock">
    two
</div>
<div id="navblock3" class="navblock">
    three
</div>
<div id="navblock4" class="navblock">
    four
</div>
<div id="navblock5" class="navblock">
    five
</div>

و JS:

function rotateNav(direction) {
var change = (direction=='left')?(-1):(+1);
$('div.navblock').each(function() {
    oldPos = parseInt($(this).attr('id').substr(9));
    newPos = oldPos+change;
    if (newPos == 0)
        newPos = 5;
    else if (newPos == 6)
        newPos = 1;
    $(this).attr('id','navblock'+newPos);
});
}
$(document).ready(function(){
$("#leftnav").click(function() {
    rotateNav('right');
});
$("#rightnav").click(function() {
    rotateNav('left');
});

});

جميع العناصر .NAVBLOCK محاسبة تماما. عناصر #leftnav و #rightnav أيضا ولديها مؤشر Z أعلى تطفو فوق العناصر / الرموز.

لقد بحثت في متضافات JQuery المختلفة ولكن لا شيء يبدو قريبا من ما أحتاج إليه.

Answer 1

بدلا من التغيير id السمات (التي لا ينبغي أن تفعلها حقا في المقام الأول) يمكنك تغيير فئات CSS واستخدام jQuery UI switchClass() طريقة لتحريك الدوران.

سيكون لديك أيضا القيام قليلا من clone()جي لجعلها تبدو وكأنها الحافة navblockلقد تناظرت إلى الجانب الآخر من القطعة وبعض queue()/dequeue()جي للتعامل مع نقرات متعددة.

عرض العمل:

http://jsbin.com/ovemu. (قابلة للتحرير عبر http://jsbin.com/ovemu/edit.)

المصدر الكامل:

جافا سكريبت

function rotateNav(direction) {
if (direction === 'left') {
  var change = 1;
  $('.navblock5').clone()
    .removeClass('navblock5')
    .addClass('navblock0')
    .appendTo('#nav');
}
else {
  var change = -1;
  $('.navblock1').clone()
    .removeClass('navblock1')
    .addClass('navblock6')
    .appendTo('#nav');
}

$('div.navblock').each(function() {
  var oldClassName = this.className.split(' ')[1],
    oldPos = parseInt(oldClassName.substr(8)),
    newPos = oldPos + change;

    $(this).switchClass(
      oldClassName,
      'navblock'+newPos,
      'fast', 
      function () { 
        var animated = $('.navblock:animated').length;
        if (newPos === 6 || newPos === 0) {
          $(this).remove(); 
        } 
        if (animated === 1) {
          $('#nav').dequeue();
        }
      }
    );
});
}

$(document).ready(function(){
$("#leftnav").click(function() {
  $('#nav').queue(function(){rotateNav('right');});
});
$("#rightnav").click(function() {
  $('#nav').queue(function(){rotateNav('left');});
});
});

CSS.

#nav {العرض: 580 بكسل؛ الارتفاع: 120px؛ الموقف: قريب؛ اليسار: 150px؛ إخفاء الفائض؛ } .navblock {الارتفاع: 100px؛ العرض: 100px؛ الموقف: المطلق؛ أعلى: 10 بكسل؛ Z- مؤشر: 50؛ لون الخلفية: رمادي؛ } .navblock0 {اليسار: -110px؛ } .navblock1 {اليسار: 10 بكسل؛ } .navblock2 {اليسار: 120px؛ } .navblock3 {اليسار: 230 بكسل؛ العرض: 120px؛ الارتفاع: 120px؛ أعلى: 0؛} .navblock4 {اليسار: 360px؛ } .navblock5 {اليسار: 470px؛ } .navblock6 {اليسار: 590px؛ } #LETNAV، #RIGHTNAV {موضع: مطلق؛ Z- مؤشر: 100؛ الارتفاع: 120px؛ العرض: 228px؛ } #tleftnav {اليسار: 0؛ } #rightnav {الحق: 0؛ } / * uncomment ما يلي للمساعدة في التصحيح أو رؤية الأعمال الداخلية * / / * #NAV {الحدود: 1px الصلبة الأخضر؛ تجاوز: مرئي؛ } #ftnav، #rightnav {الحدود: 1px الصلبة الأزرق؛ } * /

لغة البرمجة

<div id="nav">
<div id="leftnav"></div>
<div id="rightnav"></div>

<div class="navblock navblock1">one</div>
<div class="navblock navblock2">two</div>
<div class="navblock navblock3">three</div>
<div class="navblock navblock4">four</div>
<div class="navblock navblock5">five</div>

Answer 2

بدلا من القيام بذلك بنفسك وأضيع الوقت عند الحصول على هذا للعمل بشكل صحيح أقترح عليك استخدام الحلول الموجودة منها. هنا عدد قليل من المؤشرات (أعتقد أن الكثير يمكن العثور عليها باستخدام جوجل

jquery: mac-like قفص الاتهام

icon icon قفص الاتهام (v2)

MAC CSS Dock Menu

JQuery Mimicking The OS X Dock

بسيطة osx الرصيف مع jQuery

icondock jquery plugin.

Answer 3

يبدو أنك على الطريق الصحيح. قضية واحدة هي أن هذا الخط

oldPos = parseInt($(this).attr('id').substr(9));

يجب استخدام 8 في Substr:

oldPos = parseInt($(this).attr('id').substr(8));