鼠标略过图片放大js效果
<script type="text/javascript"> exid = 0; exstep = 0; exwdth = 0; exht = 0; extp = 0; exlft = 0; extot = 0; extotst = 15; function expandthumb(thumbid, fullwidth, fullheight) { if (extot != 0) { clearTimeout(extot); } if (exid > 0 && exid != thumbid) { restorethumb(); } if (exid != thumbid) { img = document.getElementById("screen" + thumbid); img.style.display = 'block'; exid = thumbid; exstep = 1; exwdth = fullwidth; exht = fullheight; extp = img.offsetTop; exlft = img.offsetLeft; } else if (exstep < 1) { exstep = 1; } expandstep(); } function doexpand() { img = document.getElementById("screen" + exid); thumb = document.getElementById("thumb" + exid); myscroll = getScroll(); if (extp + thumb.height > myscroll.top + myscroll.height) { finaltop = myscroll.top + myscroll.height - exht; } else { finaltop = extp + thumb.height - exht; } if (finaltop < myscroll.top) { finaltop = myscroll.top; } img.style.top = finaltop + ((extp - finaltop) * (extotst - exstep) / extotst) + 'px'; if (exlft + thumb.width > myscroll.left + myscroll.width) { finalleft = myscroll.left + myscroll.width - exwdth; } else { finalleft = exlft + thumb.width - exwdth; } if (finalleft < myscroll.left) { finalleft = myscroll.left; } img.style.left = finalleft + ((exlft - finalleft) * (extotst - exstep) / extotst) + 'px'; img.width = thumb.width + ((exwdth - thumb.width) * exstep / extotst); img.height = thumb.height + ((exht - thumb.height) * exstep / extotst); } function restorethumb() { img = document.getElementById("screen" + exid); img.style.top = ''; img.style.left = ''; img.style.display = 'none'; exid = 0; } function expandstep() { extot = 0; doexpand(); if (exstep < extotst) { exstep++; extot = setTimeout("expandstep()", 20); } } function reducestep() { extot = 0; doexpand(); if (exstep > 0) { exstep--; extot = setTimeout("reducestep()", 20); } else { restorethumb(); } } function reducethumb(thumbid) { if (extot != 0) { clearTimeout(extot); } if (exstep > 0) { reducestep(); } } // returns the scroll position and size of the browser function getScroll() { if (document.all && typeof document.body.scrollTop != "undefined") { // IE model var ieBox = document.compatMode != "CSS1Compat"; var cont = ieBox ? document.body : document.documentElement; return { left: cont.scrollLeft, top: cont.scrollTop, cont.clientWidth, height: cont.clientHeight }; } else { return { left: window.pageXOffset, top: window.pageYOffset, window.innerWidth, height: window.innerHeight }; } } </script><body> <img src='1.jpg' width=400 height=400 alt='img' border=0 id='screen142' onmouseout='reducethumb(142); return false;' class='position: absolute; display: none;'> <img src='1.jpg' width=100 height=100 alt='mis' border=0 id='thumb142' onmouseover='expandthumb(142, 500, 449);'></a> </body>