Javascript - 使用按钮

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

  

我在汽车图片周围制作了一个容器，并使用溢出y：   滚动所以我可以滚动它们。我怎么能这样做，所以我有两个   按钮我可以点击，这样我就可以通过按钮滚动浏览它们   javascript还是jquery？

以下是3种使用方法：

• 的jQuery
• 普通javascript
• CSS和javascript

使用CSS Transitions的最后一种方法可以提供最流畅，最好的动画。

方法1（共3个）

您可以使用jQuery的自定义animate({scrollTop: [value]})方法上下滚动图片。

jQuery中的工作示例：

＆＃13;

＆＃13;

$(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'});
    });

});

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

方法2（共3个）

如果你想跳过jQuery，这里有一个使用普通javascript的替代版本。

普通javascript中的工作示例：

＆＃13;

＆＃13;

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);
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

方法3（共3个）

正如您将要注意到的，上面的简单javascript方法有点慢和生涩。所以最后（与所有动画一样），最佳方法是部署一些CSS来处理动画。

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

＆＃13;

＆＃13;

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);
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用jQuery动画制作动画，以便更轻松地使用移动的图像。试试下面的例子：

＆＃13;

＆＃13;

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);
});

＆＃13;

.container {
  width: 100px;
  height: 100px;
  overflow: scroll;
}

.inner {
  width: 300px;
  background-color: red;
  font-size: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div  class="container">
  <div class="inner">
    A B C D E F G 1 2 3 4 5 6 7 8 9
    -------------------------------
    9 8 7 6 5 4 3 2 1 A B C D E F G
  </div>
</div>

<button id="left"> < </button><button id="right"> > </button>
  
<button id="top"> ^ </button><button id="bottom"> V </button>

＆＃13;

＆＃13;

＆＃13;