html5模擬頁面窗口顯示拖動窗口預覽效果



86 342 115



特效描述:html5 模擬頁面窗口 拖動窗口預覽,窗口預覽,窗口顯示

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/minimap.css" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/minimap.js"></script>

3. 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>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 拖動 拖拽 拖動插件 拖拽插件 滑動星星打分 其他 預覽 圖片拖動 圖片拖拽
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子