基于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>
        &lt;link rel=&quot;stylesheet&quot; href=&quot;minimap.min.css&quot; /&gt;<br>
        &lt;script src=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br>
        &lt;script src=&quot;minimap.min.js&quot;&gt;&lt;/script&gt;<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 : &quot;right&quot;,<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 &amp; 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