今天给大家分享一款基于Query页面窗口拖动预览效果。这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效。这款实例适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。
实现的代码。
html代码：
<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="img/123szf.jpg" alt="" /></p> <p> <img src="img/asd123.jpg" alt="" /></p> <p> <link rel="stylesheet" href="minimap.min.css" /><br> <script src="jquery.js"></script><br> <script src="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>
js代码：
$(document).ready(function () { var previewBody = $('body').minimap({ heightRatio: 0.6, widthRatio: 0.1, offsetHeightRatio: 0.035, offsetWidthRatio: 0.065, position: "right", touch: true, smoothScroll: true, smoothScrollDelay: 200, onPreviewChange: function () { } }); });