网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款简单的jQuery图像缩放插件,可以使用鼠标滚轮和触摸手势放大/缩小图像,还能拖拽图片。并且可以根据需要在图像上标记缩放位置。
1. 在web页面中加载jquery库和缩放插件文件。
<script src="jquery.min.js"></script>
<script src="hammer.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="js/zoom-marker.js"></script>
2. 创建html代码
<div id="picview" class="picview">
<img src="image-to-zoom.jpg" name="viewArea" id="viewArea" draggable="false">
</div>
3.在页面中加载插件样式文件。
<link rel="stylesheet" href="css/zoom-marker.css">
4. 初始化插件,在图片中标记缩放位置。
$(document).ready(function () {
$('#viewArea').zoomMarker({
src: "image-to-zoom.jpg",
rate: 0.2, // from 0 to 1
markers:[
{src:"marker.png", x:500, y:500},
{src:"marker.png", x:200, y:200},
{src:"marker.png", x:1280, y:720, size:20},
]
});
})
5. 插件默认选项
{
// mouse scroll speed
rate: 0.2,
// path to image
src: null,
// width
width: 500,
// min width
min: 300,
// max width
max: null,
// predefined markers
// {src:"marker.png", x:100, y:100, size:20, click:fn()}
markers: [],
// marker size
marker_size: 20,
// enable draggable
enable_drag: true,
// auto index
auto_index_z: true,
// enable cancas layer
enable_canvas: false,
// lock zoom
zoom_lock: false
}
6. API 方法.
// load an image to the document
$('#viewArea').zoomMarker_LoadImage("img/rail.jpg");
// zoom an image
$('#viewArea').zoomMarker_Zoom(center, scale);
// get image size
$('#viewArea').zoomMarker_GetPicSize();
// enable draggable
$('#viewArea').zoomMarker_EnableDrag(enable);
// make the marker always in front of elements
$('#viewArea').zoomMarker_TopIndexZ();
// reset image
$('#viewArea').zoomMarker_ResetImage()
// get canvas
$('#viewArea').zoomMarker_Canvas();
// clear canvas
$('#viewArea').zoomMarker_CanvasClean();
// move marker
$('#viewArea').zoomMarker_Move(x, y);
// clear marker
$('#viewArea').zoomMarker_CleanMarker();
// remove marker
$('#viewArea').RemoveMarker(markerID);
// add custom image markers
$('#viewArea').zoomMarker_AddMarker({
src:"img/marker.png",
x:320,
y:180,
size:20,
hint: {
value: '',
style: {}
}
dialog: {
value: '',
style: {},
offsetX: 0,
offsetY: 0
}
click:function(e){
alert(e);
}
});
7. 事件处理方法.
$('#viewArea').on("zoom_marker_img_load", function(event, src){
// when the image stars loading
});
$('#viewArea').on("zoom_marker_img_loaded", function(event, size){
// after the image has been loaded
});
$('#viewArea').on("zoom_marker_click", function(event, markerObj){
// when a marker is clicked
});
$('#viewArea').on("zoom_marker_mouse_click", function(event, mouseObj){
// when the image is clicked
});
$('#viewArea').on("zoom_marker_move_end", function(event, x, y, markerObj){
// when move end
});
转载请注明来源:jQuery图像缩放插件 可拖拽、触摸、标记缩放位置
本文永久链接地址:https://www.moyouyouw.cn/code/870.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论