jQuery当鼠标悬停时放大图片的效果实例


Posted in Javascript onJuly 03, 2013

这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果。今天就把制作该效果的经验与大家一同分享。先看看最终效果演示:

jQuery当鼠标悬停时放大图片的效果实例

HTML结构部分:
先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径。

<UL id=gallery sizcache="6" sizset="7"> 
 <LI sizcache="6" sizset="7"><A class="smallimage" href="https://3water.com" rel=images/001_big.jpg><IMG alt="" src="images/001_small.jpg"></A> 
 <LI sizcache="6" sizset="8"><A class="smallimage" href="https://3water.com" rel=images/002_big.jpg><IMG alt="" src="images/002_small.jpg"></A> 
 <LI sizcache="6" sizset="9"><A class="smallimage" href="https://3water.com" rel=images/003_big.jpg><IMG alt="" src="images/003_small.jpg"></A> 
 </LI></UL>

CSS样式表部分:
bigimage是用jQuery创建的一个p标签的id,用来存放大图片,设置其样式为绝对定位,并先隐藏。给a标签添加一个黑色的背景,是为了给图片变暗的效果做铺垫。就这样,一个简单的相册效果就做好了。
ul#gallery { list-style:none; width:660px; margin:0 auto 10px; padding-left:20px; border:1px solid #d3d3d3; background:#fff; overflow:hidden; } 
 ul#gallery li { width:200px; height:200px; float:left; margin:20px 20px 20px 0; }    
 ul#gallery li a.smallimage { background:#333; /*添加一个黑色的背景为图片变暗的效果做铺垫*/ display:block; width:200px; height:200px; }   
 #bigimage { position:absolute; display:none; /*大图片的父标签设置相对定位并将显示样式设置为隐藏*/ }   
 #bigimage img { width:400px; height:400px; padding:5px; background:#fff; border:1px solid #e3e3e3; }

jQuery代码部分:
先声明2个变量x,y用来存放大图片离鼠标的距离。在body中追加一个id为bigimage的p标签,用来存放大图片,大图片的路径就包含在了a标签的rel属性中。当鼠标在小图片悬停的时候,将获取到的鼠标在浏览器中的坐标赋值给大图片绝对定位的坐标,并以淡入的效果显示。之后,再给小图片绑定一个mousemove事件,也就是当鼠标移动的时候,大图片就会跟着鼠标移动了。看以下的代码:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
 <script type="text/javascript"> 
 //<![CDATA[ 
 $(function(){ 
     var x = 22; 
     var y = 20; 
     $("a.smallimage").hover(function(e){  //绑定一个鼠标悬停时事件 
     //新建一个p标签来存放大图片,this.rel就是获取到a标签的大图片的路径,然后追加到body中 
         $("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>');  
     //改变小图片的透明度为0.5,结合上面的CSS,看起来就象是图片变暗了 
         $(this).find('img').stop().fadeTo('slow',0.5); 
    //将鼠标的坐标和声明的x,y做运算并赋值给大图片绝对定位的坐标,然后以fadeIn的效果显示 
         $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'}).fadeIn('fast'); 
     },function(){ //鼠标离开后  
     //将变暗的图片复原 
        $(this).find('img').stop().fadeTo('slow',1); 
     //移除新增的p标签 
         $("#bigimage").remove(); 
     }); 
     $("a.smallimage").mousemove(function(e){  //绑定一个鼠标移动的事件 
     //将鼠标的坐标和声明的x,y做运算并赋值给大图片绝对定位的坐标,这样大图片就能跟随图片而移动了 
     $("#bigimage").css({top:(e.pageY -y ) + 'px',left:(e.pageX + x ) + 'px'}); 
     }); 
 }); 
 //]]> 
 </script>

到这一步,效果已经差不多了,但是正如蓝秋枫同志提到的,效果还并不完美。如果弹出的大图片超过了浏览器的宽度就会出现滚动条,这对于用户体验来说的确很不好。趁周末有时间我又在原来的基础上进行了修改。
先分析下思路,默认情况下,弹出的大图片的位置始终是在当前鼠标指针的右侧,如果当前鼠标指针离浏览器右侧边界的宽度小于弹出的大图片的宽度时,就会出现图片溢出浏览器的现象。那么只要写一个语句判断当前鼠标指针离浏览器右侧的边界的宽度是否小于大图片的宽度,然后再根据这个判断来显示。
有了上面的思路就好办了,为了使代码更简洁,提高复用性,我新增了一个widthJudge函数用于判断宽度:
function widthJudge(e){  
        //页面的总宽度减去鼠标当前的X坐标得到右侧边界的宽度  
     var marginRight = document.documentElement.clientWidth - e.pageX;      
             //获取弹出的大图片的宽度  
     var imageWidth = $("#bigimage").width();      
             //如果右侧边界的宽度小于弹出的大图片的宽度  
    if(marginRight < imageWidth)  
     {  
                 //重新计算变量x的值  
         x = imageWidth + 22;  
                 //此时大图片的位置应该是当前鼠标指针的宽度减去新的x的值  
        $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX - x ) + 'px'});  
     }else{    //否则  
                  //仍将x定义为22,这一步千万不能省略,因为之前x的值已经改变  
         x = 22;  
                 //如果右侧的宽度值够显示大图片,将仍然按照原来的位置显示  
         $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'});  
     };  
 }

最后再结合上面的代码,完整的jQuery代码部分如下:
<script type="text/javascript">  
 //<![CDATA[  
 $(function(){     
     var x = 22;  
     var y = 20;  
     $("a.smallimage").hover(function(e){  
             $("body").append('<p id="bigimage"><img src="'+ this.rel + '" alt="" /></p>');  
             $(this).find('img').stop().fadeTo('slow',0.5);  
         widthJudge(e);    //调用宽度判断函数  
         $("#bigimage").fadeIn('fast');  
     },function(){  
         $(this).find('img').stop().fadeTo('slow',1);  
         $("#bigimage").remove();  
     });   
     $("a.smallimage").mousemove(function(e){  
         widthJudge(e);    //调用宽度判断函数  
     });   
     function widthJudge(e){  
         var marginRight = document.documentElement.clientWidth - e.pageX;  
         var imageWidth = $("#bigimage").width();  
         if(marginRight < imageWidth)  
         {  
             x = imageWidth + 22;  
             $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX - x ) + 'px'});  
         }else{  
             x = 22;  
             $("#bigimage").css({top:(e.pageY - y ) + 'px',left:(e.pageX + x ) + 'px'});  
         };  
     }  
 });  
 //]]>  
 </script>

解决了图片溢出浏览器的问题,这个效果还算不错了。如果你喜欢这个效果,你可以下载源文件。
Javascript 相关文章推荐
查询json的数据结构的8种方式简介
Mar 10 Javascript
原生javascript+css3编写的3D魔方动画旋扭特效
Mar 14 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
AngularJS入门教程之链接与图片模板详解
Aug 19 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
jQuery焦点图轮播效果实现方法
Dec 19 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
vue路由插件之vue-route
Jun 13 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 #Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 #Javascript
JS去除右边逗号的简单方法
Jul 03 #Javascript
JavaScript实现QueryString获取GET参数的方法
Jul 02 #Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 #Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 #Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 #Javascript
You might like
PHP入门
2006/10/09 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
jquery 指南/入门基础
2007/11/30 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
NodeJS学习笔记之网络编程
2014/08/03 NodeJs
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
javascript中this指向详解
2016/04/23 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
JavaScript如何获取到导航条中HTTP信息
2017/10/10 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
在Django中同时使用多个配置文件的方法
2015/07/22 Python
Python实现合并两个列表的方法分析
2018/05/28 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python用列表生成式写嵌套循环的方法
2018/11/08 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
局火灾防控工作方案
2014/05/25 职场文书
法学求职信
2014/06/22 职场文书
刑事法律意见书
2015/06/04 职场文书
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS