6

重複の可能性：
jqueryでの循環スクローラーの実装

マーキーとまったく同じように機能する垂直スクローラーを作成したいと思います。しかし、マーキーを使用する場合、コンテンツ全体が完全に上がった後にのみ戻ってくるように、継続的にしたいのですが、継続的にしたいと思います。

これは私が持っているものです... http：//jsfiddle.net/JWfaf/1/

一方向だけにしたいので、スクロールし続けます。達成したいことをクリアしたと思います

HTML

<div class="con">
   <ul>
      <li></li>
      <li></li>
      <li></li>
       <li></li>
   </ul>
</div>​

JavaScript

function animatethis(targetElement, speed) {
$(targetElement).animate({ marginTop: "+=250px"},
{
    duration: speed,
    complete: function ()
    {
        targetElement.animate({ marginTop: "-=250px" },
        {
            duration: speed,
            complete: function ()
            {
                animatethis(targetElement, speed);
            }
        });
    }
});
};

animatethis($('.con ul li:first-child'), 10000);​
4

2 に答える 2

12

作業デモ： http： //jsfiddle.net/rNXs9/1/

HTML：

<div id="verticalScroller">
    <div>1 Lorem ipsum dolor sit</div>
    <div>2 Lorem ipsum dolor sit</div>
    <div>3 Lorem ipsum dolor sit</div>
    <div>4 Lorem ipsum dolor sit</div>
</div>
​

CSS：

#verticalScroller {
    position: absolute;
    width:52px;
    height: 180px;
    overflow: hidden;
}

#verticalScroller > div {
    position:absolute;
    width:50px;
    height:50px;
}
​

JS：

window.verticalScroller = function($elem) {
    var top = parseInt($elem.css("top"));
    var temp = -1 * $('#verticalScroller > div').height();
    if(top < temp) {
        top = $('#verticalScroller').height()
        $elem.css("top", top);
    }
    $elem.animate({ top: (parseInt(top)-60) }, 600, function () {
      window.verticalScroller($(this))
    });
}


$(document).ready(function() {
    var i = 0;
    $("#verticalScroller > div").each(function () {
          $(this).css("top", i);
          i += 60;
          window.verticalScroller($(this));
    });
});

​
于 2012-11-04T19:49:38.427 に答える
2

ここにあなたは元気です。

コード

JS：

function animatethis(targetElement, speed) {
    $(targetElement).animate({ marginTop: "300px"},
    {
        duration: speed,
        complete: function ()
        {
            $(targetElement).css('marginTop','-450px');
            animatethis(targetElement, speed);
        }
    });
};

animatethis($('.con ul li:first-child'), 10000);​

CSS：

ul{display:block;width:110px;float:left;height:310px;background:#eee;overflow:hidden;}
li{display:block;width:100px;height:100px;background:#DDD;border-bottom:1px solid #FFF;margin-bottom:5px;}
.con{display:block;width:200px;height:300px;overflow:hidden;}

HTML：

<a href="#" class="click">click</a>
<div class="con">
<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>   
</ul></div>​
于 2012-11-04T19:16:16.163 に答える