鼠标移动显示

兼容谷歌,火狐,ie789+
<!-- onmouseover事件,鼠标移动显示图片 ..start-->
	function showImg(url){ 
		var url = "${httpfileurl}"+url; 
		$("#changeImg").attr("src",url);
		var divObj = document.getElementById("changeDiv");
		
		var clientX = 0;
		var clientY = 0;
		var event=getEvent(); 
        if (navigator.appName=='Microsoft Internet Explorer') { 
            clientX = event.x; 
            clientY = event.y; 
        }else if (navigator.appName=='Netscape') { 
        	clientX = event.pageX; 
            clientY = event.pageY;
        } 
		
		divObj.style.left = clientX +"px";
		divObj.style.top = clientY +"px";
		divObj.style.display="";
	} 
	function hideImg(){
		$("#changeDiv").hide();
	}
	
	// 兼容ie和Ff的,获取鼠标移动事件
	function getEvent()
    {  
        if(document.all)  return window.event;    
        func=getEvent.caller;        
        while(func!=null){  
            var arg0=func.arguments[0]; 
            if(arg0) 
            { 
              if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
              {  
              return arg0; 
              } 
            } 
            func=func.caller; 
        } 
        return null; 
    } 
    <!-- onmouseover事件,鼠标移动显示图片 ..end-->
<!-- onmouseover事件,鼠标移动显示图片 -->
<div id='changeDiv' style="position:absolute;display:none">
<span style="white-space:pre">	</span><img id="changeImg" width="100" height="100" /> 
</div>
<td align="left" id="${datas.id}" οnmοuseοver="showImg('${datas.imageUrl}');" οnmοuseοut="hideImg();" nowrap>${datas.imageUrl}</td>
效果:<img src="https://img-blog.csdn.net/20140804224612562" alt="" />

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值