Skip to content

Instantly share code, notes, and snippets.

Created March 26, 2017 03:09
Show Gist options
  • Save anonymous/5546ec3fea5bb404eaf70a9d7d3baed2 to your computer and use it in GitHub Desktop.
Save anonymous/5546ec3fea5bb404eaf70a9d7d3baed2 to your computer and use it in GitHub Desktop.
preview images with slide animation
<div>
<div id="preview" class="preview">
<nav class="nav">
<button class="close">
返回
</button>
</nav>
<div class="container">
<button class="prev">&lt;</button>
<button class="next">&gt;</button>
</div>
</div>
<div class="list">
<div class="item">
<img src="https://api.adorable.io/avatars/285/1">
</div>
<div class="item">
<img src="https://api.adorable.io/avatars/285/2">
</div>
<div class="item">
<img src="https://api.adorable.io/avatars/285/3">
</div>
<div class="item">
<img src="https://api.adorable.io/avatars/285/4">
</div>
<div class="item">
<img src="https://api.adorable.io/avatars/285/5">
</div>
<div class="item">
<img src="https://api.adorable.io/avatars/285/6">
</div>
<div class="item">
<img src="https://api.adorable.io/avatars/285/7">
</div>
<div class="item">
<img src="https://api.adorable.io/avatars/285/8">
</div>
</div>
</div>
const $preview = $('#preview');
const $container = $preview.find('.container');
const $prev = $container.find('.prev');
const $next = $container.find('.next');
const $itemsList = $('.list .item');
$('img').attr('draggable', false);
const defaultParams = {
isPressing: false,
isDragging: false,
originalX: 0,
offsetX: 0
};
function handleSwitch(el, params, event) {
const {
offsetX
} = params;
if (Math.abs(offsetX) > 100) {
if (offsetX < 0) {
$next.click();
} else if (offsetX > 0) {
$prev.click();
}
}
Object.assign(params, defaultParams);
$(el).css('transform', 'none');
}
function bindDragEvents($el) {
const params = Object.assign({}, defaultParams)
return $el
.on('mousedown touchstart', function(event) {
params.isPressing = true;
params.originalX = event.pageX;
})
.on('mousemove touchmove', function(event) {
if (params.isPressing) {
const offsetX = event.pageX - params.originalX;
params.offsetX = offsetX;
console.log('move', offsetX)
$(this).css('transform', `translateX(${offsetX}px)`);
}
})
.on('mouseup touchend', function(event) {
handleSwitch(this, params, event);
})
.on('mouseout touchend', function(event) {
if (params.isPressing) {
handleSwitch(this, params, event);
}
});
}
function getItemWithIndex(index) {
const $el = $($itemsList.get(index))
.clone()
.data({
index
});
return bindDragEvents($el);
}
$('.list .item').click(function() {
$preview.addClass('active');
const index = $itemsList.index($(this));
const $itemPreview = getItemWithIndex(index);
$container.append($itemPreview);
});
$('.close').click(() => {
$preview.removeClass('active');
$container.find('.item').remove();
});
$prev.click(function() {
const $currentItem = $container.find('.item');
const prevIndex = $currentItem.data('index');
if (prevIndex > 0) {
const $prevItem = getItemWithIndex(prevIndex - 1);
$currentItem.remove();
$container.append($prevItem);
}
});
$next.click(function() {
const $currentItem = $container.find('.item');
const nextIndex = $currentItem.data('index');
if (nextIndex < $itemsList.length - 1) {
const $nextItem = getItemWithIndex(nextIndex + 1);
$currentItem.remove();
$container.append($nextItem);
}
});
//$('.list .item').slick();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
.preview {
display: none;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
width: 100%;
height: 100%;
z-index: 3;
&.active {
display: block;
}
.nav {
height: 50px;
padding: 1em;
.close {
display: inline-block;
border-radius: 4px;
border: none;
padding: .5em 1em;
background-color: white;
}
}
.container {
padding: 3em;
position: relative;
overflow: hidden;
&,
& * {
box-sizing: border-box;
}
.prev,
.next {
width: 32px;
height: 32px;
font-size: 16px;
line-height: 16px;
background-color: white;
border: none;
border-radius: 100%;
color: rgba(0, 0, 0, .5);
display: block;
font-weight: bolder;
position: absolute;
top: 50%;
cursor: pointer;
transform: translateY(-50%);
}
.prev {
left: 1em;
}
.next {
right: 1em;
}
.item {
width: 100%;
max-width: 500px;
/* position: relative; */
/* transition: all .3s ease; */
}
}
}
.list {
width: 100%;
position: relative;
&,
& * {
box-sizing: border-box;
}
}
.item {
display: inline-block;
width: 25%;
margin: 0;
padding: 10px;
float: left;
img {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment