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 命名空间以提高代码重用性
Nov 13 Javascript
基于jquery的用鼠标画出可移动的div
Sep 06 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
Jun 02 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
vue 中几种传值方法(3种)
Nov 12 Javascript
echarts实现获取datazoom的起始值(包括x轴和y轴)
Jul 20 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 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 图像尺寸调整代码
2010/05/26 PHP
表单提交验证类
2006/07/14 Javascript
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
Ext.FormPanel 提交和 Ext.Ajax.request 异步提交函数的区别
2009/11/12 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
nodeJS实现简单网页爬虫功能的实例(分享)
2017/06/08 NodeJs
Nuxt.js踩坑总结分享
2018/01/18 Javascript
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
浅谈Node框架接入ELK实践总结
2019/02/22 Javascript
vue通过video.js解决m3u8视频播放格式的方法
2019/07/30 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
layui监听工具栏的实例(操作列表按钮)
2019/09/10 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
2020/07/28 Javascript
[31:33]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第一场
2014/05/23 DOTA
[03:11]不朽宝藏三外观展示
2020/09/18 DOTA
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
遗传算法python版
2018/03/19 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
Django中间件基础用法详解
2019/07/18 Python
纯CSS3制作漂亮带动画效果的主机价格表
2015/04/25 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
工作建议书范文
2014/05/13 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
社区母亲节活动总结
2015/02/10 职场文书
年会主持人开场白台词
2015/05/29 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python