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 相关文章推荐
修复ie8&amp;chrome下window的resize事件多次执行
Oct 20 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
js调用AJAX时Get和post的乱码解决方法
Jun 04 Javascript
jquery js 获取时间差、时间格式具体代码
Jun 05 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
前端jquery部分很精彩
May 03 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
vue中element 上传功能的实现思路
Jul 06 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
深入Memcache的Session数据的多服务器共享详解
2013/06/13 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
smarty简单入门实例
2014/11/28 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
PHP 使用位运算实现四则运算的代码
2021/03/09 PHP
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
初识NodeJS服务端开发入门(Express+MySQL)
2017/04/07 NodeJs
Node.js中的http请求客户端示例(request client)
2017/05/04 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
详解KOA2如何手写中间件(装饰器模式)
2018/10/11 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
python实现多线程抓取知乎用户
2016/12/12 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
Django后端接收嵌套Json数据及解析详解
2019/07/17 Python
python 的 openpyxl模块 读取 Excel文件的方法
2019/09/09 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
如何用python写个模板引擎
2021/01/14 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
汤米巴哈马官方网站:Tommy Bahama
2017/05/13 全球购物
教学实验楼管理制度
2014/02/01 职场文书
通用自荐信范文
2014/03/14 职场文书
房屋继承公证书
2014/04/10 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
公司租房协议书范本
2014/10/08 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
Redis数据结构之链表与字典的使用
2021/05/11 Redis
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js