18 Star 68 Fork 11

一生中最爱 / miniView

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
demo.html 8.80 KB
一键复制 编辑 原始数据 按行查看 历史
一生中最爱 提交于 2017-03-02 20:43 . embryo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="./miniView.css" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="./jquery.mousewheel.js"></script>
<script src="./miniView.js"></script>
<style type="text/css">
.borderDiv {
width: 800px;
height: 600px;
border: 1px solid;
overflow: hidden;
left: 100px;
top: 20px;
position: relative;
}
.mainContainer {
width: 2000px;
height: 1500px;
background-color: #bad6cb;
position: relative;
}
#view {
left: -400px;
top: -300px;
}
</style>
<script>
$(function() {
var miniViewObj = MiniView.init({selector: "#view"});
})
</script>
</head>
<body>
<a target="_blank" href="https://github.com/zhdonghd/miniView" style="margin-left: 50px; font-weight: bold; font-size: 18px;">Click here for detail.</a>
<div class="borderDiv">
<div class="mainContainer" id="view">
<div style="position: absolute; opacity: 1; left: 387px; top: 787px; z-index: 15;" id="jsPlumb_3_22">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="100">
<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 0 L 100 50 L 50 100 L 0 50 Z" class="outer"></path>
<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 10 L 90 50 L 50 90 L 10 50 Z" class="inner"></path>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 75px; top: 1032px; z-index: 14;" id="jsPlumb_3_21">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 419px; top: 1339px; z-index: 13;" id="jsPlumb_3_20">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 751px; top: 891px; z-index: 12;" id="jsPlumb_3_19">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 1106px; top: 1134px; z-index: 11;" id="jsPlumb_3_18">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 1579px; top: 1272px; z-index: 10;" id="jsPlumb_3_17">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 1563px; top: 846px; z-index: 9;" id="jsPlumb_3_16">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 1759px; top: 565px; z-index: 8;" id="jsPlumb_3_15">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 1657px; top: 95px; z-index: 7;" id="jsPlumb_3_14">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="100">
<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 0 L 100 50 L 50 100 L 0 50 Z" class="outer"></path>
<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 10 L 90 50 L 50 90 L 10 50 Z" class="inner"></path>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 1012px; top: 94px; z-index: 6;" id="jsPlumb_3_13">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="100">
<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 0 L 100 50 L 50 100 L 0 50 Z" class="outer"></path>
<path version="1.1" xmlns="http://www.w3.org/1999/xhtml" d="M 50 10 L 90 50 L 50 90 L 10 50 Z" class="inner"></path>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 132px; top: 418px; z-index: 5;" id="jsPlumb_3_12">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 80px; top: 75px; z-index: 4;" id="jsPlumb_3_11">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 1223px; top: 439px; z-index: 3;" id="jsPlumb_3_10">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 854px; top: 664px; z-index: 2;" id="jsPlumb_3_9">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div><div style="position: absolute; opacity: 1; left: 685px; top: 375px; z-index: 1;" id="jsPlumb_3_8">
<div style="position:relative">
<svg version="1.1" xmlns="http://www.w3.org/1999/xhtml" width="100" height="60">
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="0" y="0" width="100" height="60" class="outer drag-start"></rect>
<rect version="1.1" xmlns="http://www.w3.org/1999/xhtml" x="10" y="10" width="80" height="40" class="inner"></rect>
</svg>
</div>
</div>
</div>
</div>
</body>
</html>
JavaScript
1
https://gitee.com/dong_admin/miniView.git
git@gitee.com:dong_admin/miniView.git
dong_admin
miniView
miniView
master

搜索帮助