jQuery-图片跟随

heliuerya

已于 2023-05-30 08:20:56 修改

阅读量353

点赞数

分类专栏：练习题 jQuery 文章标签： html css jquery

于 2023-05-30 08:10:56 首次发布

本文链接：https://blog.csdn.net/heliuerya/article/details/130940393

版权

练习题同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

jQuery

13 篇文章 1 订阅

订阅专栏

该HTML代码示例展示了如何使用jQuery库来创建一个功能，当鼠标悬停在小图片上时，大图片会跟随鼠标在页面上移动。一旦鼠标离开小图片，大图片则会隐藏。此效果通过CSS定位和JavaScript事件处理实现。

摘要由CSDN通过智能技术生成

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片跟随 </title>
<style type="text/css">
   body {
       text-align: center;       /* 浏览器页面内容居中 */
   }
   #small {
       margin-top: 150px;       /* 到页面顶部150px */
   }
   #showBig {
       position: absolute;
       display: none;
   }
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
   //页面加载完成之后执行
   $(function(){
       //为id="small"绑定mouseover事件
       $("#small")
           .mouseover(function(event){
               // $("#showBig").show()将id=showBig的元素之前是隐藏状态，将它显示出来，
               // css("left",event.pageX+10) 显示位置是：鼠标当前位置水平+10，
               // css("top",event.pageY+10) 显示位置是：鼠标当前位置垂直+10
               $("#showBig")
                   .show()
                   .css("left",event.pageX+10)
                   .css("top",event.pageY+10);
           })
           .mousemove(function(event){
               $("#showBig")
                   .css("left",event.pageX+10)
                   .css("top",event.pageY+10);
           })
           .mouseout(function(){   //鼠标离开后，将$("#showBig")元素隐藏
               $("#showBig").hide();
           });
   });
</script>
</head>
<body>