jQuery实现鼠标跟随效果
所谓鼠标跟随，一般就是指鼠标移到哪张图片上，那该张图片的放大图片就会出现，并且放大图片会随着鼠标在该张图片上移动而移动。
<!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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍简单实现js鼠标跟随效果，包括了简单实现js鼠标跟随效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js鼠标跟随效果展示的具体代码，供大家参考，具体内容如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
本文向大家介绍jquery实现图片跟随鼠标的实例，包括了jquery实现图片跟随鼠标的实例的使用技巧和注意事项，需要的朋友参考一下 jquery实现图片跟随鼠标的实例 开发后台写页面困难的一比啊，想写个鼠标移动某连接右侧显示二维码，并跟随鼠标移动的功能，各种查资料，花了一小天终于搞出来了，代码的记下来，浪费了我这么多时间，记你一辈子，这个可以直接在W3School直接运行，可以根据某行显示某个特
-
本文向大家介绍JavaScript实现鼠标移动粒子跟随效果，包括了JavaScript实现鼠标移动粒子跟随效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现鼠标移动粒子跟随效果的具体代码，供大家参考，具体内容如下 ※ 如上图是最终显示效果，跟随鼠标的移动，生成的粒子跟随。 需要用到的js库：Underscore。Underscore是一个JavaScript
-
本文向大家介绍javascript DIV实现跟随鼠标移动，包括了javascript DIV实现跟随鼠标移动的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了javascript DIV实现跟随鼠标移动的具体代码，供大家参考，具体内容如下 首先介绍的是一个div跟随鼠标移动的效果，具体代码如下 javascript div跟随鼠标移动 现在为大家分享的是javascript 一串DI
-
本文向大家介绍jQuery+css3实现文字跟随鼠标的上下抖动，包括了jQuery+css3实现文字跟随鼠标的上下抖动的使用技巧和注意事项，需要的朋友参考一下 css3过渡属性结合jq，如果直接复制代码运行，需要加载一个jquery文件 以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍javascript实现图片跟随鼠标移动效果的方法，包括了javascript实现图片跟随鼠标移动效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了javascript实现图片跟随鼠标移动效果的方法。分享给大家供大家参考。具体实现方法如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍写一个鼠标跟随的特效相关面试题，主要包含被问及写一个鼠标跟随的特效时的应答技巧和注意事项，需要的朋友参考一下 <!doctype html> <style> #pionter{ width: 20px; height: 20px; background: pink; border-radius: 20px; position:absolute; } </style>
-
本文向大家介绍JS实现跟随鼠标的链接文字提示框效果，包括了JS实现跟随鼠标的链接文字提示框效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现跟随鼠标的链接文字提示框效果。分享给大家供大家参考。具体如下： 这里使用JavaScript与CSS实现链接提示效果，不会改变你原来的链接结构，使用链接原有的title标签来实现，如果之前你使用有title标签，那你几乎只需把JS代码拷贝到你