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

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

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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: onmouseover和onmouseout是JavaScript中的两个事件,用于在鼠标移动到或移出某个元素时触发相应的操作。 onmouseover事件鼠标移动到某个元素上时触发,常用于实现鼠标悬停效果,比如当鼠标移动到一个链接上时,链接的颜色或背景色会发生变化。 onmouseout事件鼠标移出某个元素时触发,常用于实现鼠标离开效果,比如当鼠标移出一个链接时,链接的颜色或背景色会恢复原来的状态。 ### 回答2: onmouseover和onmouseout事件是JavaScript中常用的事件类型,用于鼠标指针在HTML元素上移动时触发相应的事件。 当鼠标指针移动到HTML元素上时,就会触发onmouseover事件。这时可以执行一些特定的操作,比如改变元素的颜色、添加一些效果、显示提示信息等。当鼠标指针离开该元素时,就会触发onmouseout事件,也可以执行一些特定的操作。 这两个事件常常被用于交互式设计中,可以在鼠标的移动和点击等事件中应用。比如,在网页中经常会用到鼠标指向链接时出现的提示信息,这种操作就是基于onmouseover事件来实现的。又比如,在制作导航栏时,可以利用onmouseout事件来隐藏下拉菜单。 除了简单的颜色、样式等效果,onmouseover和onmouseout事件还可以对元素的属性和内容进行修改。可以改变元素的文本、图片、背景色、透明度等,实现更多样的效果和交互体验。 但需要注意的是,onmouseover和onmouseout事件一般只能用于鼠标的移动交互,如果需要响应鼠标的点击事件,可以使用onclick事件来代替。 总的来说,onmouseover和onmouseout事件是JavaScript中非常有用的事件类型,可以用于丰富网站的交互及用户体验。需要合理运用,避免显得过于繁琐或复杂。 ### 回答3: onmouseover和onmouseout事件都是Javascript中常见的事件onmouseover事件是当鼠标光标移到一个HTML元素上时触发。当鼠标移动到元素上时,可以通过onmouseover事件来触发一些特定的动作或操作。这些特定的操作可以包括改变元素的样式或显示某些信息。onmouseover事件可以用于创建交互式的网页,例如为菜单、按钮等添加悬停提示。 而onmouseout事件则是当鼠标光标移出一个HTML元素时触发。当鼠标从元素移开时,可以通过onmouseout事件来恢复元素的状态或执行某些操作。例如:当鼠标移出一个菜单时,可以取消菜单的显示。 这两个事件都可以在HTML标签中使用或通过Javascript来添加。可以使用addEventListener()函数来添加这些事件。例如: ```javascript document.getElementById("myElement").addEventListener("mouseover", function(){ alert("Hello World!"); }); ``` 在上面的示例中,当鼠标移动到id为“myElement”的HTML元素上时,将会弹出一个“Hello World!”的提示。同样,可以使用onmouseout事件来添加功能等。 总之,在网页制作过程中,onmouseover和onmouseout事件是一个非常实用的技术,它们可以帮助我们创建更加丰富和有趣的网页,提升用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值