博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
31.图片放大镜插件——jqzoom
阅读量:5966 次
发布时间:2019-06-19

本文共 765 字,大约阅读时间需要 2 分钟。

在调用jqzoom图片放大镜插件时,需要准备一大一小两张一样的图片,在页面中显示小图片,当鼠标在小图片中移动时,调用该插件的jqzoom()方法,显示与小图片相同的大图片区域,从而实现放大镜的效果,调用格式如下:

$(linkimage).jqzoom({options})

其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,在页面中,添加一个被<a>元素包含的图片元素,当在图片元素中移动鼠标时,在图片的右边,将显示放大后的所选区域效果,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当在小图片中移动鼠标时,将调用放大镜插件的jqzoom()方法,在图片的右侧显示与小图片所选区域相同的放大区域,实现放大镜的效果。

 

1  2  3      4         图片放大镜插件 5         
6
7 8 9 10 11 12
13
14
图片放大镜 15
16
17
18 19 20
21
22 23 32 33

 

转载于:https://www.cnblogs.com/binhuguang/p/4359103.html

你可能感兴趣的文章
TCP与UDP的区别
查看>>
Javascript获取日期和星期
查看>>
xml字符串转xml对象,xml对象转json对象
查看>>
AttributeError: 'NoneType' object has no attribute 'split' 报错处理
查看>>
PYTHON——多线程:同步条件(Event)
查看>>
ThinkCMF变量输出+使用函数
查看>>
0505.Net基础班第十三天(面向对象多态)
查看>>
Oracle 分页查询
查看>>
微信开发之模板消息
查看>>
[python机器学习及实践(2)]Sklearn实现朴素贝叶斯
查看>>
SQL Server不存在或拒绝访问故障的排除
查看>>
java多线程(二)——锁机制synchronized(同步方法)
查看>>
(原创)在service中定时执行网络操作的几点说明
查看>>
[Javascript]XMLHttpRequest对象实现下载进度条
查看>>
UVA-572-搜索基础题
查看>>
iBeacon技术
查看>>
mac环境下配置nginx
查看>>
const与volatile
查看>>
电脑出现 flash update failed 解决方法
查看>>
【matlab】matalb生成dll给Cpp用
查看>>