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

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

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片放大镜插件</title><link href="http://www.imooc.com/data/jquery.jqzoom.css" rel="stylesheet" type="text/css" /><link href="style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script><script type="text/javascript" src="http://www.imooc.com/data/jquery.jqzoom.js"></script>
</head>
<body><div id="divtest"><div class="title"><span class="fl">图片放大镜</span> </div><div class="content"><a href="http://img.mukewang.com/52e4aec90001924d06800599.jpg" id="jqzoom" title="小兔子乖乖"><img src="http://img.mukewang.com/52e4aee700012df702130212.jpg" alt=""/></a></div></div><script type="text/javascript">$(function () {$("#jqzoom").jqzoom({//绑定图片放大插件jqzoomzoomWidth: 123, //小图片所选区域的宽zoomHeight: 123, //小图片所选区域的高zoomType: 'reverse' //设置放大镜的类型});});</script>
</body>
</html>

jquery图片放大镜插件—jqzoom相关推荐

  1. 介绍一个十分好用的JQUERY图片放大镜插件

    介绍一个十分好用的JQUERY图片放大镜插件 介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL, ...

  2. jQuery图片放大镜插件

    运行效果: 代码编辑: <html lang="zh"> <head><meta charset="UTF-8"><m ...

  3. jquery 图片放大镜插件

    jQZoom是一个基于最流行的jQuery的图片放大器插件.它功能强大,使用简便.支持标准模式.反转模式.无镜头.无标题的放大,并可以自定义jQZoom的窗口位置和渐隐效果,修正IE6的select ...

  4. Jquery图片放大镜效果

    介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图, 传统的另外打开一张大图的话,不大COOL,所以找到了这个插件, 插件下载地址: http ...

  5. 13款jQuery图片放大镜效果代码

    jQuery商城网站商品放大镜查看效果代码 jquery图片放大镜效果制作变焦镜头图片放大查看代码 jQuery鼠标滑过图片放大镜效果_淘宝图片放大镜代码 jquery jqzoom仿京东商城商品详细 ...

  6. 一款很棒的图片放大镜插件

    这是一款轻量级的图片放大镜特效,截图这个效果已经是放大了好多倍数了,大家指定这张图片多大尺寸吗,2800px * 1760px   确实不小哈,大家可以查看演示. 演示地址:jquery可自定义的图片 ...

  7. jquery 图片裁剪 java_[Java教程]5 款最新的 jQuery 图片裁剪插件

    [Java教程]5 款最新的 jQuery 图片裁剪插件 0 2015-05-18 16:00:20 这篇文章主要介绍最新的 5 款 jQuery 图片裁剪插件,可以帮助你轻松的实现你网站需要的图像裁 ...

  8. 十个jQuery图片画廊插件推荐

    2019独角兽企业重金招聘Python工程师标准>>> jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片.当幻灯片已经成为网站的重要组成部分,jQuer ...

  9. Cropper – 简单的 jQuery 图片裁剪插件

    Cropper 是一个简单的 jQuery 图像裁剪插件.它支持选项,方法,事件,触摸(移动),缩放,旋转.输出的裁剪数据基于原始图像大小,这样你就可以用它们来直接裁剪图像. 如果你尝试裁剪跨域图像, ...

最新文章

  1. Kubernetes入门——Kubernetes日志采集与监控告警
  2. 从三大顶会论文看百变Self-Attention
  3. 《剑指offer》-- 数组中的逆序对、最小的K个数、从1到n整数中1出现的次数、正则表达式匹配、数值的整数次方
  4. 在没有任何数据时进行无效的读取尝试。_技术转载——JVM运行时内存是怎么分布的?...
  5. 【译】为什么我更喜欢对象而不是switch语句
  6. 让ASP.NET Core支持GraphQL之-GraphQL的实现原理
  7. 前端技术周刊 2018-09-10:Redux Mobx
  8. 求解相机参数Camera Calibration
  9. [Node.js] mySQL数据库 -- 英雄管理系统(完善)
  10. RabbitMQ学习之集群消息可靠性测试
  11. 使用Power Designer(PD)创建数据库模型、数据库表
  12. IOS之UI--自定义按钮实现代理监听点击事件
  13. android 隐藏系统音量的接口_Android9.0 系统默认配置清单
  14. oracle设置自增字段,oracle序列
  15. 微信小程序发送模板消息限制的问题
  16. amaze ui教程
  17. 热电厂sis系统服务器升中标结果,电厂SIS系统简介
  18. redis的hset hget mset mget是什么
  19. AutoCAD CSCAD注册命令类型的控制
  20. Ceph学习——Librados与Osdc实现源码解析

热门文章

  1. 非谓语动词---不定式作名词
  2. HTTP协议实现文件下载
  3. 2021年北京高新技术企业认定补贴及政策要求
  4. python中的坐标轴的画法
  5. BT下载伤硬盘的解决办法
  6. 处理工具提示的TTN_NEEDTEXT通知
  7. 南卫理公会大学计算机科学,南卫理公会大学计算机科学与工程硕士.pdf
  8. 用python画漂亮的图案-用Python画一些漂亮图形--Quora代码赏析
  9. USB设备仿真框架设计指南——11.在托管代码中开发DSF应用程序
  10. 浏览器不能下载response输出的excel