Home >Web Front-end >JS Tutorial >js code for the effect of enlarging and popping up the image after the mouse slides up_Image special effects

js code for the effect of enlarging and popping up the image after the mouse slides up_Image special effects

WBOY
WBOYOriginal
2016-05-16 18:06:201276browse
复制代码 代码如下:

<script> <br>function GetAbsPosition(obj) <br>{ <br>var curleft = 0, curtop = 0; <br>do { <br>curleft = obj.offsetLeft; <br>curtop = obj.offsetTop; <br>} while (obj = obj.offsetParent); <br>return [curleft,curtop]; <br>} <br>function ShowFloatingImage(image, width, height) <br>{ <br>var id = "trailimageid"; <br>var newdiv = document.getElementById(id); <br>if(newdiv == null) <br>{ <br>newdiv = document.createElement('div'); <br>newdiv.setAttribute('id',id); <br>newdiv.setAttribute('onmouseout', "HideElement('" id "');"); <br>document.body.appendChild(newdiv); <br>} <br>newdiv.innerHTML = '<img src=' image.src ' width=' (image.width width) ' height=' (image.height height) ' />'; <br>var absPos = GetAbsPosition(image); <br>newdiv.style.position = "absolute"; <br>newdiv.style.posLeft = absPos[0] - width/2; <br>newdiv.style.posTop = absPos[1] - height/2; <br>newdiv.style.display="block"; <br>} <br>function HideElement(id) <br>{ <br>var elem = document.getElementById(id); <br>elem.style.display="none"; <br>} <br></script>

例子:
复制代码 代码如下:





经测试事件处理的不是很好。导致鼠标移开不能回到原位。
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn