html图片平移,CSS3 按钮悬停时背景图片平移入场

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

$(".thumb-next").on('mouseleave', function() {

$(".layout-p").text("Hover above, please.");

});

$(".thumb-next").on('mouseenter', function() {

$(".layout-p").text("thank you.");

});

/******Crazy javascript to use buttons with owl carousel******/

/*function updateNext (x) {

var active = $(".owl-page.active").index();

var slide = $(".owl-item");

var total = slide.length;

for (var i = 0; i < slide.length; i++) {

var pos = i;

if ((active == pos) && (total-1 == pos)){

var nextImage = $(slide[0]).find(".lazyOwl").attr("src");

$(slide[i]).parent().parent().siblings().find(".thumb-next").attr('style','background-image: url('+nextImage+');');

}else if (active == pos){

if ($(slide[i+1]).find(".lazyOwl").attr("data-src")){

var nextImage = $(slide[i+1]).find(".lazyOwl").attr("data-src");

} else {

var nextImage = $(slide[i+1]).find(".lazyOwl").attr("src");

}

$(slide[i]).parent().parent().siblings().find(".thumb-next").attr('style','background-image: url('+nextImage+');');

}

};

}

function updatePrev (x) {

var active = $(".owl-page.active").index();

var slide = $(".owl-item");

var total = slide.length;

for (var i = 0; i < slide.length; i++) {

var pos = i;

if ((active == pos) && (0 == pos)){

// var prevImage = $(slide[total-1]).find(".lazyOwl").attr("data-src");

if ($(slide[total-1]).find(".lazyOwl").attr("data-src")){

var prevImage = $(slide[total-1]).find(".lazyOwl").attr("data-src");

} else {

var prevImage = $(slide[total-1]).find(".lazyOwl").attr("src");

}

$(slide[i]).parent().parent().siblings().find(".thumb-prev").attr('style','background-image: url('+prevImage+');');

}else if (active == pos){

if ($(slide[i-1]).find(".lazyOwl").attr("data-src")){

var prevImage = $(slide[i-1]).find(".lazyOwl").attr("data-src");

} else {

var prevImage = $(slide[i-1]).find(".lazyOwl").attr("src");

}

$(slide[i]).parent().parent().siblings().find(".thumb-prev").attr('style','background-image: url('+prevImage+');');

}

};

}

$(".owl-buttons .owl-prev").prepend('

<

');

$(".owl-buttons .owl-next").append('

>

');

$('.owl-carousel').each(function(){

$(updateNext());

$(updatePrev());

});

$(".owl-buttons div div").on('click touchend', function() {

var slideshow = $(this).parent().parent().parent().parent();

$(updateNext(slideshow));

$(updatePrev(slideshow));

});*/