zoukankan      html  css  js  c++  java
  • 显示内容长时,显示部分内容,鼠标移入显示全部内容

    实现思想:

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

        后台代码:  

     

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

     

    前台代码:

     

    <div id="dhtmltooltip"  style="550px "></div>
    <script type="text/javascript">
    var offsetxpoint=0 //Customize x offset of tooltip
    var offsetypoint=20 //Customize y offset of tooltip
    var ie=document.all
    var ns6=document.getElementById && !document.all
    var enabletip=false
    if (ie||ns6)
    var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
    }
    function ddrivetip(thetext, thecolor, thewidth){
    if (ns6||ie){
    if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
    if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
    tipobj.innerHTML
    =thetext
    enabletip
    =true
    return false
    }
    }
    function positiontip(e){
    if (enabletip){
    var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
    var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
    var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
    var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
    var leftedge=(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"
    else if (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"
    }
    }
    function hideddrivetip(){
    if (ns6||ie){
    enabletip
    =false
    tipobj.style.visibility
    ="hidden"
    tipobj.style.left
    ="-1000px"
    tipobj.style.backgroundColor
    =''
    tipobj.style.width
    =''
    }
    }
    document.onmousemove
    =positiontip
    </script>

    实现效果:

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

     

     

  • 相关阅读:
    20165225《Java程序设计》第六周学习总结
    实验一 Java开发环境的熟悉
    20165225《Java程序设计》第五周学习总结
    移动web——bootstrap响应式工具
    移动web——bootstrap栅格系统
    移动web——bootstrap模板
    移动web——媒体查询
    移动web——轮播图
    移动web——touch事件应用
    移动web——touch事件介绍
  • 原文地址:https://www.cnblogs.com/abcdwxc/p/1980497.html
Copyright © 2011-2022 走看看