zoukankan      html  css  js  c++  java
  • js鼠标悬停效果

    代码
     <script type="text/javascript">
            function showPic(sUrl){ 
                var leftedge    
    = document.body.clientWidth-event.clientX;
                var bottomedge  
    = document.body.clientHeight-event.clientY;
               
    if (leftedge < document.getElementById("Layer1").offsetWidth)
                {
                    document.getElementById(
    "Layer1").style.left = document.body.scrollLeft + event.clientX - document.getElementById("Layer1").offsetWidth;
                }
                
    else
                {
                   
    /*否则,就定位DIV的左坐标为当前鼠标位置*/
                    document.getElementById(
    "Layer1").style.left = document.body.scrollLeft + event.clientX-350;
                }
                
    /*如果从鼠标位置到窗口下边的空间小于DIV的高度,就定位DIV的上坐标(Top)为当前鼠标位置向上一个DIV高度*/
                
    if (bottomedge < document.getElementById("Layer1").offsetHeight)
                {
                    document.getElementById(
    "Layer1").style.top = document.body.scrollTop + event.clientY - document.getElementById("Layer1").offsetHeight;
                }
                
    else
                {
                    
    /*否则,就定位DIV的上坐标为当前鼠标位置*/
                    document.getElementById(
    "Layer1").style.top = document.body.scrollTop + event.clientY;
                }
                    document.getElementById(
    "Layer1").innerHTML = "<div style=\"280px; padding:5px; background-color:#e7fbfc; border:6px solid #31bdd4; font-weight:bold;\"><div style=\"color:#191f77; line-height:18px; padding-left:20px; 260px\">"+sUrl+"</div></div>"
                    document.getElementById(
    "Layer1").style.display = "block"
            } 
           function hiddenPic(){ 
                document.getElementById(
    "Layer1").innerHTML = ""
                document.getElementById(
    "Layer1").style.display = "none";
               }
              
         
        
    </script>


    <div onmouseout="hiddenPic();" onmousemove="showPic('显示的文字');"></div>

    --显示的div
     
    <div id="Layer1" style="display: none; position: absolute; z-index: 1;  350px">
                                        
    </div>

     以上是我用了下面代码后的不完善补充的地方  

    --------------------------------------------

    代码
     1 <html> 
     2 <head> 
     3 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
     4 <title>JS教程:鼠标悬停文字上显示图片</title> 
     5 <script language="javascript"> 
     6 function showPic(sUrl){ 
     7 var x,y; 
     8 = event.clientX; 
     9 = event.clientY; 
    10 document.getElementById("Layer1").style.left = x; 
    11 document.getElementById("Layer1").style.top = y; 
    12 document.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\">"
    13 document.getElementById("Layer1").style.display = "block"
    14 
    15 function hiddenPic(){ 
    16 document.getElementById("Layer1").innerHTML = ""
    17 document.getElementById("Layer1").style.display = "none"
    18 
    19 </script> 
    20 </head> 
    21 <body> 
    22 <div id="Layer1" style="display:none;position:absolute;z-index:1;"></div> 
    23 <img src="/images/logo.gif" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" /> 
    24 <p></p> 
    25 </body> 
    26 </html>
  • 相关阅读:
    linux 网络性能优化
    select/poll/epoll原理探究及总结
    linux socket读数据错误解释
    linux 单机跨进程通信
    map与hash_map使用与对比
    python web自动化测试框架搭建(功能&接口)——环境搭建
    Jenkins构建触发器的区别
    python改变导入模块中的变量的问题
    Jmeter断言中判断请求失败的响应代码问题
    Jmeter中动态获取jsessionid来登录
  • 原文地址:https://www.cnblogs.com/wanglinglong/p/1680982.html
Copyright © 2011-2022 走看看