jQuery鹰眼视图minimap.js
minimap.js插件，基于jQuery1.11.1版本， 1、将head中的css样式引入到你的网页中 2、将body中的两个js引入到你的页面底部即可
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery窗口缩小总览地图定位插件效果--minimap.js</title>
<style>
.minimap {
z-index : 10000;
position : fixed;
cursor: pointer;
}
.miniregion {
z-index : 10001;
position : fixed;
background : transparent;
border: 2px solid silver;
border-radius: 5%;
cursor: pointer;
}
.miniregion:hover {
box-shadow: 0 0 0.4em darkgrey;
}
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body>
<p>minimap - A jQuery Plugin<br>
A preview of full webpage or its DOM element with flexible positioning and navigation support</p>
<p>Demo Page</p>
<p>Getting Started</p>
<p>Download the latest code</p>
<p>Fork this repository or download js/css files from dist directory.</p>
<p>Including it on your page</p>
<p><img src="https://www.jq22.com/img/cs/300x500-1.png"alt=""/></p>
<p><img src="https://www.jq22.com/img/cs/500x300-1.png"alt=""/></p>
<p><link rel="stylesheet" href="https://www.jq22.com/demo/jQueryminimap202305150935/minimap.min.css" /><br>
<script src="https://www.jq22.com/demo/jQueryminimap202305150935/jquery.js"></script><br>
<script src="https://www.jq22.com/demo/jQueryminimap202305150935/minimap.min.js"></script><br>
Basic Usage</p>
<p>//Desired dom element<br>
var previewBody = $('body').minimap();<br>
Properties</p>
<p>heightRatio</p>
<p>height ratio of the view port. ratio can be in the range [0.0, 1.0). (default: 0.6)<br>
widthRatio</p>
<p>width ratio of the view port. ratio can be in the range [0.0, 0.5). (default: 0.05)<br>
offsetHeightRatio</p>
<p>Margin top ratio of the view port. ratio can be in the range (0.0, 0.9]. (default: 0.035)<br>
offsetWidthRatio</p>
<p>Margin left or right(based on position property) ratio of the view port. ratio can be in the range (0.0, 0.9]. (default: 0.035)<br>
position</p>
<p>position of the minimap. Supported positions are:<br>
'right' (default)<br>
'left'<br>
touch</p>
<p>touch support. (default: true)<br>
smoothScroll</p>
<p>linear animation support for scrolling. (dafault: true)<br>
smoothScrollDelay</p>
<p>Smooth scroll delay in milliseconds. (default: 200ms)<br>
Setters</p>
<p>function setPosition(position)</p>
<p>Set position property. position can be either 'left' or 'right'<br>
function setHeightRatio(ratio)</p>
<p>Set heightRatio property.<br>
function setWidthRatio(ratio)</p>
<p>Set widthRatio property.<br>
function setOffsetHeightRatio(ratio)</p>
<p>Set offsetHeightRatio property.<br>
function setOffsetWidthRatio(ratio)</p>
<p>Set offsetWidthRatio property.<br>
function setSmoothScroll(smooth)</p>
<p>Set smoothScroll property<br>
function setSmoothScrollDelay(duration)</p>
<p>Set setSmoothScrollDelay property.<br>
Callback</p>
<p>function onPreviewChange()</p>
<p>onPreviewChange callback will be triggered for the below cases:<br>
View port is resized.<br>
Calling setter functions.<br>
Other functions</p>
<p>function show()</p>
<p>Show preview<br>
function hide()</p>
<p>Hide preview<br>
function toggle()</p>
<p>Toggle Preview<br>
Default Settings</p>
<p>Mini-map with default values</p>
<p>var previewBody = $('body').minimap(<br>
heightRatio : 0.6,<br>
widthRatio : 0.05,<br>
offsetHeightRatio : 0.035,<br>
offsetWidthRatio : 0.035,<br>
position : "right",<br>
touch: true,<br>
smoothScroll: true,<br>
smoothScrollDelay: 200,<br>
onPreviewChange: function() {}<br>
});<br>
CSS classes</p>
<p>Use the below css classes for customization</p>
<p>.minimap - Mini-map area</p>
<p>.miniregion - Mini-map view area<br>
Caveats</p>
<p>Browser's find gives result in both the page & its preview<br>
Async updates to the dom elements after minimap was created may not reflect in the preview.</p>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/demo/jQueryminimap202305150935/js/minimap.js"></script>
<script>
$(function(){
var previewBody = $('body').minimap({
heightRatio : 0.5,
widthRatio : 0.3,
offsetHeightRatio : 0.035,
offsetWidthRatio : 0.065,
position : "right",
touch: true,
smoothScroll: true,
smoothScrollDelay: 200,
onPreviewChange: function() {}
});
});
</script>
<!--代码部分end-->
</body>
</html>
页:
[1]