<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } #small { width: 320px; height: 320px; margin: 100px 100px; float: left; /*border: 1px solid black;*/ position: relative; } #small img { width: 100%; height: 100%; } #meng { width: 100px; height: 100px; background: white; position: absolute; opacity: 0.5; display: none; } #big { width: 400px; height: 400px; float: left; overflow: hidden; margin-top: 100px; /*border: 1px solid black;*/ position: relative; display: none; } #big img { position: absolute; } </style> <script> window.onload = function () { var small = document.getElementById('small'); var meng = document.getElementById('meng'); var big = document.getElementById('big'); small.onmouseover = function() { meng.style.display = 'block'; big.style.display = 'block'; } small.onmousemove = function (ev) { var e = ev || window.event; var mengOffsetX = e.clientX - 50 - small.offsetLeft; var mengOffsetY = e.clientY - 50 - small.offsetTop; var smallWidth = small.offsetWidth; var smallHeight = small.offsetHeight; if (mengOffsetX < 0) { mengOffsetX = 0; } if (mengOffsetX >= smallWidth - 100) { mengOffsetX = smallWidth - 100; } if (mengOffsetY < 0) { mengOffsetY = 0; } if (mengOffsetY >= smallHeight - 100) { mengOffsetY = smallHeight - 100; } meng.style.left = mengOffsetX + 'px'; meng.style.top = mengOffsetY + 'px'; var bigImg = big.getElementsByTagName('img')[0]; bigImg.style.left = mengOffsetX * -4 + 'px'; bigImg.style.top = mengOffsetY * -4 + 'px'; } small.onmouseout = function () { meng.style.display = 'none'; big.style.display = 'none'; } } </script> </head> <body> <div id="small"> <div id="meng"></div> <img src="../img/qb.jpg" alt="乔巴"> </div> <div id="big"> <img src="../img/qb.jpg" alt="乔巴"> </div> </body> </html>
