基于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