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 相关文章推荐
简单三步,搞掂内存泄漏
Mar 10 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
jquery获取子节点和父节点的示例代码
Sep 10 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
详解参数传递四种形式
Jul 21 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
Vue如何实现验证码输入交互
Dec 07 Vue.js
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自带的进位制之间的转换函数
2013/06/08 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
JS字符串截取函数实例
2013/12/27 Javascript
AngularJS内置指令
2015/02/04 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
Vuex新手的理解与使用详解
2019/05/31 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
JS寄快递地址智能解析的实现代码
2020/07/16 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python使用xpath中遇到:到底是什么?
2018/01/04 Python
python opencv检测目标颜色的实例讲解
2018/04/02 Python
python自动化报告的输出用例详解
2018/05/30 Python
Flask框架Jinjia模板常用语法总结
2018/07/19 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
Python MySQL 日期时间格式化作为参数的操作
2020/03/02 Python
django model 条件过滤 queryset.filter(**condtions)用法详解
2020/05/20 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
python使用Word2Vec进行情感分析解析
2020/07/31 Python
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
P D PAOLA法国官网:西班牙著名的珠宝首饰品牌
2020/02/15 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
优秀教师先进事迹
2014/01/22 职场文书
求职信的最佳写作思路
2014/02/01 职场文书
《黄山奇石》教学反思
2014/04/19 职场文书
工作简历的自我评价
2019/05/16 职场文书