css3 局部放大,CSS3/JS 鼠标悬停图片局部放大动效

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

$('.tile')

// tile mouse actions

.on('mouseover', function() {

$(this).children('.photo').css({

'transform': 'scale(' + $(this).attr('data-scale') + ')'

});

})

.on('mouseout', function() {

$(this).children('.photo').css({

'transform': 'scale(1)'

});

})

.on('mousemove', function(e) {

$(this).children('.photo').css({

'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 + '%'

});

})

// tiles set up

.each(function() {

$(this)

// add a photo container

.append('

// some text just to show zoom level on current item in this example

.append('

// set up a background image for each tile based on data-image attribute

.children('.photo').css({

'background-image': 'url(' + $(this).attr('data-image') + ')'

});

})