用 javascript 做了一个鼠标滑上去后图片放大浮出的效果,大家指正一下。
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- <script>
- function GetAbsPosition(obj)
- {
- var curleft = 0, curtop = 0;
- do {
- curleft += obj.offsetLeft;
- curtop += obj.offsetTop;
- } while (obj = obj.offsetParent);
- return [curleft,curtop];
- }
- function ShowFloatingImage(image, width, height)
- {
- var id = "trailimageid";
- var newdiv = document.getElementById(id);
- if(newdiv == null)
- {
- newdiv = document.createElement('div');
- newdiv.setAttribute('id',id);
- newdiv.setAttribute('onmouseout', "HideElement('"+id+"');");
- document.body.appendChild(newdiv);
- }
- newdiv.innerhtml = '<img src='+image.src+ ' width='+(image.width + width) + ' height=' + (image.height + height) + ' />';
- var absPos = GetAbsPosition(image);
- newdiv.style.position = "absolute";
- newdiv.style.posLeft = absPos[0] - width/2;
- newdiv.style.posTop = absPos[1] - height/2;
- newdiv.style.display="block";
- }
- function HideElement(id)
- {
- var elem = document.getElementById(id);
- elem.style.display="none";
- }
- </script>
例子:
- <body>
- <img src="1.jpg" width="300" height="300" onmouseover="ShowFloatingImage(this, 150, 150);" />
- </body>
经测试事件处理的不是很好。导致鼠标移开不能回到原位。
来源: