手机游戏
经典单机
角色扮演
休闲益智
动作冒险
射击枪战
赛车竞速
模拟经营
解密闯关
策略战争
手机软件
时尚购物
体育运动
资讯阅读
教育学习
摄影摄像
生活服务
效率办公
聊天社交
视频盒子
其它软件
新闻资讯
游戏攻略
软件教程
游戏问答
软件资讯
软件技术
叨叨念念
网站技术
技术问答
软件教程
资源资料
原创作品
代码学习
网页设计
网络技术
合集
合集
游戏合集
软件合集
资讯合集
视频合集
首页 > 网页设计 > 网页设计

jquery实现图片放大镜效果

作者:星知苑 时间:2011-12-15 12:51:11

在一些大型的购物网站 你经常可以看到这个效果,通过放大镜效果,可以把一个小的图片的某一部位放大到清晰可见。 比如淘宝网的商品局部放大效果。

1.首先你必须要有2张图片,一张缩略图和一张高清晰的图片。 然后当鼠标在缩略图里移动时,通过计算鼠标在缩略图里的位置和比例。最后通过比例就可以得出大图要显示的部分。

2.小图中的半透明层[break]
当鼠标滑入小图片时,我们需要添加一个半透明层用来显示当前鼠标框住的区域。
有3种状态:
(1)鼠标滑入
(2)鼠标滑动
(3)鼠标滑出
滑入时,我们需要给半透明层定位,并马上显示出层。通过给元素绑定mousemove事件。
滑动时,需要给透明层实时定位,在计算定位时,要注意半透明层不超出图片边界。
同时在mousemove时,添加了一个setTimeout,减少资源占用。
滑出后,隐藏半透明层,并把mousemove解除绑定,减少资源占用.
这一步最关键的就是,滑动时中心点和坐标的计算。

3.显示放大的图
在刚才3种状态上,在添加点内容。
鼠标滑入时,需要添加大图的显示。
鼠标滑动时,需要根据鼠标当前的位置在小图中的比例,然后把比例*大图的宽度高度 得到大图显示的位置。
鼠标滑出后,需要隐藏大图。
这一步最关键的就是,滑动时比例的计算。

效果图:

点击查看原图

在线完整展示http://demo.myxzy.com/jqzoom/index.htm 

源码包下载:百度网盘

良心推荐

飞行射击游戏手游大全
  • 战机代号666破解版无限钻石
  • 星际银河战机游戏
  • 空中战场3d雷霆空战无限金币版
  • x战机下载
  • 现代战争直升机无限金币版
  • 空战争锋安卓手游安卓
炫酷的飞机各种炸天的弹幕满天飞,让你享受手机飞机的那种指尖上的欢乐,特别好玩的多款不同的类型的飞行游戏,有单机的也有联网的都是很棒的画面还有操作也是相当的简单,游戏的功能也是多种多样绝对是手机必备的游戏,相信在这里玩家们可以找到属于自己的一款超喜欢的飞行游戏,还是不用氪金的那种哦。

相关资讯