前言：
现在同学们对“jqueryhref参数”可能比较着重，兄弟们都需要剖析一些“jqueryhref参数”的相关资讯。那么小编在网络上搜集了一些关于“jqueryhref参数””的相关文章，希望你们能喜欢，咱们一起来学习一下吧！背景
相比于小图，显然我们喜欢看大图。当我们点击页面中的小图片时，总希望达到这样一个效果：在页面中间展示放大后的高清图片。
效果
视频加载中...
代码
使用的是开源免费的zoomify.min.js插件
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>放大镜</title><link rel="stylesheet" href="../css/zoomify/bootstrap-grid.min.css"><link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"><link rel="stylesheet" href="../css/zoomify/zoomify.min.css"><link rel="stylesheet" href="../css/zoomify/style.css"></head><body><div class="container"><div class="examples"><div class="row"><div class="example col-md-12 col-xs-12 "><p><img src="../images/zoomify/zoomify-01.jpg" class="img-rounded" alt=""></p></div></div><div class="row"><div class="example col-xs-6 col-md-6"><p><img src="../images/zoomify/zoomify-02.jpg" style="height: 160px" class="img-rounded" alt=""></p></div><div class="example col-xs-6 col-md-6"><p><img src="../images/zoomify/zoomify-03.jpg" style="height: 160px" class="img-rounded" alt=""></p></div></div><div class="row"><div class="example col-xs-3 col-md-3"><p><img src="../images/zoomify/zoomify-04.jpg" style="width: 152px;height: 92px" class="img-rounded" alt=""></p></div><div class="example col-xs-3 col-md-3"><p><img src="../images/zoomify/zoomify-05.jpg" style="width: 152px;height: 92px" class="img-rounded" alt=""></p></div><div class="example col-xs-3 col-md-3"><p><img src="../images/zoomify/zoomify-06.jpg" style="width: 152px;height: 92px" class="img-rounded" alt=""></p></div><div class="example col-xs-3 col-md-3"><p><img src="../images/zoomify/zoomify-07.jpg" style="width: 152px;height: 92px" class="img-rounded" alt=""></p></div></div></div></div><script src="../js/jquery-3.2.1.min.js"></script><script src="../js/zoomify/zoomify.min.js"></script><script type="text/javascript">$('.example img').zoomify({duration:300, //动画过渡时间，单位mseasing:'linear' //其他值还有swing、easeIn、easeOut、easeInOut});</script></body></html>配置参数
参数
类型
默认值
描述
duration
integer
200
动画过渡持续时间，单位毫秒。
easing
string
"linear"
动画过渡的类型。
scale
float
0.9
设置图片相对于屏幕宽度和高度的比例（0-1）。
所有的参数也可以通过data属性来设置，例如data-duration=""。
方法
方法
描述
zoom
根据图片的状态开始放大或缩小图片。
zoomIn
放大图片
zoomOut
缩小图片
reposition
计算图片的正确位置并移动图片到页面可见区域的中间。
例如：
$('#myImage').zoomify('zoomIn');事件
事件
描述
zoom-in.zoomify
在放大过渡动画开始前触发。
zoom-in-complete.zoomify
在放大过渡动画结束后触发。
zoom-out.zoomify
在缩小过渡动画开始前触发。
zoom-out-complete.zoomify
在缩小过渡动画开始前触发。
例如：
$('#myImage').on('zoom-in.zoomify', function () {// do something...});你的赞和关注是对我最大的肯定，希望大家多多支持，谢谢大家。
版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jqueryhref参数 #jquerywidthios #jquery修改img标签的src属性 #jquery获取页面body高度 #jqueryalt
