-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathpanning.html
93 lines (84 loc) · 3.47 KB
/
panning.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery image panning</title>
<style type="text/css">
<!--
html,body{height:100%;}
body {margin:0; padding:0; background:#eee;}
#outer_container{position:relative; margin:auto; padding:4px; border:8px solid #dadada; height:90%; width:80%;}
#imagePan{position:relative; overflow:hidden; cursor:crosshair; height:100%; width:100%;}
#imagePan .container{position:relative; left:0;}
-->
</style>
<script type="text/javascript" src="js/lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/lib/jquery.easing.1.3.js"></script>
</head>
<body>
<div id="outer_container">
<div id="imagePan">
<div class="container"><div>
<img src="http://manos.malihu.gr/tuts/Citten_1920x1200.jpg" class="panning" />
</div></div>
</div>
</div>
<script>
$(window).load(function() {
$outer_container=$("#outer_container");
$imagePan_panning=$("#imagePan .panning");
$imagePan=$("#imagePan");
$imagePan_container=$("#imagePan .container");
$outer_container.css("top", ($(window).height()-($outer_container.outerHeight()))/2);
$imagePan_panning.css("margin-top",($imagePan.height()-$imagePan_panning.height())/2+"px");
containerWidth=$imagePan.width();
containerHeight=$imagePan.height();
totalContentW=$imagePan_panning.width();
totalContentH=$imagePan_panning.height();
$imagePan_container.css("width",totalContentW).css("height",totalContentH);
var go = true;
function MouseMove(e){
var mouseCoordsX=(e.pageX - $imagePan.offset().left);
var mouseCoordsY=(e.pageY - $imagePan.offset().top);
var mousePercentX=mouseCoordsX/containerWidth;
var mousePercentY=mouseCoordsY/containerHeight;
var destX=-(((totalContentW-(containerWidth))-containerWidth)*(mousePercentX));
var destY=-(((totalContentH-(containerHeight))-containerHeight)*(mousePercentY));
var thePosA=mouseCoordsX-destX;
var thePosB=destX-mouseCoordsX;
var thePosC=mouseCoordsY-destY;
var thePosD=destY-mouseCoordsY;
var marginL=$imagePan_panning.css("marginLeft").replace("px", "");
var marginT=$imagePan_panning.css("marginTop").replace("px", "");
var animSpeed=500; //ease amount
var easeType="easeOutCirc";
if(mouseCoordsX>destX || mouseCoordsY>destY){
//$imagePan_container.css("left",-thePosA-marginL); $imagePan_container.css("top",-thePosC-marginT); //without easing
$imagePan_container.stop().animate({left: -thePosA-marginL, top: -thePosC-marginT}, animSpeed,easeType); //with easing
} else if(mouseCoordsX<destX || mouseCoordsY<destY){
//$imagePan_container.css("left",thePosB-marginL); $imagePan_container.css("top",thePosD-marginT); //without easing
$imagePan_container.stop().animate({left: thePosB-marginL, top: thePosD-marginT}, animSpeed,easeType); //with easing
} else {
$imagePan_container.stop();
}
}
$imagePan_panning.css("margin-left",($imagePan.width()-$imagePan_panning.width())/2).css("margin-top",($imagePan.height()-$imagePan_panning.height())/2);
$imagePan.bind("mousedown", function(event){
go = true;
$(this).mousemove(function(e){
if(go)
MouseMove(e);
});
$(this).mouseup(function(e){
go = false;
});
});
});
$(window).resize(function() {
$imagePan.unbind("mousemove");
$imagePan_container.css("top",0).css("left",0);
$(window).load();
});
</script>
</body>
</html>