Javascript - 用按鈕滑動div

Question

我在汽車圖片周圍制作了一個容器，並使用overflow-y: scroll這樣我就可以滾動它們了。 我怎么能這樣做，所以我有兩個按鈕，我可以點擊，所以我可以通過javascript或jquery滾動瀏覽它們？

目前的HTML是：

<div  class="event_container">

            <a href="/index.php?con=events&id=5">
        <div style="display: inline-block; background-image: url('img/events/event5.jpg')" class="">
            <p>Kør med de store!</p>
            <p>18-01-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=3">
        <div style="display: inline-block; background-image: url('img/events/event3.jpg')" class="">
            <p>Den nye FIAT 500!</p>
            <p>24-01-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=1">
        <div style="display: inline-block; background-image: url('img/events/event1.jpg')" class="">
            <p>Event 1</p>
            <p>30-04-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=2">
        <div style="display: inline-block; background-image: url('img/events/event2.jpg')" class="">
            <p>Test kør bughatti!</p>
            <p>03-06-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=4">
        <div style="display: inline-block; background-image: url('img/events/event4.jpg')" class="">
            <p>Skal du køre suziki?</p>
            <p>30-06-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>

Answer 1

我在汽車圖片周圍制作了一個容器，並使用overflow-y：滾動，這樣我就可以滾動它們了。 我怎么能這樣做，所以我有兩個按鈕，我可以點擊，所以我可以通過javascript或jquery滾動瀏覽它們？

以下是3種使用方法：

• jQuery的
• 普通的javascript
• CSS和JavaScript

使用CSS Transitions的最后一種方法提供了最流暢和最好的動畫。

方法1（共3個）

您可以使用jQuery的自定義animate({scrollTop: [value]})方法來上下滾動圖像。

jQuery中的工作示例：

 $(document).ready(function(){ $('button').eq(0).click(function(){ $('div').animate({scrollTop: $('div').scrollTop() -158 + 'px'}); }); $('button').eq(1).click(function(){ $('div').animate({scrollTop: $('div').scrollTop() +158 + 'px'}); }); }); 

 div, img, button { display: inline-block; vertical-align: top; } div { width: 596px; height: 152px; padding: 12px; background-color: rgb(63,63,63); overflow-y: auto; } img { display: inline-block; width: 100px; height: 140px; margin: 6px 6px 12px; color: rgb(255,255,255); background-color: rgb(255,127,0); } img:last-of-type { margin-bottom: 24px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <img alt="image-1" /> <img alt="image-2" /> <img alt="image-3" /> <img alt="image-4" /> <img alt="image-5" /> <img alt="image-6" /> <img alt="image-7" /> <img alt="image-8" /> <img alt="image-9" /> <img alt="image-10" /> <img alt="image-11" /> <img alt="image-12" /> <img alt="image-13" /> <img alt="image-14" /> <img alt="image-15" /> </div> <button type="button">Scroll Up</button> <button type="button">Scroll Down</button> 

---

方法2（共3個）

如果你想跳過jQuery，這里是使用普通javascript的替代版本。

普通javascript中的工作示例：

 var buttons = document.getElementsByTagName('button'); var imageContainer = document.getElementsByTagName('div')[0]; var scrollValue; var scrollDirection; function scroll() { scrollDirection = (this.textContent === 'Scroll Down' ? 1 : -1); scrollValue = (this.textContent === 'Scroll Down' ? 158 : -158); var startPoint = imageContainer.scrollTop; var scrollDiv = setInterval(function() { imageContainer.scrollTop += scrollDirection; if (imageContainer.scrollTop === (startPoint + scrollValue)) { scrollDirection = 0; clearInterval(scrollDiv); } }, 1); } for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', scroll, false); } 

 div, img, button { display: inline-block; vertical-align: top; } div { width: 596px; height: 152px; padding: 12px; background-color: rgb(63,63,63); overflow-y: auto; } img { display: inline-block; width: 100px; height: 140px; margin: 6px 6px 12px; color: rgb(255,255,255); background-color: rgb(255,127,0); } img:last-of-type { margin-bottom: 24px; } 

 <div> <img alt="image-1" /> <img alt="image-2" /> <img alt="image-3" /> <img alt="image-4" /> <img alt="image-5" /> <img alt="image-6" /> <img alt="image-7" /> <img alt="image-8" /> <img alt="image-9" /> <img alt="image-10" /> <img alt="image-11" /> <img alt="image-12" /> <img alt="image-13" /> <img alt="image-14" /> <img alt="image-15" /> </div> <button type="button">Scroll Up</button> <button type="button">Scroll Down</button> 

方法3（共3個）

正如您將要注意到的，上面的簡單javascript方法有點慢和生澀。 所以最后（與所有動畫一樣），最佳方法是部署一些CSS來處理動畫。

CSS和普通javascript中的工作示例：

 var buttons = document.getElementsByTagName('button'); var images = document.getElementsByTagName('img'); var scrollValue; function scroll() { var imageTransformStyle = window.getComputedStyle(images[0]).transform; var yStart = (imageTransformStyle.lastIndexOf(',') + 2); var yEnd = imageTransformStyle.lastIndexOf(')'); var currentPosition = Number(imageTransformStyle.substring(yStart, yEnd)); scrollValue = (this.textContent === 'Scroll Down') ? -158 : 158; var newPosition = currentPosition + scrollValue; if (newPosition > 0) {newPosition = 0;} if (newPosition < -316) {newPosition = -316;} for (var i = 0; i < images.length; i++) { images[i].style.transform = 'translateY(' + newPosition + 'px)'; } } for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', scroll, false); } 

 div, img, button { display: inline-block; vertical-align: top; } div { width: 578px; height: 152px; padding: 12px; background-color: rgb(63,63,63); overflow-y: hidden; } img { display: inline-block; width: 100px; height: 140px; margin: 6px 6px 12px; color: rgb(255,255,255); background-color: rgb(255,127,0); transform: translateY(0); transition: transform 0.5s ease-out; } img:last-of-type { margin-bottom: 24px; } 

 <div> <img alt="image-1" /> <img alt="image-2" /> <img alt="image-3" /> <img alt="image-4" /> <img alt="image-5" /> <img alt="image-6" /> <img alt="image-7" /> <img alt="image-8" /> <img alt="image-9" /> <img alt="image-10" /> <img alt="image-11" /> <img alt="image-12" /> <img alt="image-13" /> <img alt="image-14" /> <img alt="image-15" /> </div> <button type="button">Scroll Up</button> <button type="button">Scroll Down</button> 

Answer 2

您可以使用jQuery動畫制作動畫，以便更輕松地使用移動的圖像。 試試下面的例子：

 var outer = $('.container'); $('#right').click(function() { outer.animate({scrollLeft: '+=30px'}, 500); }); $('#left').click(function() { outer.animate({scrollLeft: '-=30px'}, 500); }); $('#top').click(function() { outer.animate({scrollTop: '-=30px'}, 500); }); $('#bottom').click(function() { outer.animate({scrollTop: '+=30px'}, 500); }); 

 .container { width: 100px; height: 100px; overflow: scroll; } .inner { width: 300px; background-color: red; font-size: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="inner"> ABCDEFG 1 2 3 4 5 6 7 8 9 ------------------------------- 9 8 7 6 5 4 3 2 1 ABCDEFG </div> </div> <button id="left"> < </button><button id="right"> > </button> <button id="top"> ^ </button><button id="bottom"> V </button>