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

Posted 2022-07-20 知

篇首语：忘掉失败，不过要牢记失败中的教训。。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jQuery当鼠标悬停时放大图片的效果实例相关的知识，希望对你有一定的参考价值。

jQuery当鼠标悬停时放大图片的效果实例 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

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

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

复制代码代码如下: <UL id=gallery sizcache=" " sizset=" "> <LI sizcache=" " sizset=" "><A href=" <LI sizcache=" " sizset=" "><A href=" <LI sizcache=" " sizset=" "><A href=" </LI></UL>

　　 CSS样式表部分 bigimage是用jQuery创建的一个p标签的id 用来存放大图片设置其样式为绝对定位并先隐藏给a标签添加一个黑色的背景是为了给图片变暗的效果做铺垫就这样一个简单的相册效果就做好了

复制代码代码如下: ul#gallery list style:none; width: px; margin: auto px; padding left: px; border: px solid #d d d ; background:#fff; overflow:hidden; ul#gallery li width: px; height: px; float:left; margin: px px px ; ul#gallery li a smallimage background:# ; /*添加一个黑色的背景为图片变暗的效果做铺垫*/ display:block; width: px; height: px; #bigimage position:absolute; display:none; /*大图片的父标签设置相对定位并将显示样式设置为隐藏*/ #bigimage img width: px; height: px; padding: px; background:#fff; border: px solid #e e e ;

　　 jQuery代码部分先声明个变量x y用来存放大图片离鼠标的距离在body中追加一个id为bigimage的p标签用来存放大图片大图片的路径就包含在了a标签的 rel属性中当鼠标在小图片悬停的时候将获取到的鼠标在浏览器中的坐标赋值给大图片绝对定位的坐标并以淡入的效果显示之后再给小图片绑定一个 mousemove事件也就是当鼠标移动的时候大图片就会跟着鼠标移动了看以下的代码

复制代码代码如下: <script src= <script type=text/javascript"> //<![CDATA[ $(function() var x = ; var y = ; $("a smallimage") hover(function(e) //绑定一个鼠标悬停时事件 //新建一个p标签来存放大图片 this rel就是获取到a标签的大图片的路径然后追加到body中 $("body") append( <p id="bigimage"><img src= + this rel + /></p> ); //改变小图片的透明度为结合上面的CSS 看起来就象是图片变暗了 $(this) find( img ) stop() fadeTo( slow ); //将鼠标的坐标和声明的x y做运算并赋值给大图片绝对定位的坐标然后以fadeIn的效果显示 $("#bigimage") css(top:(e pageY y ) + px left:(e pageX + x ) + px ) fadeIn( fast ); function() //鼠标离开后 //将变暗的图片复原 $(this) find( img ) stop() fadeTo( slow ); //移除新增的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 + ; //此时大图片的位置应该是当前鼠标指针的宽度减去新的x的值 $("#bigimage") css(top:(e pageY y ) + px left:(e pageX x ) + px ); else //否则 //仍将x定义为这一步千万不能省略因为之前x的值已经改变 x = ; //如果右侧的宽度值够显示大图片将仍然按照原来的位置显示 $("#bigimage") css(top:(e pageY y ) + px left:(e pageX + x ) + px ); ;

　　最后再结合上面的代码完整的jQuery代码部分如下

复制代码代码如下: <script type=text/javascript> //<![CDATA[ $(function() var x = ; var y = ; $("a smallimage") hover(function(e) $("body") append( <p id="bigimage"><img src= + this rel + /></p> ); $(this) find( img ) stop() fadeTo( slow ); widthJudge(e); //调用宽度判断函数 $("#bigimage") fadeIn( fast ); function() $(this) find( img ) stop() fadeTo( slow ); $("#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 + ; $("#bigimage") css(top:(e pageY y ) + px left:(e pageX x ) + px ); else x = ; $("#bigimage") css(top:(e pageY y ) + px left:(e pageX + x ) + px ); ; ); //]]> </script> cha138/Article/program/Java/JSP/201311/20168