星空网 > 软件开发 > Java

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

今天给大家分享一款基于Query页面窗口拖动预览效果。这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效。这款实例适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。

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

在线预览   源码下载

实现的代码。

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='/images/loading.gif' data-original="img/123szf.jpg"  /></p>  <p>    <img src='/images/loading.gif' data-original="img/asd123.jpg"  /></p>  <p>    &lt;link rel=&quot;stylesheet&quot; href=&quot;minimap.min.css&quot; /&gt;<br>    &lt;script src='/images/loading.gif' data-original=&quot;jquery.js&quot;&gt;&lt;/script&gt;<br>    &lt;script src='/images/loading.gif' data-original=&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




原标题:基于jQuery页面窗口拖动预览效果

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

激烈竞争大环境下:跨境电商中小企业如何野蛮生长?:https://www.ikjzd.com/articles/21523
亚马逊的关键词限制:listing被移除了怎么办?:https://www.ikjzd.com/articles/21525
夏天马上到了,夏季店铺选品如何进行?:https://www.ikjzd.com/articles/21527
从亚马逊新手走向大卖的这10步你做好了吗?:https://www.ikjzd.com/articles/21528
提升Facebook贴文互动率的5大方法:https://www.ikjzd.com/articles/21529
竞争态势日趋严峻,Lazada发布新战略竞逐东南亚:https://www.ikjzd.com/articles/21531
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流