`
ren2881971
  • 浏览: 108451 次
社区版块
存档分类
最新评论

鼠标onmouseover,onmouseout事件动态创建DIV 显示图片

    博客分类:
  • js
阅读更多
好久没写博客了。
更新下,省着以后还得现写。
function displayPic(objId){
	
	createElement(objId);
  
	//document.getElementById(objId+"_pic").innerHTML = document.getElementById(objId+"_text").innerHTML;
}
function nonePic(objId){

	destoryElement(objId);
}
var isScroll = function (el) {
             // test targets
             var elems = el ? [el] : [document.documentElement, document.body];
             var scrollX = false, scrollY = false;
             for (var i = 0; i < elems.length; i++) {
                 var o = elems[i];
                 // test horizontal
                 var sl = o.scrollLeft;
                 o.scrollLeft += (sl > 0) ? -1 : 1;
                 o.scrollLeft !== sl && (scrollX = scrollX || true);
                 o.scrollLeft = sl;
                 // test vertical
                 var st = o.scrollTop;
                 o.scrollTop += (st > 0) ? -1 : 1;
                 o.scrollTop !== st && (scrollY = scrollY || true);
                 o.scrollTop = st;
             }
             // ret
             return {
                 scrollX: scrollX,
                 scrollY: scrollY
             };
         };
function createElement(objId,event){

	if(!event){
		event = window.event;
	}else{
		event.srcElement = event.target;
	}
	var createDiv = document.createElement("div");
	createDiv.id = objId+"_pic";
	createDiv.innerHTML = document.getElementById(objId+"_text").innerHTML;
	var temp = 500;
	var x = event.clientX-temp;

	createDiv.style.left=x;
	
    if (isScroll){
    //有滚动条 div 的 y = 鼠标的y + 滚动条距离浏览器最上面的距离
     createDiv.style.top= event.clientY+document.body.scrollTop;
    
    }else{
    //没有滚动条
     createDiv.style.top= event.clientY;
    }
    createDiv.style.position = "absolute";  
    createDiv.style.display='';
	
	document.body.appendChild(createDiv);
}
function destoryElement(objId){
	var obj = document.getElementById(objId+"_pic");
	if(obj != null){
		obj.innerHTML = "";
		document.body.removeChild(obj);
	}
}


<a href="#" id="<%=userSerial%>_href" onmouseover="displayPic('<%=userSerial%>');" onmouseout="nonePic('<%=userSerial%>');" TARGET="_blank">&nbsp;<%=dkTime%></a>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics