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

最新推荐文章于 2024-09-02 13:15:04 发布

ren2881971

最新推荐文章于 2024-09-02 13:15:04 发布

阅读量771

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： UI html

本文链接：https://blog.youkuaiyun.com/ren2881971/article/details/84399480

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现鼠标悬停时显示图片的方法。通过定义displayPic和destoryElement两个函数来控制图片的显示与隐藏。此外，还提供了一个isScroll辅助函数用于判断元素是否存在滚动条。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

好久没写博客了。
更新下，省着以后还得现写。


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"> <%=dkTime%></a>