jQuery实现鼠标跟随效果


Posted in Javascript onFebruary 20, 2017

所谓鼠标跟随,一般就是指鼠标移到哪张图片上,那该张图片的放大图片就会出现,并且放大图片会随着鼠标在该张图片上移动而移动。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  *{
   margin:0;
   padding:0;
  }
  img{
   border:none;
  }
  .box{
   width:660px;
   position: relative;
  }
  .box .mark{
   position: absolute;
   width: 400px;
   height: 300px;
   display: none;
  }
  .box .mark img{
   width: 100%;
  }
  .box img{
   width: 150px;
   float: left;
   margin:5px;
  }
 </style>
</head>
<body>
<div class="box" id="box">
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=e95708d565639d99576ae7cb00729334" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=5328802dc943fc046e109f70359add0a" alt=""/>
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=9e5459a7c0098c27adf4bdd73889caa9" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=846f4d1987765dc4cfd5a06fcdd2dcc1" alt=""/>
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=3cd1c8e301007f0c94850139ac79cb5a" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=747bf3f7092ebd2b0bf9fcd27e28bbe5" alt=""/>
 <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=f391169b2cf678aa6fd253cf40d9821d" 
  realImg="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=fec8d2f20fad1f28d540337a831e89d0" alt=""/>
 <div id="mark" class="mark"><img src="" alt=""/></div>
</div>
<script src="http://s0.kuaizhan.com/res/skin/js/lib/jquery-2.0.3.min.js"></script>
<script>
 //1.鼠标移入哪张图片的时候,让他对应的大图显示;
 //2.当鼠标在img中移动的时候,大图跟着走;
 var $box=$('.box');
 var $aImg=$box.children('img');
 var $mark=$('.mark');
 var $offset=$box.offset();
 $aImg.mouseover(function(){
  //当鼠标移入每张图片的时候,让mark显示,并且,让mark里面的img标签,src属性值为当前这个图片的realImg属性上拿到的值;
  $mark.show().find('img').attr('src',$(this).attr('realImg'));
 });
 $aImg.mousemove(function(e){
  //拿鼠标的x坐标,减去$box距离body的left位置;
  var left= e.clientX-$offset.left+10;
  var top= e.clientY-$offset.top+10;
  $mark.css({left:left,top:top})
 });
 $aImg.mouseout(function(){
  $mark.hide();
 })
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
SlideView 图片滑动(扩展/收缩)展示效果
Aug 01 Javascript
jquery选择器之内容过滤选择器详解
Jan 27 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
Bootstrap模态对话框的简单使用
Apr 29 Javascript
正则表达式替换html元素属性的方法
Nov 26 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
Node.js安装配置图文教程
May 10 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
Oct 23 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 #Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
Feb 20 #Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 #Javascript
原生JS实现跑马灯效果
Feb 20 #Javascript
js 实现省市区三级联动菜单效果
Feb 20 #Javascript
js事件冒泡与事件捕获详解
Feb 20 #Javascript
关于ES6的六个小特性(二)
Feb 20 #Javascript
You might like
Windows下的PHP5.0详解
2006/11/18 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
PHP注释实例技巧
2008/10/03 PHP
攻克CakePHP系列三 表单数据增删改
2008/10/22 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
浅谈PHP封装CURL
2019/03/06 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
js实现图片从左往右渐变切换效果的方法
2015/02/06 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
通过Python 接口使用OpenCV的方法
2018/04/02 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
Django+JS 实现点击头像即可更改头像的方法示例
2018/12/26 Python
Python实现插入排序和选择排序的方法
2019/05/12 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
pygame实现打字游戏
2021/02/19 Python
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
大学生个人学习总结
2015/02/15 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
python 如何在 Matplotlib 中绘制垂直线
2021/04/02 Python
Python中相见恨晚的技巧
2021/04/13 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
yolov5返回坐标的方法实例
2022/03/17 Python
victoriaMetrics库布隆过滤器初始化及使用详解
2022/04/05 Golang