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><link rel="stylesheet"href="minimap.min.css"/><br><script src="jquery.js"></script><br><script src="minimap.min.js"></script><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