jquery实现鼠标移入图片,显示大图并跟随鼠标移动

2019-03-11 15:42:23 阅读：207 来源： 互联网

标签：jquery function 鼠标大图 var div event div1

<!DOCTYPE html>
<html>
  <head>
    <title>test.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta charset="UTF-8">
    
   <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
   <script type="text/javascript">
    $(function(){
    var $div="<div id='div1'><img style='border-radius:25px;' width='450px' height='450px' ></div>";
    $("a").mouseover(function(event){ //鼠标移入
    $("body").append($div);//追加到网页中
    $("#div1 img").attr("src",$(this).attr("title"));//设置显示图片的img标签的src路径
    });
    
   
    $("a").mouseout(function(){//鼠标移出
    $("#div1").remove();//删除div
    });
    
     $("a").mousemove(function(event){//鼠标移动 event是事件对象 ,event.clientX 获得鼠标当前的X轴坐标,event.clientY 获得鼠标当前的Y轴坐标
    var x=event.clientX+20;
   var y=event.clientY+20;
    $("#div1").css({position:"absolute",left:x,top:y});//设置div绝对定位 坐标就是距离鼠标当前的位置 
     });
    
    });
    
    
    </script>
    
    <style type="text/css">
    li{
    list-style: none;
    float: left;
    margin: 5px;
    }
    </style>
  </head>
  
                 <!--实现鼠标移入 显示图片的大图, 跟随鼠标坐标移动   -->
  <body>
   <ul>
   <li><a title="img/1.jpg"><img width="300px" height="200px" src="img/1.jpg"></a></li>
   <li><a title="img/2.png"><img width="300px" height="200px"  src="img/2.png"></a></li>
   <li><a title="img/3.jpg"><img width="300px" height="200px"  src="img/3.jpg"></a></li>
   </ul>
   
   
   
   
  </body>
</html>

标签：jquery,function,鼠标,大图,var,div,event,div1
来源： https://www.cnblogs.com/java888/p/10510895.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jquery实现鼠标移入图片,显示大图并跟随鼠标移动