CSS3 实现鼠标滑过图片，block以中心为原点进行放大

html-css012

CSS3 实现鼠标滑过图片，block以中心为原点进行放大,第1张

要实现鼠标放在block上以中心为原点进行放大，可以利用CSS3的transform和transition来实现

CSS3的transform: scale()可以按比例放大或缩小block的功能。

京东用的是一个jquery插件。

CSS可以实现大图片，但是没办法控制坐标，所以这个效果是JS实现的。

大致原理就是：

上传产品的时候，脚本自动生成一个400尺寸和一个800尺寸等多个规格的图片，通过小图片坐标计算大图片显示位置。

#demo{overflow:hiddenwidth:120pxtext-align:centerpadding:10px}#demo img{border:nonewidth:100pxheight:100pxborder:5px solid #f4f4f4}#enlarge_images{position:absolutedisplay:nonez-index:2border:5px solid #f4f4f4}

">var demo = document.getElementById("demo")var gg = demo.getElementsByTagName("img")var ei = document.getElementById("enlarge_images")for(i=0i var ts = gg[i] ts.onmousemove = function(event){ event = event || window.event ei.style.display = "block" ei.innerHTML = '' ei.style.top = document.body.scrollTop + event.clientY + 10 + "px" ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px" } ts.onmouseout = function(){ ei.innerHTML = "" ei.style.display = "none" } ts.onclick = function(){ window.open( this.src ) }}