私信发送成功
Watch Star Fork

一生中最爱 / miniViewJavaScript

小地图,缩略图。可缩放、拖拽
克隆/下载
一生中最爱 最后提交于 2017-10-13 15:25 Upload miniView.js
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
2017-03-02 20:43
2017-03-02 20:43
Loading...
README.md 1.59 KB

MiniView.js - An interesting web plugin !

I offer you a web plugin based on jquery that make a mini view of a container on your page. And support mousewheel zoom in.

support

  • ie9+
  • chrome
  • edge

Quickstart

Load up miniView.js (after jQuery):

<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="miniView.js"></script>

Then add a container with attribute id that much larger than the parent container

<div class="borderDiv" style="width: 800px; height: 600px; overflow: hidden; border: 1px solid;">
  <div class="mainContainer" id="view" style="width: 2000px; height: 1500px; background-color: #bad6cb"></div>
</div>

After the page is loaded, use init method to initialize the mini view. The method accept config that you can define the scale value, selector and parent scale value.

var miniMapObject = MiniMap.init({selector:"#view"});

Method

init

param: config. json format

key Behavior
selector Jquery selector with id attribute
zoom           Scale value of the mini map. default value 0.1
viewZoom Scale value of the container. default value 1
isEnableMouseWheel Whether enable mousewheel to zoom the container

refresh

param: config. just like init method.

Demo

image

项目点评 ( 9 )

你可以在登录后,对此项目发表评论

4_float_left_people 4_float_left_close