Сегодня я снова изучил эффект резания изображений веб-фронта. Существует область, чтобы создать определенную часть изображения и предварительно просмотреть часть в штучной упаковке.
Рендеринги следующие:
Разве это не выглядит очень круто
Давайте кратко представим метод реализации
1. макет составляет два div слева и вправо. Один справа легко сказать, в основном слева. Один слева разделен на три слоя в абсолютном расположении. Нижний слой - это полупрозрачное изображение, а средний слой - это оригинальная картина, но он разрезан только на один кусок, и отображается только этот кусок. Вы можете использовать клип: прямое метод для его реализации. Тогда верхний слой - это граница, написанная самим собой. 8 баллов добавляются к границе, и позиции определены для этих 8 точек соответственно.
2. Затем код JS реализован с использованием события Click Mouse.
Разместите свой собственный код ниже:
index.html (нам нужно ссылаться на два файла JS, а именно jquery и jquery-ui. Среди них JQuery может ссылаться на онлайн. Я цитировал jquery-ui локально. Вы можете загрузить его самостоятельно на официальном веб-сайте.
<! Doctype html> <html> <head lang = "en"> <meta http-equiv = "content-tpe" content = "text/html; charset = utf-8"> <Title> Разрешение изображения </title> <script src = "http://cdn.bootcss.com/jquery/2.0.min. type = "text/javascript"> </script> <script src = "js/jquery-ui-1.12.0/jquery-ui.min.js"> </script> <link href = "img.css" rel = "stylesheet" type = "text/css"/> <script type = "text/javascript" javascript "javascript" javascript " src = "img.js"> </script> </head> <body> <div id = "box"> <img src = "Images/1.jpg" id = "img1"> <img src = "Images/1.jpg" id = "img2"> <div id = "main"> <div id = "div> </div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <dif> id = "raight-up"> </div> <div id = "вправо"> </div> <div id = "rust Down"> </div> <div id = "встание"> </div> <div id = "слева"> </div> </div> </div> <div id = "preview"> <img src = "Image/1.jpg" = "id id" img.css body {foangy-color: #333;} #box {position: Absolute; Верх: 200px; Слева: 100px; Ширина: 600px; Высота: 319px;}#img1 { /*непрозрачность* / непрозрачность: 0,3; позиция: абсолютно; Верх: 0; Слева: 0;}#img2 {position: Absolute; Верх: 0; слева: 0; /*Функциональный клип: rect (вверху, справа, внизу, слева); Верх представляет расстояние от верхней части области зажима до верхней части изображения справа, представляющее расстояние от правой части области зажима слева от изображения, то есть длина + левое дно представляет расстояние от нижней части области зажима до верхней части изображения, то есть ширина + верхняя часть левой части представляет расстояние от левой области клипа в левую картину*/ Clip: 0, 200px, 200px, 200px, 200px, 200px, 200px, 200px, 200px, 200px, 200px, 200px, 200px, 200px, 200px, 200px. абсолютный; Граница: 1px solid #fff; Ширина: 200px; Высота: 200px;}#Предварительный просмотр {позиция: абсолют; Ширина: 600px; Высота: 319px; Верх: 200px; Слева: 720px;}#Предварительный просмотр img { /*Чтобы сделать функцию клипа в работой функции SetPreview, вам необходимо добавить абсолютное позиционирование или относительное позиционирование в IMG, но, поскольку родительский элемент является абсолютным позиционированием, это абсолютное позиционирование* / position: Absolute;}. Mindiv {положение: абсолютное; Ширина: 8px; высота: 8px; фоновый цвет: #fff;}. Left-Up {top: -4px; слева: -4px; /*Изменение мыши n-n-north w-w-west s-south e-east*/ cursor: nw-resize;}. Up {/*Расстояние к левому родительскому элементу, самое близкое положение, самое близкое положение является абсолютным или относительным, составляет 50%от левого от родителя, то самое близкое положение, абсолютное или относительное-50%*/ слева: 50%; /*Расстояние до левого -4px означает перемещение влево 4px*/ margin -left: -4px; Верх: -4PX; Cursor: n-resize;}. Право {справа: -4px; Верх: -4PX; Cursor: ne-resize;}. Право {справа: -4px; Верх: -4PX; Cursor: ne-resize;}. Прямо вниз {внизу: -4px; Справа: -4px; Cursor: se-resize;}. Down {Left: 50%; Мяглевая маржа: -4PX; Внизу: -4PX; Cursor: s-resize;}. влево {слева: -4px; Внизу: -4PX; Cursor: SW-Resize;}. Left {внизу: 50%; маржинальный бат: -4px; слева: -4px; Cursor: W-Resize;} img.js // execute после загрузки элемента, чтобы убедиться, что элемент может успешно получить window.onload = function () {document.OnselectStart = new Function ('event.returnValue = false;'); $ ("#main"). Draggable ({sancement: 'parent', Drag: setCoice}); var img = document.getElementbyId ("img2"); var rightDiv = document.getElementById ("right"); var Uddiv = document.getElementById ("up"); var LeftDiv = document.getElementById ("Left"); var downdiv = document.getElementbyId ("down"); var lealpdiv = document.getElementbyId ("Left-Up"); var rupdiv = document.getElementbyId ("rafe-up"); var rightdowndiv = document.getElementById ("unl Down"); var deafdowndiv = document.getElementById ("в отставке"); var mainDiv = document.getElementById ("main"); var ifkeydown = false; var contact = ""; // Указывает нажатую точку контакта // Mouse Down State RightDiv.onmouseDown = function (e) {/* jQuery и jQuery-UI, введенные эффектом перетаскивания, также запустит событие щелчка мыши. Поэтому, чтобы предотвратить определение события, которое вы определяете, и введенное вами событие Click, пропустите в E и добавьте следующее оператор, чтобы предотвратить пузырьки. Пузырь означает, что некоторые события родительского элемента также будут запускаются, когда мышь нажимает на элемент*/ e.stoppropagation (); ifkeydown = true; contact = "справа"; } udviv.onmouseDown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "up"; } leftDiv.onmouseDown = function (e) {e.stopPropagation (); ifkeydown = true; contact = "Left"; } downdiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "down"; } LealWupDiv.onmouseDown = function (e) {e.stopPropagation (); ifkeydown = true; contact = "Left-Up"; } rustupdiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "raft-up"; } rightdowndiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "unl Down"; } deftdowndiv.onmousedown = function (e) {e.stoppropagation (); ifkeydown = true; contact = "в отставке"; } // windows windows whence.onmouseup = function () {ifkeydown = false; } // window window window windows ovide.onmousemove = function (e) {if (ifkey == true) {switch (contact) {case "right": rightmove (e); перерыв; Дело "вверх": Upmove (e); перерыв; Дело "слева": левая (e); перерыв; Дело "вниз": DownMove (e); перерыв; Дело "Left-Up": левая (e); Upmove (e); перерыв; Дело "Право": RightMove (e); Upmove (e); перерыв; Дело "Право": RightMove (e); DownMove (e); перерыв; Дело "в отставке": левая (e); DownMove (e); перерыв; }} setChoice (); setPreview (); } // переместить правую сторону RightMove (e) {var x = e.clientx; // мышь x координата var addwidth = ""; // ширина увеличилась за счет выбора шатра после того, как мышь перемещается var widthbefore = maindiv.offsetwidth - 2; // Ширина перед изменением шатра, вычитание 2 заключается в вычтении ширины границы границы, а левая и правая сторона составляет 1px, поэтому это 2 addwidth = x - getPosition (maindiv) .left // Ширина увеличивается на мыши, если (ширина до <= img.width) {maindiv.stle.widththththththththththththththththththththththafore <= img.width). // ширина после изменений шатра} else {maindiv.style.width = img.width + "px"; }} // переместить функцию Upmove (e) {var topbefore = mainDiv.offsetTop; var y = e.clienty; // Мышиная вертикальная координата var addheight = 0; var mainy = getPosition (maindiv) .top; // расстояние шатра выбора до верхней части экрана addheight = y - mainy; // повышение высоты, var heightfore = maindiv.offsetheight - 2; var Bottom = topbefore + heightfore; var heightafter = heightfore - addheight; var topafter = maindiv.offsettop + addheight; if (topafter <bottom && topafter> -2) {maindiv.style.height = heightafter + "px"; maindiv.style.top = topafter + "px"; }} // Перемещение левой функции левой функции (e) {// Расстояние от левой стороны родительского элемента перед левой стороной левой стороны левой стороны от родительского элемента var offore = maindiv.offsetleft; // расстояние от мыши до левой стороны браузера var x = e.clientx; // Определите увеличенную ширину var addWidth = 0; // Ширина коробки клипа до изменения var wisthboder = maindiv.offsetwidth - 2; // расстояние левой границы от браузера до изменения maindivleft = getPosition (maindiv) .left; // расстояние правой границы слева от родительского элемента var rught = слева до + ширина // ширина коробки клипа после изменения var widthafter = widthboerfore - addwidth; // расстояние от ящика от левого изменения после изменения var leftafter = maindiv.offsetleft + addwidth; // Предотвратить перемещение левой границы в область за пределами правой границы, если (левый флажок <right && leathafter> -2) {// определить измененную ширину maindiv.style.width = widthafter + "px"; // Определите расстояние от левого родительского элемента после изменения maindiv.style.left = leftafter + "px"; }} // Переместить нижнюю функцию вниз по дому (e) {var y = e.clienty; var addheight = 0; var heightbefore = maindiv.offsetheight - 2; addheight = y - getPosition (maindiv) .top; if (heightbefore <= img.height) {maindiv.style.height = addheight + "px"; } else {maindiv.style.height = img.height + "px"; }} // Получить расстояние элемента относительно слева от экрана, используйте offsetleft // node в качестве функции передачи элемента getPosition (node) { /*Получить левый край элемента относительно родительского элемента* / var Left = node.offsetleft; /*Получить верхний край элемента относительно родительского элемента*/ var top = node.offsettop; /*Получить родительский элемент элемента*/ var parent = node.offsetparent; /*Судите, существует ли родительский элемент. Если есть, добавляется левый поля, и расстояние между элементом и левой границей браузера рассчитывается*/ while (родитель! = Null) {/*петля накапливает левый край дочернего элемента относительно родительского элемента*/ left += parent.offsetleft; /*Цикл накапливает верхний край дочернего элемента относительно родительского элемента*/ top += parent.offsettop; /*Цикл получает родительский элемент родительского элемента, пока не появится родительский элемент*/ parent = parent.offsetParent; } return {"слева": слева, "top": top}; } // Установите выбранную область для выделения и видимой функции setChoice () {var top = mainDiv.offsettop; var right = maindiv.offsetleft + maindiv.offsetwidth; var bottom = maindiv.offsettop + maindiv.offsetheight; var Left = maindiv.offsetleft; img.style.clip = "rect ("+top+"px,"+right+"px,"+снизу+"px,"+left+"px"+")"} // функция предварительного просмотра setpreview () {var top = maindiv.offsettop; var right = maindiv.offsetleft + maindiv.offsetwidth; var bottom = maindiv.offsettop + maindiv.offsetheight; var Left = maindiv.offsetleft; var img3 = document.getElementbyId ("img3"); img3.style.clip = "rect ("+ top+ "px,"+ справа+ "px,"+ снизу+ "px,"+ левый+ "px"+ ")" img3.style.top = -(top)+ "px"; img3.style.left = -(слева) + "px"; }}Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.