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

首页 > 网络编程 > JavaScript > javascript类库 > jquery 更新日期: 2016-03-04
这是一个基于jQuery的效果,当鼠标在小图片上悬停时,会弹出一个大图,该大图会跟随鼠标的移动而移动

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

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

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

 <LI sizcache="6" sizset="8"><A class="smallimage" href="http://www.jb51.net" rel=images/002_big.jpg><IMG alt="" src="images/002_small.jpg"></A>
 <LI sizcache="6" sizset="9"><A class="smallimage" href="http://www.jb51.net" rel=images/003_big.jpg><IMG alt="" src="images/003_small.jpg"></A>
 </LI></UL>

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

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


> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • jQuery实现列表自动循环滚动鼠标悬停时停止滚动
    jQuery实现列表自动循环滚动鼠标悬停时停止滚动
    需要在页面中一个小的区域循环滚动展示新闻并且鼠标悬停时停止滚动并提示,离开后,继续滚动,具体实现如下,喜欢的朋友可以参考下需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图:  上干货 html: <li><a href="#" title=&qu ...
  • jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
    jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
    这篇文章主要介绍了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码,涉及jQuery鼠标事件结合animate动画实现背景翻转效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的鼠标悬停背景翻转的黑色导航菜单菜单,预览效果时左下角 ...
  • jQuery实现鼠标经过时出现隐藏层文字链接的方法
    jQuery实现鼠标经过时出现隐藏层文字链接的方法
    这篇文章主要介绍了jQuery实现鼠标经过时出现隐藏层文字链接的方法,涉及jQuery鼠标hover事件的响应及页面元素的动态处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法.分享给大家供大家参考.具体如下: 这里演示Jquery显示隐藏层的方法,鼠标经过时出现文字链接,模拟评分效果,这里没 ...
  • jquery实现LED广告牌旋转系统图片切换效果代码分享
    jquery实现LED广告牌旋转系统图片切换效果代码分享
    这篇文章主要介绍了jquery实现LED广告牌旋转系统图片切换效果类似路边场景,很实用的代码,推荐给大家,有需要的小伙伴可以参考下.本文实例讲述了jquery实现LED广告牌旋转系统图片切换效果,分享给大家供大家参考.具体如下:js模拟路边巨大显示屏上广告切换效果,不得不相信js做到了,而且让你无话可说的逼真效果.LED广告显示器上图片切换效果,场景也类似, ...
  • JQuery分屏指示器图片轮换效果实例
    这篇文章主要介绍了JQuery分屏指示器图片轮换效果实现方法,实例分析了jQuery图片轮播操作的相关技巧,需要的朋友可以参考下本文实例讲述了JQuery分屏指示器图片轮换效果实现方法.分享给大家供大家参考.具体分析如下: 在Web App大行其道的今天,分屏指示器用得非常广泛,从Android.到腾讯的Web OS等等.分屏指示器给人很好的用户体验,下面就 ...
猜你喜欢