作家
登录

鼠标滑上去后图片放大浮出效果的js代码

作者: 来源:www.28hudong.com 2013-03-30 00:51:44 阅读 我要评论

复制代码 代码如下: <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> 经测试事件处理的不是很好。导致鼠标移开不能回到原位。

  推荐阅读

  jquery 跨域访问问题解决方法(笔记)

这两天需要实现三级域名直接url rewrite到网站静态页面,如 http://123.456.789.com/ UrlRewrite到http://www.789.com/news/123.html 说到这里,也许和js跨域访问没有半点关系,在脑海里排列这的问题都是和UrlRewr>>>详细阅读


本文标题:鼠标滑上去后图片放大浮出效果的js代码

地址:http://www.17bianji.com/kaifa2/JS/24528.html

关键词: 探索发现

乐购科技部分新闻及文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与乐购科技进行文章共享合作。

网友点评
自媒体专栏

评论

热度

精彩导读
栏目ID=71的表不存在(操作类型=0)