jquery.minimap实现网页滚动小地图缩略图页面导航效果代码

代码语言:html

所属分类:加载滚动

代码描述:jquery.minimap实现网页滚动小地图缩略图页面导航效果代码

代码标签: jquery.minimap 网页 滚动 地图 缩略图 页面 导航

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/minimap.css">
<style>
    body{
        background: white;
        font-size: 12px;
    }
</style>
</head>

<body>

    <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>&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:.6)<br>widthRatio</p>
    <p>width ratio of the view port. ratio can be in the range [0.0,0.5).(default:.05)<br>offsetHeightRatio</p>
    <p>Margin top ratio of the view port. ratio can be in the range(0.0,0.9].(default:.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:.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).........完整代码请登录后点击上方下载按钮下载查看

网友评论0