鼠标滑过小图时显示大图并跟随鼠标位置

作者:艺灵设计　-　来源:http://www.yilingsj.com　-　发布时间:2013-09-16 21:38:09　-　阅:　-　评:0　-　积分:0

我们在浏览网页时会看到有许多效果，特别是在浏览一些图片的时候，各种效果可谓是百花齐放，各有特色。例如鼠标滑过图片时图片放大、图片跟随、在弹出层显示、半透明遮罩层等等，今天就来分享下关于鼠标滑过图片时图片放大并且跟随特效的做法。还是先放一张图吧，这样看着更直观些:

源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标滑过小图时显示大图并跟随--艺灵设计,qq群:231749938</title>
<meta name="author" content="艺灵设计,315800015@qq.com,yilingsj@gmail.com, www.yilingsj.com" />
<meta name="keywords" content="鼠标滑过,鼠标跟随,图片切换,图片鼠标,半透明遮罩层">
<meta name="description" content="鼠标滑过,鼠标跟随,图片切换,图片鼠标,半透明遮罩层">
<script type="text/javascript" src="/skin/yilingsj/js/jquery-1.8.3.min.js"></script>
<style type="text/css">
*{margin:0; padding:0;}
ul{list-style:none;height:300px}
ul li{float:left; margin:10px; border:1px solid #e0e0e0;}
ul li a{display:block;}
ul li a img{width:200px;height:200px;border:0;}
ul li a:hover img{border:0;}
.datu{position:absolute;}
</style>
<script type="text/javascript">
$(function(){
$("a").mouseover(function(){
/*a滑过时执行下面的函数*/
var $dt="<div class='datu'><img src='"+this.href+"'/></div>";
/*定义变量$dt，并获取图片链接的地址*/
$("body").append($dt);
/*向页面中插入变量$dt引入的信息*/
}).mouseout(function(){
/*a离开时执行*/
$(".datu").remove();
/*清除页面加载的大图*/
}).mousemove(function(e){
/*时时记录鼠标的位置*/
$(".datu").css({"left":(e.pageX+5)+"px","top":(e.pageY+5)+"px"});
/*页面中插入大图的位置为鼠标的位置，在原有的基础上各+5px，读者可自定义修改偏移量*/
});
});
</script>
</head>
<body>
<ul>
<li><a href="/d/file/jquery/2013-09-16/images/0.jpg"><img src="/d/file/jquery/2013-09-16/images/0.jpg" /></a></li>
<li><a href="/d/file/jquery/2013-09-16/images/1.jpg"><img src="/d/file/jquery/2013-09-16/images/1.jpg" /></a></li>
<li><a href="/d/file/jquery/2013-09-16/images/2.jpg"><img src="/d/file/jquery/2013-09-16/images/2.jpg" /></a></li><li><a href="/d/file/jquery/2013-09-16/images/3.jpg"><img src="/d/file/jquery/2013-09-16/images/3.jpg" /></a></li>
</ul>
</body>
</html>

点此下载→→【代码】鼠标滑过小图时显示大图并跟随.zip　

点击上面的“运行代码”功能后我们会看到新页面中有几张图片，鼠标滑过时明显看到图片放大了并且跟随鼠标位置变化。我们来分析下原理。

原理：时时记录鼠标在小图上的位置，大图左上角的位置就是鼠标的位置，当鼠标离开小图后，清除大图。

从源码中我们可以看出，只使用了一张图片来实现大图与小图的切换，这样的好处就是减小了页面的大小，提升了页面加载速度，方便读者浏览。光看css是看不出什么核心来的，别忘了，我是用jq实现的，核心部位当然是jq了，读者可参考注释进行理解。

注：本文预期效果的思路与方法均为个人观点，不代表大众，准确性不做保证，以实现最终效果为标准！代码仅供读者参考。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/jquery/2013-09-16/78.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。

亲，扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助，您可以用支付宝打赏下艺灵哦！