基于jQuery页面窗口拖动预览效果

今天给大家分享一款基于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 () { }
});

});

via：http://www.w2bc.com/Article/26978