jQuery页面窗口拖动预览效果特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery页面窗口拖动预览效果特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery页面窗口拖动预览效果</title>
<link rel="stylesheet" href="css/minimap.css" />
<script src="js/jquery.min.js"></script>
<script src="js/minimap.js"></script>

<script type="text/javascript">
$(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() {}
	});
	
 
});
</script>

</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><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>
</body>
</html>

JS代码(minimap.js):

/*! The MIT License (MIT)Copyright (c) 2014 Prince John Wesley <princejohnwesley@gmail.com>Permission is hereby granted,free of charge,to any person obtaining a copyof this software and associated documentation files (the "Software"),to dealin the Software without restriction,including without limitation the rightsto use,copy,modify,merge,publish,distribute,sublicense,and/or sellcopies of the Software,and to permit persons to whom the Software isfurnished to do so,subject to the following conditions:The above copyright notice and this permission notice shall be included in allcopies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS ORIMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHERLIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THESOFTWARE.**/
(function($,undefined){
	"use strict";
	$.fn.minimap = function(options){
	var minimap = this;
	var $window = $(window);
	var fn = function(){
}
;
	var shown = true;
	var defaults ={
	heightRatio:0.6,widthRatio:0.05,offsetHeightRatio:0.035,offsetWidthRatio:0.035,position:"right",touch:true,smoothScroll:true,smoothScrollDelay:200,onPreviewChange:fn}
;
	var settings = $.extend({
}
,defaults,options);
	var position = ["right","left"];
	var validateProps = function(prop,value){
	switch(prop){
	case 'heightRatio':var heightRatio = value;
	if(!$.isNumeric(heightRatio) || heightRatio <= 0.0 || heightRatio > 1.0) throw "Invalid heightRatio:" + heightRatio;
	break;
	case 'widthRatio':var widthRatio = value;
	if(!$.isNumeric(widthRatio) || widthRatio <= 0.0 || widthRatio > 0.5) throw "Invalid widthRatio:" + widthRatio;
	break;
	case 'offsetHeightRatio':var offsetHeightRatio = value;
	if(!$.isNumeric(offsetHeightRatio) || offsetHeightRatio < 0.0 || offsetHeightRatio > 0.9) throw "Invalid offsetHeightRatio:" + offsetHeightRatio;
	break;
	case 'offsetWidthRatio':var offsetWidthRatio = value;
	if(!$.isNumeric(offsetWidthRatio) || offsetWidthRatio < 0.0 || offsetWidthRatio > 0.9) throw "Invalid offsetWidthRatio:" + offsetWidthRatio;
	break;
	case 'position':var p = value.toLowerCase();
	var pos = position.indexOf(p);
	if(pos === -1) throw "Invalid position:" + settings.position;
	settings.position = p;
	break;
	case 'smoothScrollDelay':var smoothScrollDelay = value;
	if(((smoothScrollDelay | 0 ) !== smoothScrollDelay) || smoothScrollDelay < 4) throw "Invalid smoothScrollDelay(in ms):" + smoothScrollDelay;
	break;
	case 'touch':case 'smoothScroll':break;
	case 'onPreviewChange':var fn = value;
	if(!fn || !$.isFunction(fn)) throw "Invalid onPreviewChange:" + value;
	break;
	default:throw "Invalid validation property:" + prop;
}
}
;
	//validate inputs for(var prop in settings) validateProps(prop,settings[prop]);
	var miniElement = minimap.clone();
	miniElement.find('.minimap.noselect').remove();
	miniElement.find('.miniregion').remove();
	miniElement.addClass('minimap noselect');
	// remove events & customized cursors miniElement.children().each(function(){
	$(this).css({
	'pointer-events':'none'}
);
}
);
	var region = $('<div class="miniregion"> </div>');
	$($('body')[0]).append(region);
	$($('body')[0]).append(miniElement);
	var scale = function(){
	return{
	x:($window.width() / minimap.width()) * settings.widthRatio,y:($window.height() / minimap.height()) * settings.heightRatio}
;
}
;
	var onResizeHandler = function(e){
	if(!shown) return;
	var s = scale();
	var sc = 'scale(' + s.x + ','+ s.y + ')';
	var offsetTop = $window.height() * settings.offsetHeightRatio;
	var offsetLeftRight = $window.width() * settings.offsetWidthRatio;
	var top = minimap.height() * (s.y - 1) / 2 + offsetTop;
	var leftRight = minimap.width() * (s.x - 1) / 2 + offsetLeftRight;
	var width = $window.width() * (1/s.x) * settings.widthRatio;
	var height = $window.height() * (1/s.y) * settings.heightRatio;
	var css ={
	'-webkit-transform':sc,'-moz-transform':sc,'-ms-transform':sc,'-o-transform':sc,'transform':sc,'top':top,'width':width,'height':height,'margin':'0px','padding':'0px'}
;
	css[settings.position] = leftRight;
	miniElement.css(css);
	var regionTop = minimap.offset().top * s.y;
	var cssRegion ={
	width:miniElement.width() * s.x,height:$window.height() * s.y,margin:'0px',top:$window.scrollTop() * s.y + offsetTop - regionTop + 'px'}
;
	cssRegion[settings.position] = offsetLeftRight + 'px';
	region.css(cssRegion);
	settings.onPreviewChange();
}
;
	var onScrollHandler = function(e){
	if(!shown) return;
	var s = scale();
	var offsetTop = $window.height() * settings.offsetHeightRatio;
	var top = minimap.offset().top * s.y;
	var pos = ($window.scrollTop()) * s.y;
	var regionHeight = region.outerHeight(true);
	var bottom = minimap.outerHeight(true) * s.y + top;
	// - regionHeight;
	if(pos + regionHeight + offsetTop < top || pos > bottom){
	region.css({
	display:'none',}
);
}
else{
	region.css({
	top:pos + offsetTop - top + 'px',display:'block'}
);
}
}
;
	var scrollTop = function(e){
	if(!shown) return;
	var s = scale();
	var offsetTop = $window.height() * settings.offsetHeightRatio;
	var top = minimap.offset().top * s.y;
	var target = (e.clientY - offsetTop + top) / s.y;
	if(e.type === 'click' && settings.smoothScroll){
	var current = $window.scrollTop();
	var maxTarget = minimap.outerHeight(true);
	target = Math.max(target,Math.min(target,maxTarget));
	var direction = target > current;
	var delay = settings.smoothScrollDelay;
	var distance = Math.abs(current - target);
	var r = delay / distance;
	var unitScroll = 1;
	var unitDelay = 4;
	if(r >= 4){
	unitDelay = parseInt(unitScroll);
}
else if(r >= 1){
	unitScroll = parseInt(r) * 4;
}
else{
	unitScroll = (4 / r);
}
var next = current;
	var count = parseInt(distance / unitScroll);
	onSmoothScroll = true;
	// linear translate var smoothScroll = function(){
	next = next + (direction ? unitScroll:-unitScroll);
	if(--count <= 0){
	clearInterval(timer);
	onSmoothScroll = false;
	next = target;
}
$window.scrollTop(next);
}
;
	var timer = window.setInterval(smoothScroll,unitDelay);
}
else{
	$window.scrollTop(target);
}
e.stopPropagation();
}
;
	var mousedown = false;
	var onSmoothScroll = false;
	var onMouseupHandler = function(e){
	mousedown = false;
}
;
	var onMousemoveHandler = function(e){
	if(!mousedown || onSmoothScroll) return;
	scrollTop(e);
}
;
	var onClickHandler = function(e){
	scrollTop(e);
	mousedown= false;
}
;
	var onMousedownHandler = function(e){
	mousedown = true;
}
;
	onResizeHandler();
	$window.on('resize',onResizeHandler);
	$window.on('scroll',onScrollHandler);
	$(region).on('mousedown',onMousedownHandler);
	$(region).on('mouseup',onMouseupHandler);
	$(region).on('mousemove',onMousemoveHandler);
	$(region).on('click',onClickHandler);
	$(miniElement).on('mousedown',onMousedownHandler);
	$(miniElement).on('mouseup',onMouseupHandler);
	$(miniElement).on('mousemove',onMousemoveHandler);
	$(miniElement).on('click',onClickHandler);
	var lastTouchType = '';
	var touchHandler = function(e){
	var touches = e.changedTouches;
	// Ignore multi-touch if (touches.length > 1) return;
	var touch = touches[0];
	var events = ["touchstart","touchmove","touchend"];
	var mouseEvents = ["mousedown","mousemove","mouseup"];
	var ev = events.indexOf(e.type);
	if (ev === -1) return;
	var type = mouseEvents[ev];
	if (e.type === events[2] && lastTouchType === events[0]){
	type = "click";
}
var simulatedEvent = document.createEvent("MouseEvent");
	simulatedEvent.initMouseEvent(type,true,true,window,1,touch.screenX,touch.screenY,touch.clientX,touch.clientY,false,false,false,false,0,null);
	touch.target.dispatchEvent(simulatedEvent);
	e.preventDefault();
	lastTouchType = e.type;
}
;
	if (settings.touch){
	document.addEventListener("touchstart",touchHandler,true);
	document.addEventListener("touchmove",touchHandler,true);
	document.addEventListener("touchend",touchHandler,true);
	document.addEventListener("touchcancel",touchHandler,true);
}
var setPosition = function(pos){
	var oldValue = settings.position;
	validateProps('position',pos);
	if(oldValue !== settings.position){
	var css ={
}
;
	css[oldValue] = '';
	onResizeHandler();
	region.css(css);
	miniElement.css(css);
}
}
;
	var setProperty = function(propName,redraw){
	return function(value){
	validateProps(propName,value);
	settings[propName] = value;
	if(redraw) onResizeHandler();
}
;
}
;
	var show = function(){
	if(shown) return;
	miniElement.show();
	region.show();
	shown = true;
	onResizeHandler();
}
;
	var hide = function(){
	if(!shown) return;
	miniElement.hide();
	region.hide();
	shown = false;
}
;
	var toggle = function(){
	miniElement.toggle();
	region.toggle();
	shown = !shown;
	if(shown) onResizeHandler();
}
;
	return $.extend({
}
,this,{
	"setPosition":setPosition,"setHeightRatio":setProperty('heightRatio',true),"setWidthRatio":setProperty('widthRatio',true),"setOffsetHeightRatio":setProperty('offsetHeightRatio',true),"setOffsetWidthRatio":setProperty('offsetWidthRatio',true),"setSmoothScroll":setProperty('smoothScroll'),"setSmoothScrollDelay":setProperty('smoothScrollDelay'),"show":show,"hide":hide,"toggle":toggle}
);
}
;
}
(jQuery));

CSS代码(minimap.css):

/*! The MIT License (MIT)Copyright (c) 2014 Prince John Wesley <princejohnwesley@gmail.com>Permission is hereby granted,free of charge,to any person obtaining a copyof this software and associated documentation files (the "Software"),to dealin the Software without restriction,including without limitation the rightsto use,copy,modify,merge,publish,distribute,sublicense,and/or sellcopies of the Software,and to permit persons to whom the Software isfurnished to do so,subject to the following conditions:The above copyright notice and this permission notice shall be included in allcopies or substantial portions of the Software.THE SOFTWARE IS PROVIDED "AS IS",WITHOUT WARRANTY OF ANY KIND,EXPRESS ORIMPLIED,INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THEAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,DAMAGES OR OTHERLIABILITY,WHETHER IN AN ACTION OF CONTRACT,TORT OR OTHERWISE,ARISING FROM,OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THESOFTWARE.**/
.minimap{z-index:10000;position:fixed;cursor:pointer;}
.miniregion{z-index:10001;position:fixed;background:transparent;border:2px solid silver;border-radius:10%;cursor:pointer;}
.miniregion:hover{box-shadow:0 0 0.4em darkgrey;}
.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

附件:下载该文件资源,减少时间成本(增值服务)