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 相关文章推荐
JQuery打造PHP的AJAX表单提交实例
Nov 03 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
Bootstrap3 多选和单选框(checkbox)
Dec 29 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
JS实现简单控制视频播放倍速的实例代码
Apr 18 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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
smarty基础之拼接字符串的详解
2013/06/18 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
ThinkPHP惯例配置文件详解
2014/07/14 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
jquery ajax执行后台方法
2010/03/18 Javascript
原创javascript小游戏实现代码
2010/08/19 Javascript
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
详解微信小程序——自定义圆形进度条
2016/12/29 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
深入理解React高阶组件
2017/09/28 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
js实现有趣的倒计时效果
2021/01/19 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
python opencv 二值化 计算白色像素点的实例
2019/07/03 Python
matplotlib.pyplot画图并导出保存的实例
2019/12/07 Python
Python3 assert断言实现原理解析
2020/03/02 Python
TensorFlow tf.nn.softmax_cross_entropy_with_logits的用法
2020/04/19 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
thinkphp5 路由分发原理
2021/03/18 PHP
美国领先的家庭智能音响系统品牌:Sonos
2018/07/20 全球购物
Cult Gaia官网:美国生活方式品牌
2019/08/16 全球购物
HR喜欢的自荐信格式
2013/10/08 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
实习报告评语
2014/04/26 职场文书
MySQL表的增删改查基础教程
2021/04/07 MySQL
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技