js案例之鼠标跟随jquery版(实例讲解)


Posted in jQuery onJuly 21, 2017

废话不多说,直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body,div{
      margin:0;
      padding:0;
    }
    img{
      display:block;
      border:none;
    }
    .box{
      position:relative;
      width:450px;
      margin:20px auto;
    }
    .box img{
      float:left;
      margin-left:10px;
      width:100px;
      height:75px;
      border:1px solid #008000;
    }
    #mark{
      display:none;
      position:absolute;
      top:0;
      left:0;
      z-index:10;
      width:400px;
      height:300px;
      border:1px solid #0077b0;
    }
    #mark img{
      float:inherit;
      margin-left:0;
      border:none;
      width:100%;
      height:100%;
    }
  </style>
</head>
<body>
  <div class='box' id='box'>
    <img src="img/apple_1.jpg" alt="" bigImg='img/apple_1_bigger.jpg'>
    <img src="img/apple_2.jpg" alt="" bigImg='img/apple_2_bigger.jpg'>
    <img src="img/apple_3.jpg" alt="" bigImg='img/apple_3_bigger.jpg'>
    <img src="img/apple_4.jpg" alt="" bigImg='img/apple_4_bigger.jpg'>
    <div id='mark'>
      <img src="img/apple_1_bigger.jpg" alt="">
    </div>
  </div>

  <script src='js/jquery-1.11.3.min.js'></script>
  <script>
    $(function(){
      var $box = $("#box"),$mark = $("#mark");
      var $boxOffset = $box.offset();//获取当前元素的距离body的偏移
      $box.children("img").bind("mouseover",function(e){
        var e = e || window.event;
        e.target = e.target || e.srcElement;
        var left = e.clientX - $boxOffset.left+10;
        var top = e.clientY - $boxOffset.top+10;
        $mark.stop().show(500).css({left:left,top:top}).find("img").attr("src",e.target.getAttribute("bigImg"));

      }).bind("mousemove",function(e){
        var e = e || window.event;
        e.target = e.target || e.srcElement;
        var left = e.clientX - $boxOffset.left+10;
        var top = e.clientY - $boxOffset.top+10;
        $mark.css({left:left,top:top}).find("img").attr("src",e.target.getAttribute("bigImg"));

      }).bind("mouseout",function(e){
        $mark.stop().hide(500);

      })


    })
  </script>
</body>
</html>

以上这篇js案例之鼠标跟随jquery版(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jquery实现左右轮播切换效果
Jan 01 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jquery实现烟花效果(面向对象)
Mar 10 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 #jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 #jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 #jQuery
jquery版轮播图效果和extend扩展
Jul 18 #jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 #jQuery
You might like
模仿OSO的论坛(二)
2006/10/09 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
PHP开发框架Laravel数据库操作方法总结
2014/09/03 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
php cli配置文件问题分析
2015/10/15 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
PHP7 弃用功能
2021/03/09 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
js数组Array sort方法使用深入分析
2013/02/21 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
解决vue addRoutes不生效问题
2020/08/04 Javascript
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
JavaScript实现一维数组转化为二维数组
2018/04/17 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
Python之循环结构
2019/01/15 Python
Sneaker Studio罗马尼亚网站:购买运动鞋
2018/11/04 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
购房协议书范本
2014/10/02 职场文书
观看建国大业观后感
2015/06/01 职场文书
2015年工会工作总结范文
2015/07/23 职场文书
同事离别感言
2015/08/04 职场文书
《这片土地是神圣的》教学反思
2016/02/16 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
Python Numpy之linspace用法说明
2021/04/17 Python
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis