Jquery放大镜插件---imgzoom.js(原创)
Jquery放大镜插件imgzoom能够实现图片放大的功能，便于与原图进行比较。
使用方法：
1.引入jQuery与imgzoom,imgzoom.css
<link rel="stylesheet" href="css/jquery.imgzoom.css" />
<script type="text/javascript" src="src/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="dist/bundle.js" ></script>
2.插件调用
$(".main").imgzoom({position:"inner"});
参数说明：
1. position：放大图片显示的位置，包括‘inner’,'top','left','right','bottom'。
2. boxWidth：图片锁定区域框的宽度。
3. boxHeight：图片锁定区域框的高度。
4. borderRadius：图片锁定区域框的圆角弧度
5. left:当图片位置不为inner时候，left有效
6. top:当图片位置不为inner的时候，left有效
具体使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery放大镜插件imgzoom.js</title>
<meta name="description" content="jQuery放大镜插件imgzoom.js">
<meta name="keywords" content="放大镜,图片放大,jquery插件,imgzoom.js">
<link rel="stylesheet" href="css/jquery.imgzoom.css" />
<script type="text/javascript" src="src/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="dist/bundle.js" ></script>
<style>
.main {
width: 500px;
height: 570px;
border: 2px solid black;
position: relative;
/*overflow: hidden;*/
}
</style>
</head>
<body>
<div class="main">
<img id="img1" src="img/zoom.jpg" style="width: 100%;height: 100%;"/> </div>
<script>
$(".main").imgzoom({position:"inner"});
</script>
</body>
</html>
效果图
Jquery放大镜插件---imgzoom.js(原创)的更多相关文章
- 分享JQuery动画插件Velocity.js的六种列表加载特效
分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览 源码下载 实现 ...
- 基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
- [原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js
拖拖拉拉准本了一个月,终于把网站做好了.也终于可以分享这两个插件了.这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件) ...
- jquery放大镜插件与样式
这是放大镜插件链接,我已经上传到我博客http://files.cnblogs.com/valiant1882331/%E6%94%BE%E5%A4%A7%E9%95%9C%E6%8F%92%E4%B ...
- jQuery放大镜插件jqzoom使用
源码下载,使用指导地址:http://www.mind-projects.it/projects/jqzoom/ 使用教程: 1.导入库文件 <script src="../js/jq ...
- jQuery放大镜插件
(function($) { $.fn.magnifier = function(options){ var options = $.extend({ bigWidth: 400, //大图高度 bi ...
- JQuery动画插件Velocity.js发布：更快的动画切换速度
5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...
- 自己写的jQuery放大镜插件效果(一)(采用一张大图和一张小图片的思路)
这个思路的方法会带来一个小问题,就是当鼠标放到小图上去时,会开始加载大图片,网速不佳的时候,会出现加载慢的情况.但是放大的效果和你所给出的大图片的清晰度是一样的. 先看效果图: html代码: < ...
- jquery——滚动条插件jscroll.js
一.效果如下 点击“测试中奖纪录”弹出弹框.弹框中内容超出时显示滚动条. 二.代码部分 1.html结构 <body> <a href="javascript:;" ...
随机推荐
- QTREE系列题目总结
$QTREE$ 就是一套树上数据结构练习题. 这套题貌似来源于 $SPOJ$,我是在 $luogu$ 看到的. $QTREE1$ 题意 一棵 $n$ 个点的带边权树,要求支持 单边改权值 和 询问路径 ...
- [转] Makefile 基础 (4) —— Makefile 书写命令
该篇文章为转载,是对原作者系列文章的总汇加上标注. 支持原创,请移步陈浩大神博客:(最原始版本) http://blog.csdn.net/haoel/article/details/2886 我转自 ...
- bzoj 1038 瞭望塔 半平面交+分段函数
题目大意 给你一座山,山的形状在二维平面上为折线 给出\((x_1,y_1),(x_2,y_2)...(x_n,y_n)\)表示山的边界点或转折点 现在要在\([x_1,x_n]\)(闭区间)中选择一 ...
- 我要好offer之 概率题大总结
1. 利用等概率Rand5生成等概率Rand3 Rand5生成等概率Rand3 这个题目可以扩展为:利用等概率RandM生成等概率RandN (M > N) 这里,我们首先明白一个简单的知识点: ...
- TStringList的Find，IndexOf和Sort
procedure TForm1.Button1Click(Sender: TObject); var MyList: TStringList; begin MyList := TStringList ...
- 彻底删除node_modules文件
npm install rimraf -g rimraf node_modules
- MongoDB管理与监控
https://blog.csdn.net/Chen_Victor/article/details/74855050 https://www.cnblogs.com/zhangyinguang/p/5 ...
- AC日记——花店橱窗布置 codevs 1028
题目描述 Description 假设以最美观的方式布置花店的橱窗,有F束花,V个花瓶,我们用美学值(一个整数)表示每束花放入每个花瓶所产生的美学效果.为了取得最佳的美学效果,必须使花的摆放取得最大的 ...
- 洛谷—— P1342 请柬
https://www.luogu.org/problemnew/show/1342 题目描述 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣传剧院,尤 ...
- codeforces A. In Search of an Easy Problem
A. In Search of an Easy Problem time limit per test 1 second memory limit per test 256 megabytes inp ...