Created
March 12, 2018 02:08
-
-
Save freman/5a9c80ae1e6ec1da88601eeedc235b76 to your computer and use it in GitHub Desktop.
Show a portion of 4 images side by side and synchronise the clip.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title></title> | |
| <style> | |
| .wrap { position: relative; } | |
| .wrap > img { | |
| position: absolute; | |
| clip: rect(0px, 400px, 400px, 0px); | |
| } | |
| .container { | |
| width: 410px; | |
| height: 420px; | |
| float: left; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1> Click, drag and drop to pan the views </h1> | |
| <div class="container"> | |
| <div class="text">home-banner.70.jpg</div> | |
| <div class="wrap"><img src="home-banner.70.jpg"></div> | |
| </div> | |
| <div class="container"> | |
| <div class="text">home-banner.80.jpg</div> | |
| <div class="wrap"><img src="home-banner.80.jpg"></div> | |
| </div> | |
| <div class="container"> | |
| <div class="text">home-banner.90.jpg</div> | |
| <div class="wrap"><img src="home-banner.90.jpg"></div> | |
| </div> | |
| <div class="container"> | |
| <div class="text">home-banner.png</div> | |
| <div class="wrap"><img src="home-banner.png"></div> | |
| </div> | |
| <script> | |
| var d = 400 | |
| var cx = 0, cy = 0 | |
| console.log(cx, cy) | |
| var wrapped = document.getElementsByClassName("wrap"); | |
| var down = false | |
| var origx = 0 | |
| var origy = 0 | |
| function mousedown(e) { | |
| if (down) {return false} | |
| down = true | |
| origx = e.clientX | |
| origy = e.clientY | |
| e.preventDefault() | |
| return false | |
| } | |
| function mouseup(e) { | |
| if (!down) {return false} | |
| cx = cx + e.clientX - origx | |
| cy = cy + e.clientY - origy | |
| down = false | |
| e.preventDefault() | |
| return false | |
| } | |
| function mousemove(e) { | |
| if (!down) {return false} | |
| if (!e) {e = window.event}; | |
| var left = cx + e.clientX - origx | |
| var top = cy + e.clientY - origy | |
| var bottom = top + d | |
| var right = left + d | |
| for (var i = 0; i < wrapped.length; i++) { | |
| wrapped[i].firstChild.style.left = -left + "px" | |
| wrapped[i].firstChild.style.top = -top + "px" | |
| wrapped[i].firstChild.style.clip = "rect(" + top + "px," + right + "px," + bottom + "px," + left + "px)" | |
| } | |
| e.preventDefault() | |
| return false | |
| } | |
| if (window.PointerEvent) { | |
| document.addEventListener("pointerdown", mousedown) | |
| document.addEventListener("pointerup", mouseup) | |
| document.addEventListener("pointermove", mousemove) | |
| } else { | |
| document.addEventListener('mousedown', mousedown) | |
| document.addEventListener('mouseup', mouseup) | |
| document.addEventListener('mousemove', mousemove) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment