Last active
December 15, 2015 07:29
-
-
Save piatra/5224171 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| <html> | |
| <head> | |
| <title></title> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <img src="4.jpg" id="image1"> | |
| <div class='resize resize-right'></div> | |
| <div class='resize resize-top'></div> | |
| <div class='resize resize-left'></div> | |
| <div class='resize resize-bottom'></div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or 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
| var img = document.querySelector('#image1') | |
| , resizeR = document.querySelector('.resize-right') | |
| , resizeT = document.querySelector('.resize-top') | |
| , resizeL = document.querySelector('.resize-left') | |
| , resizeB = document.querySelector('.resize-bottom') | |
| , height | |
| , width | |
| , page_width | |
| , ratio | |
| , updateInterval | |
| , coordinate = { | |
| x: 0, | |
| y: 0 | |
| }; | |
| img.ondragstart = function() { return false; }; | |
| var updateResizeBars = function () { | |
| initR(resizeR); | |
| initT(resizeT); | |
| initL(resizeL); | |
| initB(resizeB); | |
| }; | |
| img.addEventListener('mousedown', function () { | |
| window.addEventListener('mousemove', mousemove, false); | |
| updateResizeBars(); | |
| }, false); | |
| resizeR.addEventListener('mousedown', function (e) { | |
| ratio = img.width / img.height; | |
| window.addEventListener('mousemove', resize_r, false); | |
| }, false); | |
| resizeT.addEventListener('mousedown', function (e) { | |
| ratio = img.width / img.height; | |
| window.addEventListener('mousemove', resize_t, false); | |
| }, false); | |
| resizeL.addEventListener('mousedown', function (e) { | |
| ratio = img.width / img.height; | |
| window.addEventListener('mousemove', resize_l, false); | |
| }, false); | |
| resizeB.addEventListener('mousedown', function (e) { | |
| ratio = img.width / img.height; | |
| window.addEventListener('mousemove', resize_b, false); | |
| }, false); | |
| window.addEventListener('mouseup', function(e) { | |
| img.classList.remove('moving'); | |
| window.removeEventListener('mousemove', resize_r, false); | |
| window.removeEventListener('mousemove', resize_l, false); | |
| window.removeEventListener('mousemove', resize_b, false); | |
| window.removeEventListener('mousemove', resize_t, false); | |
| window.removeEventListener('mousemove', mousemove, false); | |
| updateResizeBars(); | |
| }, false); | |
| function resize_r (e, direction) { | |
| width = img.width; | |
| height = img.height; | |
| if (img.style.left == 'auto') { | |
| img.style.left = parseInt(img.offsetLeft, 10); | |
| img.style.right = 'auto'; | |
| } | |
| var img_width = e.pageX - parseInt(img.offsetLeft, 10); | |
| if (img_width > 50) { | |
| img.width = img_width; | |
| img.height = img.width * ratio; | |
| } | |
| } | |
| function resize_l (e, direction) { | |
| width = img.width; | |
| height = img.height; | |
| var offsetRight = window.innerWidth - img.width - parseInt(img.offsetLeft, 10); | |
| img.style.left = 'auto'; | |
| img.style.right = offsetRight; | |
| var img_width = window.innerWidth - e.pageX - offsetRight; | |
| if (img_width > 50) { | |
| img.width = img_width; | |
| img.height = img.width * ratio; | |
| } | |
| } | |
| function resize_b (e, direction) { | |
| width = img.width; | |
| height = img.height; | |
| var img_height = e.pageY - parseInt(img.offsetTop, 10); | |
| if (img_height > 50) { | |
| img.height = img_height; | |
| img.width = ratio * img.height; | |
| } | |
| } | |
| function resize_t (e, direction) { | |
| width = img.width; | |
| height = img.height; | |
| var page_height = window.innerHeight | |
| , offsetBottom = window.innerHeight - img.offsetTop - img.height; | |
| img.style.top = 'auto'; | |
| img.style.bottom = offsetBottom + 'px'; | |
| var img_height = page_height - e.pageY - offsetBottom; | |
| if (img_height > 50) { | |
| img.height = img_height; | |
| img.width = ratio * img.height; | |
| } | |
| } | |
| function mousemove(e) { | |
| width = img.width; | |
| height = img.height; | |
| img.classList.add('moving'); | |
| img.style.left = (e.pageX - img.width / 2) + 'px'; | |
| img.style.top = (e.pageY - img.height / 2) + 'px'; | |
| } | |
| function initR(obj) { | |
| obj.style.height = img.height + 'px'; | |
| obj.style.left = parseInt(img.offsetLeft, 10) + img.width - 10 + 'px'; | |
| obj.style.top = parseInt(img.offsetTop, 10) + 'px'; | |
| } | |
| function initT(obj) { | |
| obj.style.width = img.width + 'px'; | |
| obj.style.left = parseInt(img.offsetLeft, 10) + 'px'; | |
| obj.style.top = parseInt(img.offsetTop, 10) - 10 + 'px'; | |
| } | |
| function initL(obj) { | |
| obj.style.height = img.height + 'px'; | |
| obj.style.left = parseInt(img.offsetLeft, 10) - 10 + 'px'; | |
| obj.style.top = parseInt(img.offsetTop, 10) + 1 + 'px'; | |
| } | |
| function initB(obj) { | |
| obj.style.width = img.width + 'px'; | |
| obj.style.left = parseInt(img.offsetLeft, 10) + 'px'; | |
| obj.style.top = parseInt(img.offsetTop, 10) + height - 10 + 'px'; | |
| } | |
| updateResizeBars(); |
This file contains hidden or 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
| * { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| width : 50%; | |
| margin : 0 auto; | |
| } | |
| .container img { | |
| position: absolute; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| .resize { | |
| position: absolute; | |
| background: rgba(0,0,0,.2); | |
| } | |
| .resize-right { | |
| width: 20px; | |
| cursor: w-resize; | |
| } | |
| .resize-top { | |
| height: 20px; | |
| cursor: s-resize; | |
| } | |
| .resize-left { | |
| width: 20px; | |
| cursor: e-resize; | |
| } | |
| .resize-bottom { | |
| height: 20px; | |
| cursor: n-resize; | |
| } | |
| .moving { | |
| cursor: move; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment