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 ) }}