0

我已经在这个微调控件上工作了几天，虽然我没有太多运气让它按照我需要的方式工作。它最初是我在其他地方找到的代码，并根据我自己的需要重新调整用途——所以它只是有点超出我的想象。

HTML：

<ul class="picker">
    <li class="pickerItem"><span class="value">1st Item Test</span></li>
    <li class="pickerItem"><span class="value">2nd Item Test</span></li>
    <li class="pickerItem"><span class="value">3rd Item Test</span></li>
    <li class="pickerItem win"><span class="value">4th Item Test</span></li>
    <li class="pickerItem"><span class="value">5th Item Test</span></li>
    <li class="pickerItem"><span class="value">6th Item Test</span></li>
    <li class="pickerItem"><span class="value">7th Item Test</span></li>
    <li class="pickerItem"><span class="value">8th Item Test</span></li>
    <li class="pickerItem"><span class="value">9th Item Test</span></li>
    <li class="pickerItem"><span class="value">10th Item Test</span></li>
    <li class="pickerItem last"><span class="value">11th Item Test</span></li>
</ul>
<div class="clear"></div>
<p><a href="#" id="start">start</a></p>
<p>Position: <span id="position">0</span></p>
<p>Speed: <span id="speed">0</span></p>
<p>Deceleration: <span id="deceleration">0</span></p>

Javascript：

var marqueeRunning = false;
var winElement;
var fullSpeed = 60;
var speed = fullSpeed;
var deceleration = 3;
var rotationTotal = 10;
var currentRotation = 0;

$(document).ready(function() {

winElement = $(".pickerItem.win");
$(".pickerItem").last().addClass("last");
$(".picker").each(function() {
    var i = 0;
    $(this).find(".pickerItem").each(function() {
        var $this = $(this);
        $this.css("top", i);
        i += $this.height();
    });
});

$('#start').click(function() {
    if (!marqueeRunning) {
        speed = fullSpeed;
        $("#speed").html(speed);
        //marqueeRunning = true;                
        var countScrolls = $('.picker .pickerItem').length;

        marqueeRunning = true;
        for (var i = 0; i < countScrolls; i++) {
            doScroll($('.picker .pickerItem:nth-child(' + i + ')'));
        }

        setTimeout
        (
            function()
            {
                marqueeRunning = false;
            }, 
            1000
        );
    }
});
});

function slowDown()
{
var currentTop = Math.floor(winElement.css("top").replace("px",""));
/* -- Bounce Effect
if (currentTop != 0)
{
    newSpeed = speed;
    if (Math.abs(currentTop) < Math.abs(speed *4)) newSpeed = Math.floor(Math.abs(speed) - deceleration);
    if (newSpeed === 0)
    {
        newSpeed = speed;
    }
    if (currentTop > 0)
    {
       speed = Math.floor(Math.abs(newSpeed));
    }
    else
    {
       speed = -Math.floor(Math.abs(newSpeed));
    }
    if (Math.abs(currentTop) < 3 && Math.abs(speed) === 3) speed = currentTop;
}
*/
$("#speed").html(speed);
if (currentTop === 0)
{
    speed = 0;
    $("#speed").html(speed + " (complete)");
}
}

function doScroll($ele) {
//alert($ele.css("top"));
var top = parseInt($ele.css("top"));
//console.log(' Outside - ' + top + ' < -' + 3*fullSpeed);

if (top < -(3 * fullSpeed)) { //bit arbitrary!
//console.log(' Inside - ' + top + ' < -' + 3*fullSpeed);
    var $lastEle = $ele.closest('.picker').find(".last");
    $lastEle.removeClass("last");
    $ele.addClass("last");
    var top = (parseInt($lastEle.css("top")) + $lastEle.height());
    $ele.css("top", top);
}
$ele.animate({
    top: (parseInt(top) - speed)
}, 100, 'linear', function() {
    $("#position").html(winElement.css("top"));
    if ($ele.get(0) === winElement.get(0) && marqueeRunning === false) setTimeout(slowDown, 10);
    if (marqueeRunning || (Math.floor(winElement.css("top").replace("px","")) !== 0 && speed !== 0)) doScroll($(this))
});
 }

​ 你可以在这里查看当前版本：http: //jsfiddle.net/STLCajun/FYWtb/

我想要做的是让微调器旋转，然后在 5-6 次旋转后，减速到中间有“win”类的列表项。有人可以指出我正确的方向。另外，我不知道为什么，但是在第一组项目之后它会产生一个差距，我不知道如何摆脱它。

任何帮助将不胜感激。

4

1 回答 1

1

我用 scrollTo 做了一个简单的例子，为了使无限循环，我在滚动窗口中复制了你的项目数量，并在完成滚动到最后一个获胜项目时：

HTML几乎和你的一样，

CSS：

p {
 padding: 0px;
 margin: 0px;
}
.pickerItem {
 height:60px;
 width:298px;
 color: #000;
 border: 1px solid #ccc;
 text-align: center;
 font-size: 1.2em;
 font-weight: bold;
 list-style: none;
 margin: 0px;
 padding: 0px;
}

.value {
  display: block;
  margin-top: 15px; 
  padding: 0px;
}

.picker {
  margin: 0px;
  height: 220px;
  width:300px;
  border: solid 1px black;
  position: relative;
  overflow: hidden;
  background-image: url(http://i.imgur.com/hMWRu.jpg);
  padding: 0px;
}
.clear {
  clear:both;
}
.win span{
 background:blue; 
}

JS

$.easing.elasout = function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t===0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*0.3;
        if (a < Math.abs(c)) { a=c;  s=p/4; }
        else s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    };




$(function() {
  var picker=$('.picker');
  var added_items=picker.children('li').clone(true);
  picker.append(added_items);
  var last=picker.children().last();
  var first=picker.children().first();
  var stop=false;
  var win=$('.picker .win').last();
  var start=function() {
    $(this).unbind('click');
    stop=false;
  scroll();  
    setTimeout(function() {
     stop=true; 
    },1000);
  };
  var scroll=function()   {
    picker.scrollTo(last,500,{ onAfter: nextstep});
  };
  var nextstep=function() {
    if (stop) {
      picker.scrollTo(first);
      picker.scrollTo(win.prev(),2000,{easing: 'elasout'});
      $('#start').click(start);
      return;
    }
    picker.scrollTo(first);
    scroll();

  };
  $('#start').click(start);


});

初始脚本的最大问题是弄乱了全局范围，并且很难做简单的事情。

于 2012-11-18T02:05:39.403 回答