鼠标悬停动态弹出浮动窗口显示图片

最新推荐文章于 2023-09-26 09:23:30 发布

码农麒麟

最新推荐文章于 2023-09-26 09:23:30 发布

阅读量2.4k

点赞数 3

分类专栏： Js 文章标签： js

原文链接：https://blog.csdn.net/qq_26134341/article/details/80819293

版权

Js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>js弹出窗</title>  
  
    <style>  
        a{  
            float: left;  
            margin-left:30px;  
            margin-top: 50px;  
        }  
        img{  
            width:400px;  
            border:black 1px solid;  
        }  
        #image{  
            position: absolute;  
            display: none;  
        }  
    </style>  
  
    <script>  
        //显示图片  
        function displayImg() {  
            var img = document.getElementById("image");  
  
            //var x = event.clientX + document.body.scrollLeft + 20;  
            //var y = event.clientY + document.body.scrollTop - 5;   
           var e = event || window.event;
           var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
           var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
           var x = e.pageX || e.clientX + scrollX;
           var y = e.pageY || e.clientY + scrollY;  
           img.style.left = x + 10 + "px";  
           img.style.top = y + 10 + "px";  
           img.style.display = "block";  
        }  
   //图片消失
    function vanishImg(){ //theEvent用来传入事件，Firefox的方式
		let imgId = "image";
		if(typeof(HTMLElement)!="undefined"){    //给firefox定义contains()方法，ie下不起作用     
          HTMLElement.prototype.contains=function(obj){
                 while(obj!=null&&typeof(obj.tagName)!="undefind"){ //通过循环对比来判断是不是obj的父元素
                    if(obj==this) return true;
                    obj=obj.parentNode;
                  }
                  return false;
              };
        }
         var theEvent = arguments.callee.caller.arguments[0] || window.event
         if (theEvent){
              var browser=navigator.userAgent;   //取得浏览器属性
              if (browser.indexOf("Firefox")>0){ //如果是Firefox
               if (document.getElementById(imgId).contains(theEvent.relatedTarget)) { //如果是子元素
                  return;   //结束函式
                }
            }
              //if (browser.indexOf("MSIE")>0){ //如果是IE
                      //if (document.getElementById(imgId).contains(event.toElement)) { //如果是子元素
                            //return; //结束函式
                       //}
            // }
         }
        /*要执行的操作*/
         var img = document.getElementById(imgId);
         img.style.display = "none";
    }
    </script>  
</head>  
  
<body>  
      
    <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >  
        鼠标移至这里显示图片  
    </a>  
  
    <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >  
        鼠标移至这里显示图片  
    </a>  
  
    <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >  
        鼠标移至这里显示图片  
    </a>  
  
    <a href="#" onmouseover="displayImg()" onmouseout="vanishImg()" onmousemove="displayImg()" >  
        鼠标移至这里显示图片  
    </a>  
  
  
    <!--动态显示的图片-->  
    <div id="image">  
        <img src="test.jpg" alt=""><!--如果加上AJAX就可以根据不同的超链接来显示不同的图片了-->  
    </div>  
  
</body>  
</html>

码农麒麟

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬停动态弹出浮动窗口显示图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js弹出窗</title> <style> a{ float: left...
复制链接

扫一扫