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卸载全部事件的思路详解
Apr 03 jQuery
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery表单验证之密码确认
May 22 jQuery
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
jquery实现弹窗(系统提示框)效果
Dec 10 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
利用PHP实现短域名互转
2013/07/05 PHP
php中in_array函数用法分析
2014/11/15 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
jquery中$each()方法的使用指南
2015/04/30 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
javascript中的面向对象
2017/03/30 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
vue前端和Django后端如何查询一定时间段内的数据
2021/02/28 Vue.js
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
ansible作为python模块库使用的方法实例
2017/01/17 Python
浅述python2与python3的简单区别
2018/09/19 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
Python numpy数组转置与轴变换
2019/11/15 Python
python绘制彩虹图
2019/12/16 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
厂长岗位职责
2014/02/19 职场文书
《骆驼和羊》教学反思
2014/02/27 职场文书
退休党员个人对照检查材料思想汇报
2014/09/29 职场文书
银行先进个人总结
2015/02/15 职场文书
Flask搭建一个API服务器的步骤
2021/05/28 Python
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
python异步的ASGI与Fast Api实现
2021/07/16 Python
POST提交数据常见的四种方式
2022/01/18 HTML / CSS
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis