好久没写博客了。
更新下,省着以后还得现写。
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>
分享到:
相关推荐
页面显示所有图片,当鼠标移到图片上显示该图片详细信息并且加样式
最近两天在温习onmouseover事件和onmouseout事件,其实里面有很多深奥的知识,接下来小编给大家带来了onmouseover事件和onmouseout事件全面了解,感兴趣的朋友一起看下
鼠标移上去显示别的东西,离开恢复原样;通过传递参数实现此功能
c# 在webFrom上实现tabcontrol功能,可以实现tabcontrol中的所有功能,包括onmouseover事件和onclick事件,程序附有注释容易理解。
兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onmouseover事件 鼠标悬浮切换图片 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-左侧菜单栏点击收放 带注释/总结 【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片...
一个DIV层,当鼠标移进的时候会触发onmouseover,移出的时候会触发onmouseout。 很简单的逻辑,这也是我们想要的!但随之烦恼也就来了:onmouseover并不会只在移进时才触发,onmouseout也不会只在移出时才触发!鼠标...
Browser: IE4 | N4 | O 鼠标双击事件 onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了 onMouseUp HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标按下后,松开时激发的事件 ...
c# 在webFrom上实现tabcontrol功能 onmouseover事件:鼠标移动到按钮上page页面更换 onclick事件:点击按钮页面更换
直接使用onmouseout来实现移出消失可能会有一个问题:假设你的按钮的位置和弹出的div的位置不是重合的那么会导致鼠标移动就会马上去触发onmouseout事件,从而没什么卵用。 利用防抖、onmouseout、onmouseover组合来...
event:[removed]onmouseover = function(){this.style.backgroundColor=’#E3FFC9′},onmouseout = function(){this.style.backgroundColor=’#FFFFFF’}); } #b_g_date tr:hover{ background:#E3FFC9
onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按...
onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4、N4 鼠标移动时触发此事件 onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件 onkeypress IE4、N4 当键盘上的某个键被按下...
关于对鼠标经过事件的使用,可以显示datagrid中的数据
使用onmouseover和onmouseout事件实现不同的效果而且是使用js动态实现,本文有利于巩固你js与css方面的知识,感兴趣的你可以了解下哦,希望本文对你有所帮助
鼠标悬停事件是当鼠标的光标与其名称表示的元素重叠时触发的事件,本篇文章我们就来详细介绍一下JavaScript中鼠标悬停事件的用法。 我们先来看一下什么是onmouseover? 鼠标悬停的活动是“事件”,而onmouseover是...
个人整理的html所有的鼠标事件及方法:onblur 、onclick 、ondblclick 、onfocus 、onkeydown 、onkeypress 、onkeydown 、onKeyUp 、onmousedown 、onmousemove 、onmouseout 、onmouseover 、onmouseup ...