jQuery实现的鼠标滑过弹出放大图片特效


Posted in Javascript onJanuary 08, 2016

本章节介绍一下一种比较常用的效果,那就是当鼠标滑过链接的时候,能够出现跟随鼠标指针移动的图层,在实际应用中,一般是对于链接的一些说明文字或者图片等等,

我们先来看个演示图

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.3water.com/image/study/s/s256/mm1.jpg" title="张含韵">
    	<img src="http://image.3water.com/image/study/s/s128/mm1.jpg" />
    </a>
    <a class="preview" href="http://image.3water.com/image/study/s/s256/mm2.jpg" title="某不知名美女">
    	<img src="http://image.3water.com/image/study/s/s128/mm2.jpg" />
    </a>
    <a class="preview" href="http://image.3water.com/image/study/s/s256/mm3.jpg" title="某不知名美女">
    	<img src="http://image.3water.com/image/study/s/s128/mm3.jpg" />
    </a>
    <a class="preview" href="http://image.3water.com/image/study/s/s256/mm4.jpg" title="某不知名美女">
    	<img src="http://image.3water.com/image/study/s/s128/mm4.jpg" />
    </a>
    <a class="preview" href="http://image.3water.com/image/study/s/s256/mm5.jpg" title="某不知名美女">
    	<img src="http://image.3water.com/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事件一章节。

Javascript 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
javascript实现的一个随机点名功能
Aug 26 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件体系结构
Nov 19 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
Nov 25 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 #Javascript
javascript中select下拉框的用法总结
Jan 07 #Javascript
详解JS中Array对象扩展与String对象扩展
Jan 07 #Javascript
js创建对象的方法汇总
Jan 07 #Javascript
JavaScript截取、切割字符串的技巧
Jan 07 #Javascript
js确认框confirm()用法实例详解
Jan 07 #Javascript
实例讲解jquery与json的结合
Jan 07 #Javascript
You might like
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
php5.2时间相差8小时
2007/01/15 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
PHP 循环列出目录内容的函数代码
2010/05/26 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
JS实现选项卡实例详解
2015/11/17 Javascript
jQuery获取当前点击的对象元素(实现代码)
2016/05/19 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
仿iframe效果Aajx文件上传实例
2016/11/18 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
node.js中fs文件系统目录操作与文件信息操作
2018/02/24 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
复制粘贴功能的Python程序
2008/04/04 Python
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
python uuid模块使用实例
2015/04/08 Python
Python导入oracle数据的方法
2015/07/10 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Python字符串函数strip()原理及用法详解
2020/07/23 Python
python中通过pip安装库文件时出现“EnvironmentError: [WinError 5] 拒绝访问”的问题及解决方案
2020/08/11 Python
纯css3实现照片墙效果
2014/12/26 HTML / CSS
什么是索引指示器
2012/08/20 面试题
工商学院毕业生个人自我评价
2013/09/19 职场文书
法律专业推荐信范文
2013/11/29 职场文书
高一政治教学反思
2014/01/28 职场文书
健康状况证明模板
2014/10/23 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书