JS+CSS实现图片放大预览效果(购物时放在产品上面预览图片)

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>JS+CSS实现图片放大预览效果（js图片放大预览鼠标滑过的任意位置</title>
  <img src="/admin/edit/ewebeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20language%3D%22JavaScript%22%3E%0A%3C!--%0Avar%20srcX%20%3D%201024%3B%20%2F%2F%E5%8E%9F%E5%9B%BE%E5%A4%A7%E5%B0%8F%2C%E5%8F%AF%E4%BB%A5%E4%BB%BB%E6%84%8F%E8%AE%BE%E7%BD%AE%0Avar%20srcY%20%3D%20768%3B%0Avar%20bigX%20%3D%20300%3B%20%2F%2F%E9%A2%84%E8%A7%88%E7%AA%97%E5%A4%A7%E5%B0%8F%2C%E5%8F%AF%E4%BB%A5%E4%BB%BB%E6%84%8F%E8%AE%BE%E7%BD%AE%0Avar%20bigY%20%3D%20225%3B%0Avar%20smallX%20%3D%20300%3B%20%2F%2F%E7%BC%A9%E7%95%A5%E5%9B%BE%E5%AE%BD%E5%BA%A6%0Avar%20smallY%20%3D%20srcY%20*%20smallX%20%2F%20srcX%3B%0Avar%20viewX%20%3D%20bigX%20%2F%20srcX%20*%20smallX%3B%20%2F%2F%E9%A2%84%E8%A7%88%E8%8C%83%E5%9B%B4%0Avar%20viewY%20%3D%20bigY%20%2F%20srcY%20*%20smallY%3B%0Avar%20bl%20%3D%20srcX%20%2F%20smallX%3B%2F%2F%E7%BC%A9%E5%B0%8F%E6%AF%94%E4%BE%8B%0Avar%20border%20%3D%201%3B%20%2F%2F%E8%BE%B9%E6%A1%86%0Awindow.onload%3Dfunction%20()%7B%0A%20%20%20%20%20%20%20%20smallpic.width%3DsmallX%3B%0A%20%20%20%20%20%20%20%20smallpic.height%3DsmallY%3B%0A%20%20%20%20%20%20%20%20bigpic.width%3DsrcX%3B%0A%20%20%20%20%20%20%20%20bigpic.height%3DsrcY%3B%0A%20%20%20%20%20%20%20%20view.style.width%3DviewX%3B%0A%20%20%20%20%20%20%20%20view.style.height%3DviewY%3B%0A%20%20%20%20%20%20%20%20smallbox.style.borderWidth%3Dborder%3B%0A%20%20%20%20%20%20%20%20bigbox.style.borderWidth%3Dborder%3B%0A%20%20%20%20%20%20%20%20if%20(window.event)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20smallbox.style.width%3Dsmallpic.offsetWidth%2Bborder*2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20smallbox.style.height%3Dsmallpic.offsetHeight%2Bborder*2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bigbox.style.width%3DbigX%2Bborder*2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bigbox.style.height%3DbigY%2Bborder*2%3B%0A%20%20%20%20%20%20%20%20%7Delse%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20smallbox.style.width%3Dsmallpic.offsetWidth%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20smallbox.style.height%3Dsmallpic.offsetHeight%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bigbox.style.width%3DbigX%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20bigbox.style.height%3DbigY%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20move(event)%3B%0A%7D%0Afunction%20move(e)%7B%0A%20%20%20%20%20%20%20%20var%20e%20%3D%20window.event%3Fwindow.event%3Ae%3B%0A%20%20%20%20%20%20%20%20var%20iebug%20%3D%200%3B%0A%20%20%20%20%20%20%20%20if%20(window.event)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20vX%20%3D%20e.offsetX%20-%20viewX%2F2%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20vY%20%3D%20e.offsetY%20-%20viewY%2F2%3B%0A%20%20%20%20%20%20%20%20%7Delse%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20vX%20%3D%20e.pageX%20-%20viewX%2F2%20-%20smallbox.offsetLeft%20-%20border%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20vY%20%3D%20e.pageY%20-%20viewY%2F2%20-%20smallbox.offsetTop%20-%20border%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20iebug%20%3D%202%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20if%20(vX%20%3C%200)%20vX%20%3D%200%3B%0A%20%20%20%20%20%20%20%20if%20(vY%20%3C%200)%20vY%20%3D%200%3B%0A%20%20%20%20%20%20%20%20if%20(vX%20%3E%20smallX%20-%20viewX%20-%20iebug)%20vX%20%3D%20smallX%20-%20viewX%20-%20iebug%3B%0A%20%20%20%20%20%20%20%20if%20(vY%20%3E%20smallY%20-%20viewY%20-%20iebug)%20vY%20%3D%20smallY%20-%20viewY%20-%20iebug%3B%0A%20%20%20%20%20%20%20%20bigpico.style.marginLeft%20%3D%20-%20vX%20*%20bl%20%0A%20%20%20%20%20%20%20%20bigpico.style.marginTop%20%3D%20-%20vY%20*%20bl%20%0A%20%20%20%20%20%20%20%20view.style.left%20%3D%20vX%20%2B%20smallbox.offsetLeft%20%2B%20border%3B%0A%20%20%20%20%20%20%20%20view.style.top%20%3D%20vY%20%2B%20smallbox.offsetTop%20%2B%20border%3B%0A%7D%0A%2F%2F--%3E%0A%3C%2Fscript%3E">
  <style type="text/css">
  
  </style>
  <body>
  <div id="head"></div>
  <div id="smallbox"><img src="/UploadFiles/demo/002.jpg" _ewebeditor_ta_src="%2Fad%2F002.jpg" name="smallpic" width="300" height="300" border="0" id="smallpic" onmousemove="move(event)" onmouseover="document.getElementById('bigbox').style.display='';document.getElementById('view').style.display=''" onmouseout="document.getElementById('bigbox').style.display='none';document.getElementById('view').style.display='none'"></div>
  <div id="bigbox" style="display:none"><div id="bigpico"><img src="/UploadFiles/demo/002.jpg" _ewebeditor_ta_src="%2Fad%2F002.jpg" name="bigpic" width="300" height="300" border="0" id="bigpic"></div>
  </div>
  <div id="view" onmousemove="move(event) "style="display:none"></div>
  </body>
  </html>

前一页:支持火狐,IE6.ie7.ie8.ie9的加入收藏/设为首页代码

后一页:javascript编写的网页版的打字测试程序