鼠标移到一个图片上 图片放大

编辑器加载中...<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>
 
 例子:
 <img src="../Pictures/tupian/00070724_m500.jpg"  width="300" height="300" οnmοuseοver="ShowFloatingImage(this, 150, 150);" />

转载于:https://www.cnblogs.com/zwkBlog/archive/2012/04/05/2432968.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值