Вот примерно так (коффее скрипт правда, да скрол бесконечный, но ограничения ставятся легко):
class bgViewer
dn = (e) ->
@isStop = false
@sx = @lx = e.pageX or (e.originalEvent and e.originalEvent.touches and e.originalEvent.touches[0] and e.originalEvent.touches[0].pageX) or 0
@sy = @ly = e.pageY or (e.originalEvent and e.originalEvent.touches and e.originalEvent.touches[0] and e.originalEvent.touches[0].pageY) or 0
return false
up = (e) ->
@isStop = true
return false
move = (e) ->
if @isStop then return
x = e.pageX or (e.originalEvent and e.originalEvent.touches and e.originalEvent.touches[0] and e.originalEvent.touches[0].pageX) or 0
y = e.pageY or (e.originalEvent and e.originalEvent.touches and e.originalEvent.touches[0] and e.originalEvent.touches[0].pageY) or 0
dx = x - @lx
dy = y - @ly
if Math.abs(x-@sx) < @filter and Math.abs(y-@sy) < @filter
return
@lx = x
@ly = y
@x = (@x + dx) % @w
@y = (@y + dy) % @h
@cnt.css(
'background-position': @x + 'px ' + @y + 'px'
)
return false
free: ->
@cnt.off( 'mousedown touchstart', @dnxt
).off( 'mouseup touchend', @upxt
).off( 'mousemove touchmove', @movext )
return @
url: (src) ->
@src = src
@img = new Image
@img.src = src
$( @img ).on( 'load', (e) =>
@w = @img.width
@h = @img.height
)
@cnt.css(
'background-image': 'url(' + src + ')'
'background-position': '0px 0px'
)
@x = 0
@y = 0
@lx = 0
@ly = 0
@sx = 0
@sx = 0
return @
constructor: (@cnt, @src = '', @filter = 5) ->
@cnt.css(
'overflow': 'hidden'
'background-repeat': 'repeat'
'background-position': '0px 0px'
'cursor': 'move'
)
@x = 0
@y = 0
@lx = 0
@ly = 0
@sx = 0
@sx = 0
@isStop = true
t = @
@dnxt = (e) -> dn.call t, e
@upxt = (e) -> up.call t, e
@movext = (e) -> move.call t, e
@cnt.on( 'mousedown touchstart', @dnxt
).on( 'mouseup touchend', @upxt
).on( 'mousemove touchmove', @movext )
@cnt[0].bgviewer = @
@url @src
Применять примерно так:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="lib/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="app/bgviewer.js"></script>
<style>
BODY {
padding: 0;
margin: 0;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
position: absolute;
}
.viewer {
width: 100%;
height: 100%;
background-color: #434343;
}
</style>
</head>
<body>
<div class="viewer" id="viewer"></div>
<script type="text/javascript">
$(function(){
window.t2 = new bgViewer(
$('#viewer'),
'image.jpg',
10 // Filter motion less 10 px
);
});
</script>
</body>
</html>
