<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>jQuery slider</title>
<style>
#viewport1 {
position: relative;
margin: 50px auto;
width: 800px;
height: 450px;
background: black;
color: white;
cursor: e-resize;
overflow: hidden;
}
#mouseSwipe1 {
user-select: none;
position: absolute;
margin: 0px;
width: 100%;
height: 100%;
}
#scroll {
padding:10px;
margin: 0px;
width: 2048px;
font-size: 24px;
text-align: justify;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
</head>
<body translate="no">
<!-- add as many elements as you like inside mouseSwipe1 div -->
<div id="viewport1" onselectstart="return false;">
<div id="mouseSwipe1">
<div id="scroll">
<p>Text, tables, images, whatever, consectetur adipiscing elit. In maximus sagittis risus quis sodales. Quisque porttitor, risus ultricies dapibus feugiat, quam erat tristique ipsum, at dapibus dolor nisi eu dolor. Duis pharetra eu dui at ornare. Quisque sollicitudin, dui nec pellentesque scelerisque, libero massa pellentesque nunc, non condimentum neque eros ut risus. Morbi rutrum rutrum viverra. Fusce quis lacinia orci. Cras id arcu a quam lacinia finibus. Aliquam at lacus auctor, hendrerit arcu ut, accumsan est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus sagittis risus quis sodales. Quisque porttitor, risus ultricies dapibus feugiat, quam erat tristique ipsum, at dapibus dolor nisi eu dolor. Duis pharetra eu dui at ornare. Quisque sollicitudin, dui nec pellentesque scelerisque, libero massa pellentesque nunc, non condimentum neque eros ut risus. Morbi rutrum rutrum viverra. Fusce quis lacinia orci. Cras id arcu a quam lacinia finibus. Aliquam at lacus auctor, hendrerit arcu ut, accumsan est.</p>
</div>
</div>
</div>
<!-- Save JS plugin code as jquery.mouseSwipe.js -->
<!-- place above </body> closing tag so content is loaded first in order to get the content elements widths (line 19 in JS)-->
<!-- <script src="jquery.mouseSwipe.js" type="text/javascript" defer></script> -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script id="rendered-js" >
(function ($) {// jQuery Plugin copyright 2012 Robert W. Stewart - robbiestewart.ca
$.fn.mouseSwipe = function (options) {
return this.each(function () {
defaults = { DECAY: 0.9, MOUSEDOWN_DECAY: 0.5, SPEED_SPRING: 0.5, BOUNCE_SPRING: 0.08, HORIZ: true };
var o = $.extend(defaults, options),plugin = $(this);
plugin.init = function () {
var velocity = 0,bouncing = 0,topLeft,XY,lastXY,totalWidth = 0,totalHeight = 0;
var edge,sliderLen,mouseDown = false,hasTouch = false,VIEWPORT,startAnimFrame = false;
var vw = parseInt(plugin.parents('div').width(), 10); //viewport width.
var vh = parseInt(plugin.parents('div').height(), 10); //viewport height.
hasTouch = 'ontouchstart' in window; //note: event.preventDefault() use your own routine if required.
plugin.on('mousedown touchstart mousemove touchmove', function (event) {event.preventDefault();});
plugin.on('mousedown touchstart', function (event) {touchStart(event);});
plugin.on('mousemove touchmove', function (event) {touchMove(event);});
plugin.on('mouseup touchend', function (event) {touchEnd(event);});
/*save plugin code as jquery.mouseSwipe.js place at the bottom of html page to get the content width/height below (otherwise content width will be zero)! */
plugin.children().each(function () {totalWidth = totalWidth + $(this).innerWidth();totalHeight = totalHeight + $(this).innerHeight();});
if (o.HORIZ == true) {
VIEWPORT = vw;edge = 'left';plugin.css('width', totalWidth);sliderLen = totalWidth;
} else {
VIEWPORT = vh;edge = 'top';plugin.css('height', totalHeight);sliderLen = totalHeight;
}
plugin.css(edge, 0);
var mouseswipe = function (sliderLT) {
if (mouseDown) {velocity *= o.MOUSEDOWN_DECAY;} else {velocity *= o.DECAY;}
if (!mouseDown) {
if (sliderLT > 0) {
bouncing = -sliderLT * o.BOUNCE_SPRING;
} else if (sliderLT + sliderLen < VIEWPORT) {
bouncing = (VIEWPORT - sliderLen - sliderLT) * o.BOUNCE_SPRING;
} else {bouncing = 0;}
var vb = lastXY - XY < 0 ? Math.ceil(velocity + bouncing) : Math.floor(velocity + bouncing);
plugin.css(edge, sliderLT + vb);
}};
window.requestAnimFrame = function () {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function (callback) {window.setTimeout(callback, 1000 / 60);};
}();
function frame() {mouseswipe(parseInt(plugin.css(edge), 10));if (startAnimFrame == true) {requestAnimFrame(frame);}}
var touchStart = function (e) {//mouse down
if (!mouseDown) {
if (hasTouch) {e = event.touches[0];}
window.addEventListener('mousemove', touchMove, false); //capture mouse
window.addEventListener('mouseup', touchEnd, false);
if (o.HORIZ == true) {
XY = lastXY = e.pageX;
topLeft = plugin[0].offsetLeft;
} else {
XY = lastXY = e.pageY;
topLeft = plugin[0].offsetTop;
}
mouseDown = true;
if (startAnimFrame == false) {startAnimFrame = true;requestAnimFrame(frame);} //mouseSwipe
}
};
var touchMove = function (e) {//mouse move
if (mouseDown) {
if (hasTouch) {e = event.touches[0];}
var MouseXY = edge == 'left' ? e.pageX : e.pageY;
plugin.css(edge, topLeft + (MouseXY - XY));
velocity += (MouseXY - lastXY) * o.SPEED_SPRING;
lastXY = MouseXY;
}
};
var touchEnd = function (e) {//mouse up
if (mouseDown) {
mouseDown = false;
window.removeEventListener('mousemove', touchMove, false); //release mouse
window.removeEventListener('mouseup', touchEnd, false);
}
};
}; //end init
plugin.init();
}); //end each instance
}; // end $.fn.mouseSwipe
})(jQuery); //end of plugin code
//put this on your html page between script tags in the head.
$(document).ready(function () {
$(document).on("dragstart", function () {return false;});
$("#mouseSwipe1").mouseSwipe({ HORIZ: true }); //false for vertical swipes
}); // end ready
</script>
</body>
</html>
Comments
Post a Comment