图片放大效果 – 有爱前端

http://codepen.io/suhajdab/pen/ceLdj/
把代码拿到本地看

transform: scale(1);

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Image zoom</title> <style type="text/css"> body { overflow: hidden; margin: 0; background: #222; } body.active img { -webkit-filter: grayscale(1); } img { display: block; margin: 20px auto; border: 1px solid rgba(255,255,255,0.2); -webkit-transition: -webkit-filter 500ms; } #zoom { position: absolute; top: 50%; left: 50%; width: 250px; height: 250px; margin: -125px 0 0 -125px; background-repeat: no-repeat; box-shadow: 0 0 0 2px rgba(255,0,0,0.5), 5px 5px 10px 5px rgba(0,0,0,0.2); border-radius: 50%; opacity: 0; -webkit-transform: scale(0); -webkit-transition: opacity 500ms, -webkit-transform 500ms; pointer-events: none; } .active #zoom { opacity: 1; -webkit-transform: scale(1); } </style> </head> <body> <img src="http://img2.xcabc.com/201612/20/20161220040412610549.jpg" alt="">  <div id="zoom"></div> </body>  <script type="text/javascript"> (function() { var zoom = document.getElementById( 'zoom' ), Zw = zoom.offsetWidth, Zh = zoom.offsetHeight, img = document.querySelector( 'img' ); var timeout, ratio, Ix, Iy; function activate () { document.body.classList.add( 'active' ); } function deactivate() { document.body.classList.remove( 'active' ); } function updateMagnifier( x, y ) { zoom.style.top = ( y ) + 'px'; zoom.style.left = ( x ) + 'px'; zoom.style.backgroundPosition = (( Ix - x ) * ratio + Zw / 2 ) + 'px ' + (( Iy - y ) * ratio + Zh / 2 ) + 'px'; } function onLoad () { ratio = img.naturalWidth / img.width; zoom.style.backgroundImage = 'url(' + img.src + ')'; Ix = img.offsetLeft; Iy = img.offsetTop; } function onMousemove( e ) { clearTimeout( timeout ); activate(); updateMagnifier( e.x, e.y ); timeout = setTimeout( deactivate, 2500 ); } function onMouseleave () { deactivate(); } img.addEventListener( 'load', onLoad ); img.addEventListener( 'mousemove', onMousemove ); img.addEventListener( 'mouseleave', onMouseleave ); })(); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 图片放大效果