帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery图像缩放插件 可拖拽、触摸、标记缩放位置

帝国模板之家 2020-12-05 网页特效 评论

插件介绍

这是一款简单的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
});
只想记住美好的事物,而忘记不幸的事物,其实是种贪婪,这样反而会很难放空自己的思想。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言