600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 显示内容长时 显示部分内容 鼠标移入显示全部内容

显示内容长时 显示部分内容 鼠标移入显示全部内容

时间:2019-03-17 17:17:59

相关推荐

显示内容长时 显示部分内容 鼠标移入显示全部内容

实现思想:

在页面内放入一个Div,调用lable的onMouseover,onMouseout 事件,然后用JS去实现显示部分内容在原有位置还是显示全部内容在Div中。

后台代码:

stringanswer=e.Row.Cells[10].Text;

if(answer.Length>5)

{

e.Row.Cells[10].Text=string.Format("<labelonMouseover=\"ddrivetip('{0}','#FFFFE1',300)\"onMouseout='hideddrivetip()'>{1}...</label>",answer,answer.Substring(0,5));

前台代码:

<divid="dhtmltooltip"style="width:550px"></div>

<scripttype="text/javascript">

varoffsetxpoint=0//Customizexoffsetoftooltip

varoffsetypoint=20//Customizeyoffsetoftooltip

varie=document.all

varns6=document.getElementById&&!document.all

varenabletip=false

if(ie||ns6)

vartipobj=document.all?document.all["dhtmltooltip"]:document.getElementById?document.getElementById("dhtmltooltip"):""

functionietruebody(){

return(patMode&&patMode!="BackCompat")?document.documentElement:document.body

}

functionddrivetip(thetext,thecolor,thewidth){

if(ns6||ie){

if(typeofthewidth!="undefined")tipobj.style.width=thewidth+"px"

if(typeofthecolor!="undefined"&&thecolor!="")tipobj.style.backgroundColor=thecolor

tipobj.innerHTML=thetext

enabletip=true

returnfalse

}

}

functionpositiontip(e){

if(enabletip){

varcurX=(ns6)?e.pageX:event.clientX+ietruebody().scrollLeft;

varcurY=(ns6)?e.pageY:event.clientY+ietruebody().scrollTop;

varrightedge=ie&&!window.opera?ietruebody().clientWidth-event.clientX-offsetxpoint:window.innerWidth-e.clientX-offsetxpoint-20

varbottomedge=ie&&!window.opera?ietruebody().clientHeight-event.clientY-offsetypoint:window.innerHeight-e.clientY-offsetypoint-20

varleftedge=(offsetxpoint<0)?offsetxpoint*(-1):-1000

if(rightedge<tipobj.offsetWidth)

tipobj.style.left=ie?ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px":

window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"

elseif(curX<leftedge)

tipobj.style.left="5px"

else

tipobj.style.left=curX+offsetxpoint+"px"

if(bottomedge<tipobj.offsetHeight)

tipobj.style.top=ie?ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px":

window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"

else

tipobj.style.top=curY+offsetypoint+"px"

tipobj.style.visibility="visible"

}

}

functionhideddrivetip(){

if(ns6||ie){

enabletip=false

tipobj.style.visibility="hidden"

tipobj.style.left="-1000px"

tipobj.style.backgroundColor=''

tipobj.style.width=''

}

}

document.onmousemove=positiontip

</script>

实现效果:

鼠标移入67396...,会显示全部内容。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。