Всем добрый день!
Вообщем хочется сделать слайдер, как на амазоне, даже не сам слайдер, а возможность увеличить фото и когда водишь мышкой по картинке она двигается (чтобы можно было рассмотреть детали)
Моя попытка провалилась, вот код HTML:
<div class="main">
<div id="carousel" class="slider">
<div data-thumb="https://allstringsnylon.com/media/catalog/product/cache/1/image/17f82f742ffe127f42dca9de82fb58b1/c/o/cordoba-15cm-concert-uke-top_lrg_1.png"><img src="https://allstringsnylon.com/media/catalog/product/cache/1/image/17f82f742ffe127f42dca9de82fb58b1/c/o/cordoba-15cm-concert-uke-top_lrg_1.png" alt=""></div>
<div data-thumb="http://rolandblog.ca/wp-content/uploads/2013/11/13082_MATON-UKULELE-CEDAR-TOP__98800_zoom.jpg"><img src="http://rolandblog.ca/wp-content/uploads/2013/11/13082_MATON-UKULELE-CEDAR-TOP__98800_zoom.jpg" alt=""></div>
<div data-thumb="http://www.lunaguitars.com/productimages/uketribal6/uketribal6.jpg"><img src="http://www.lunaguitars.com/productimages/uketribal6/uketribal6.jpg" alt=""></div>
</div>
</div>
JS:
$(function () {
$(".slider").slick({
autoplay: true,
dots: true,
customPaging : function(slider, i) {
var thumb = $(slider.$slides[i]).data('thumb');
return '<a><img src="'+thumb+'"></a>';
},
});
var trueHeight,
trueWidth,
img;
$('.slick-slider div img').hover(function(e){
img = $(this);
trueHeight = $(this).height();
trueWidth = $(this).width();
$(this).css('position', 'absolute');
var imgHeight = $(this).prop('naturalHeight');
var imgWidth = $(this).prop('naturalWidth');
$(this).height(imgHeight);
$(this).width(imgWidth);
$(this).mousemove(function(e) {
var relativeX = e.clientX;
var relativeY = e.clientY;
console.log(relativeX+ ' ' +relativeY);
img.css({'left': relativeX / -6 + 'px', 'top': relativeY / -1.0 + 'px'});
});
}, function(){
img.css({'position': 'relative', 'top': 0,'left': 0});
$(this).height(trueHeight);
$(this).width(trueWidth);
});
});
Пример codepen
Получилось не очень, все прыгает, дергается и хотелось бы знать, может есть готовые решения? Или может кто посоветует как улучшить мой "код", может кто уже делал подобное и готов поделиться! Спасибо!
Вот я набросал такой вариант. Я любитель сложных уравнений, так что разбирайтесь и пользуйтесь :)
$(function() {
var imagebox = $('.imagebox');
imagebox.mousemove(function(e) {
var cursor_position = {
x: e.clientX - $(this).offset().left + $(window).scrollLeft(), // Положение курсора слева
y: e.clientY - $(this).offset().top + $(window).scrollTop() // Положение курсора сверху
},
imagebox__img = $(this).find('.imagebox__img'),
image_position = {
left: ((cursor_position.x / $(this).innerWidth()) * imagebox__img.width() - cursor_position.x) * -1, // Вычисляем позицию картинки слева
top: ((cursor_position.y / $(this).innerHeight()) * imagebox__img.height() - cursor_position.y) * -1 // Вычисляем позицию картинки сверху
}
imagebox__img.css({
position: 'absolute',
top: image_position.top,
left: image_position.left
});
});
});
.imagebox {
position: relative;
width: 250px;
height: 250px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imagebox">
<img class="imagebox__img" src="https://i.ytimg.com/vi/Jom-LKUuPgI/maxresdefault.jpg">
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
У меня вопрос по поводу того как синхронизировать анимации @keyframesЕсть планета, которая вращается по кругу
На днях набросал код верхнего меню без использования скриптовВсё работает на ура, но правильно ли это? Дело в том, что я использовал для стилизации...
Никак не могу понять как работает alignas()Почему расстояние равно 2016, а без него 24?