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
Release: 2016-05-16 18:06:20
Original
1257 people have browsed it
复制代码 代码如下:

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

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





经测试事件处理的不是很好。导致鼠标移开不能回到原位。
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template