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 相关文章推荐
Javascript remove 自定义数组删除方法
Oct 20 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
修改UA在PC中访问只能在微信中打开的链接方法
Nov 27 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
Nov 28 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 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
加速XP搜索功能堪比vista
2007/03/22 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
Angular浏览器插件Batarang介绍及使用
2018/02/07 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
vue项目中mock.js的使用及基本用法
2019/05/22 Javascript
[01:50]WODOTA制作 DOTA2中文宣传片《HERO》
2013/04/28 DOTA
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python虚拟环境项目实例
2017/11/20 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Python单元测试简单示例
2018/07/03 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
美国正版电视节目和电影在线观看:Hulu
2018/05/24 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
团队经理竞聘书
2014/03/31 职场文书
员工安全承诺书
2014/05/22 职场文书
联片教研活动总结
2014/07/01 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
见义勇为事迹材料
2014/12/24 职场文书
爱晚亭导游词
2015/02/09 职场文书
2015年社区工作总结
2015/04/08 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
Python如何识别银行卡卡号?
2021/06/10 Python
PostgreSQL解析URL的方法
2021/08/02 PostgreSQL
python使用pycharm安装pyqt5以及相关配置
2022/04/22 Python
如何开启Apache,Nginx和IIS服务器的GZIP压缩功能
2022/04/29 Servers