jQuery实现的鼠标滑过弹出放大图片特效
本章节介绍一下一种比较常用的效果，那就是当鼠标滑过链接的时候，能够出现跟随鼠标指针移动的图层，在实际应用中，一般是对于链接的一些说明文字或者图片等等，
我们先来看个演示图
下面是代码实例:
<link rel="stylesheet" href="../css/common.css" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="../js/jquery.imagePreview.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("a.preview").preview();
});
</script>
<style type="text/css">
html{overflow-y:scroll;}
a.preview,a.preview:hover{text-decoration:none;}
a.preview img{margin:20px 10px;}
</style>
</head>
<body>
<div class="zxx_out_box">
<div class="zxx_in_box">
<h3 class="zxx_title">图片放大显示的jQuery插件演示页面</h3>
<div class="zxx_main_con">
<div class="zxx_test_list">
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm1.jpg" title="张含韵">
<img src="http://image.jb51.net/image/study/s/s128/mm1.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm2.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm2.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm3.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm3.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm4.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm4.jpg" />
</a>
<a class="preview" href="http://image.jb51.net/image/study/s/s256/mm5.jpg" title="某不知名美女">
<img src="http://image.jb51.net/image/study/s/s128/mm5.jpg" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
以上代码实现了我们的要求，小伙伴们觉着怎么样呢
接下来我们看看使用方法简要说明：
1.需要借助a标签的href属性，此jQuery插件的原理是当鼠标移至缩略图（或链接文字时），会加载一段含有href指向路径的大图html片段，该片段根据鼠标的位置绝对定位。于是产生了鼠标移到缩略图上显示大图的效果。大图的地址就是a标签的href属性的内容。例如：<a href=”xx.jpg”>缩略图</a> 如果此a标签含有显示大图的方法，则页面就会显示href所指向的“xx.jpg”这个图片。
2.使用的方法是：目标选择器.preview();例如上面的<a href=”xx.jpg”>缩略图</a>就可以使用$(“a”).preview();这段代码实现鼠标移到“缩略图”这个文字链接上显示xx.jpg这张图片的效果。
3.仅支持png,gif,jpg,bmp四种格式的图片，您可以修改插件代码的正则表达式扩展支持的图片格式类型。
下面简单介绍一下实现过程:
一.代码注释:
1.this.screenshotPreview=function(){ }，声明一个函数用来实现跟随效果，在本效果中，this其实是可以省略，它指向window。
2.xOffset=10，声明一个变量，用来规定鼠标指针距离弹出图片的横向距离。
3.yOffset=30，声明一个变量，用来规定鼠标指针距离弹出图片的纵向距离。
4.$("a.screenshot").hover(function(e){}，function(e){})，规定当鼠标移到链接和离开链接所要执行的函数。
5.this.t = this.title，将链接的title属性值赋值给t属性，这里的this是指向当前鼠标悬浮的链接对象。
6.var c = (this.t != "") ? "<br/>" + this.t : ""，如果this.t不为空，也就是存在title属性值，那么插入一个换行符并且连接当前标题内容，否则将c设置为空。
7.$("body").append("<p id='screenshot'><img src='"+ this.rel +"'/>"+ c +"</p>")，将图片和相关说明添加到body。
8.$("#screenshot").css("top",(e.pageY-xOffset)+"px").css("left",(e.pageX+yOffset)+"px").fadeIn("fast")，设置p元素的top和left属性值，并且采用淡入效果展现。
9.this.title=this.t，将title内容赋值给this.title，其实不要这一句也没有任何问题，有点多余。
10.$("#screenshot").remove()，移出p元素。
11.$("a.screenshot").mousemove(function(e){}），用来设置当鼠标指针移动时，图片能够跟随。
12.$("#screenshot").css("top",(e.pageY-xOffset)+"px") .css("left",(e.pageX+yOffset)+"px")，设置p元素的top和left属性值，能够实现跟随效果。
二.相关阅读:
1.hover()函数可以参阅jQuery的hover事件一章节。
2.append()函数可以参阅jQuery的append()方法一章节。
3.css()函数可以参阅jQuery的css()方法一章节。
4.pageY属性可以参阅jQuery的event.pageY属性一章节。
5.fadeIn()函数可以参阅jQuery的fadeIn()方法一章节。
6.remove()函数可以参阅jQuery的remove()方法一章节。
7.mousemove事件可以参阅jQuery的mousemove事件一章节。
相关文章
本文罗列了23款目前非常受欢迎的jQuery插件，可以轻松建立起唯美的图片切换特效的相册功能，并且其中的一些还支持视频和Flash。2011-04-04
这篇文章主要介绍了jJquery $.map使用方法实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
jQuery UI Dialog 创建友好的弹出对话框实现代码
jQuery UI Dialog是jQuery UI的弹出对话框组件，使用它可以创建各种美观的弹出对话框；它可以设置对话框的标题、内容，并且使对话框可以拖动、调整大小、及关闭；平常主要用来替代浏览嚣自带的alert、confirm、open等方法2012-04-04
本文详细介绍了jquery实现单行横移或翻转（上下、左右跳转）的方法。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
这篇文章主要介绍了jQuery实现浮动层随浏览器滚动条滚动的方法,涉及jQuery操作页面元素滚动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。接下来通过本文给大家分享ztree实现左边动态生成树右边为内容详情功能，需要的朋友参考下吧2017-11-11
这篇文章主要介绍了jQuery基于图层模仿五星星评价功能的方法,使用jQuery动态修改元素背景色的方法实现星评功能,需要的朋友可以参考下2015-05-05
这篇文章向大家推荐了一个jquery实现表单验证简单实例演示，需要的朋友可以参考下2015-11-11
Chosen 是一个JavaScript插件，它能让丑陋的、很长的select选择框变的更好看、更方便,不仅如此，它更扩大了，增长了主动筛选的功能。接下来通过本文给大家分享chosen 三级联动功能，一起看看吧2017-03-03
这篇文章主要介绍了使用JQuery自动完成插件Auto Complete详解,使用JQuery自动完成插件，更新现有图书列表页面上的搜索，当用户键入的时候立即显示结果。,需要的朋友可以参考下2019-06-06
最新评论