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 相关文章推荐
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
javascript避免数字计算精度误差的方法详解
Mar 05 Javascript
JavaScript中双叹号(!!)作用示例介绍
Apr 10 Javascript
jQuery产品间断向下滚动效果核心代码
May 08 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
vue计算属性及使用详解
Apr 02 Javascript
深入浅析Vue中的Prop
Jun 10 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 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
PHP的面向对象编程
2006/10/09 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
php使用pdo连接报错Connection failed SQLSTATE的解决方法
2014/12/15 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
解决laravel session失效的问题
2019/10/14 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
jquery移动listbox的值原理及代码
2013/05/03 Javascript
JavaScript中reduce()方法的使用详解
2015/06/09 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
EasyUI框架 使用Ajax提交注册信息的实现代码
2017/09/27 Javascript
python批量下载图片的三种方法
2013/04/22 Python
python处理圆角图片、圆形图片的例子
2014/04/25 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python实现Pig Latin小游戏实例代码
2018/02/02 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Pycharm新建模板默认添加个人信息的实例
2019/07/15 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
python 实现aes256加密
2020/11/27 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
什么是.net
2015/08/03 面试题
介绍一些UNIX常用简单命令
2014/11/11 面试题
物流仓储实习自我鉴定
2013/09/25 职场文书
上级检查欢迎词
2014/01/18 职场文书
电子商务专业求职信
2014/03/08 职场文书
分公司任命书
2014/06/06 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
新生儿未入户证明
2015/06/23 职场文书
nginx网站服务如何配置防盗链(推荐)
2021/03/31 Servers
python函数的两种嵌套方法使用
2022/04/02 Python