我正在尝试创建一个图钉 slider ，这样当我点击图钉并移动它时，效果就会应用到图片上。问题是当我点击图钉时，它会跳开并且无法正常工作。如果可以，请帮我解决这个问题!
抱歉，这么长的代码片段，问题出在以“pinLevel.addEventListener('mousedown', function (evt) { ....'”开头的 JS 代码中
'use strict';
var COMMENTS_LIST = [
'Всё отлично!',
'В целом всё неплохо. Но не всё.',
'Когда вы делаете фотографию, хорошо бы убирать палец из кадра. В конце концов это просто непрофессионально.',
'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
'Лица у людей на фотке перекошены, как будто их избивают. Как можно было поймать такой неудачный момент?!'
];
var NAMES_LIST = ['Sam', 'Jack', 'Clive', 'Mathew', 'Alex', 'Karl'];
var ESC_KEYCODE = 27;
var template = document.querySelector('#picture').content.querySelector('a');
var picturesDomElement = document.querySelector('.pictures');
var uploadPicLabel = document.querySelector('#upload-file');
var uploadOverlay = document.querySelector('.img-upload__overlay');
var closeOverlay = document.querySelector('.img-upload__cancel');
var previewPic = document.querySelector('.img-upload__preview');
var effectBar = document.querySelector('.img-upload__effect-level');
var effectsFieldset = document.querySelector('.img-upload__effects');
var commentField = document.querySelector('.text__description');
var hashtagsField = document.querySelector('.text__hashtags');
var pinLevel = document.querySelector('.effect-level__pin');
var effectLevelLine = document.querySelector('.effect-level__line');
var effectLevelDepth = document.querySelector('.effect-level__depth');
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var getRandomCommentator = function () {
var randomCommentator = {};
var randomComment = COMMENTS_LIST[Math.floor(Math.random() * COMMENTS_LIST.length)];
var randomName = NAMES_LIST[Math.floor(Math.random() * NAMES_LIST.length)];
randomCommentator.avatar = 'img/avatar-' + getRandomInt(1, 6) + '.svg';
randomCommentator.message = randomComment;
randomCommentator.name = randomName;
return randomCommentator;
};
var generateComments = function () {
var randomInt = getRandomInt(1, 26);
var comments = [];
for (var i = 0; i < randomInt; i++) {
comments.push(getRandomCommentator(6));
}
return comments;
};
var generateData = function (count) {
var data = [];
for (var i = 0; i < count; i++) {
data.push(
{
url: 'photos/' + (i + 1) + '.jpg',
likes: getRandomInt(1, 26),
comments: generateComments()
}
);
}
return data;
};
var renderPhotos = function (array) {
var fragment = document.createDocumentFragment();
for (var k = 0; k < array.length; k++) {
var element = template.cloneNode(true);
var item = array[k];
element.querySelector('.picture__comments').textContent = item.comments.length;
element.querySelector('.picture__likes').textContent = item.likes;
element.querySelector('.picture__img').src = item.url;
fragment.appendChild(element);
}
picturesDomElement.appendChild(fragment);
};
var onPopupEscPress = function (evt) {
if (evt.keyCode === ESC_KEYCODE && document.activeElement !== commentField && document.activeElement !== hashtagsField) {
closePicEditor();
}
};
var openPicEditor = function () {
uploadOverlay.classList.remove('hidden');
document.addEventListener('keydown', onPopupEscPress);
};
var closePicEditor = function () {
uploadOverlay.classList.add('hidden');
document.removeEventListener('keydown', onPopupEscPress);
};
uploadPicLabel.addEventListener('change', function () {
openPicEditor();
changeOverlay();
});
closeOverlay.addEventListener('click', function () {
closePicEditor();
});
var validateCommentLength = function () {
if (commentField.value.length > 140) {
commentField.style.border = 'thick solid red';
commentField.setCustomValidity('The message is too long');
} else {
commentField.style.border = '';
commentField.setCustomValidity('');
}
};
var changeOverlay = function (percentage) {
var checkedEffect = effectsFieldset.querySelector('input:checked');
var filterValue;
effectBar.classList.remove('hidden');
switch (checkedEffect.value) {
case 'chrome': filterValue = 'grayscale(' + percentage + ')'; break;
case 'sepia': filterValue = 'sepia(' + percentage + ')'; break;
case 'marvin': filterValue = 'invert(' + percentage + ')'; break;
case 'phobos': filterValue = 'blur(' + percentage + 'px)'; break;
case 'heat': filterValue = 'brightness(' + percentage + ')'; break;
default: {
filterValue = 'none';
effectBar.classList.add('hidden');
}
}
pinLevel.style.left = percentage + '%';
effectLevelDepth.style.width = percentage + '%';
previewPic.style.filter = filterValue;
};
pinLevel.addEventListener('mousedown', function (evt) {
evt.preventDefault();
var startCoords = evt.clientX;
var onMouseMove = function (moveEvt) {
moveEvt.preventDefault();
var shift = moveEvt.clientX - startCoords;
var newEffectLevel = startCoords + shift;
var percentageLevel = newEffectLevel / effectLevelLine.getBoundingClientRect().right * 100;
if (newEffectLevel >= effectLevelLine.getBoundingClientRect().left &&
newEffectLevel <= effectLevelLine.getBoundingClientRect().right) {
pinLevel.style.left = percentageLevel + '%';
effectLevelDepth.style.width = percentageLevel + '%';
changeOverlay(percentageLevel);
}
};
var onMouseUp = function (upEvt) {
upEvt.preventDefault();
startCoords = upEvt.clientX;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
var photos = generateData(25);
renderPhotos(photos);
effectsFieldset.addEventListener('click', changeOverlay);
effectsFieldset.addEventListener('click', function () {
changeOverlay(100);
});
commentField.addEventListener('change', validateCommentLength);/**
* Шкала регулирования глубины фильтра
*/
.effect-level {
position: absolute;
bottom: 10px;
left: 50%;
width: 495px;
height: 33px;
font-size: 12px;
line-height: 42px;
text-align: center;
color: #ffffff;
white-space: nowrap;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 33px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.effect-level__value {
display: none;
}
.effect-level__line {
position: absolute;
top: 50%;
right: 20px;
left: 20px;
height: 5px;
font-size: 0;
background-color: rgba(255, 231, 81, 0.4);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.effect-level__pin {
position: absolute;
top: 50%;
left: 20%;
z-index: 1;
width: 18px;
height: 18px;
margin: -9px 0 0;
background-color: #ffe753;
border-radius: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
cursor: move;
}
.effect-level__depth {
position: absolute;
width: 20%;
height: 100%;
background-color: #ffe753;
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Кекстаграм</title>
</head>
<body>
<main>
<!-- Фильтрация изображений от других пользователей -->
<section class="img-filters img-filters--inactive container">
<h2 class="img-filters__title visually-hidden">Фильтр фотографий</h2>
<form class="img-filters__form" action="index.html" method="get" autocomplete="off">
<button type=button class="img-filters__button img-filters__button--active" id="filter-popular">Популярные</button>
<button type=button class="img-filters__button" id="filter-new">Новые</button>
<button type=button class="img-filters__button" id="filter-discussed">Обсуждаемые</button>
</form>
</section>
<!-- Контейнер для изображений от других пользователей -->
<section class="pictures container">
<h2 class="pictures__title visually-hidden">Фотографии других пользователей</h2>
<!-- Поле для загрузки нового изображения на сайт -->
<section class="img-upload">
<div class="img-upload__wrapper">
<h2 class="img-upload__title visually-hidden">Загрузка фотографии</h2>
<form class="img-upload__form" id="upload-select-image" method="post" enctype="multipart/form-data" autocomplete="off">
<!-- Изначальное состояние поля для загрузки изображения -->
<fieldset class="img-upload__start">
<input type="file" id="upload-file" class="img-upload__input visually-hidden" name="filename" required>
<label for="upload-file" class="img-upload__label img-upload__control">Загрузить</label>
</fieldset>
<!-- Форма редактирования изображения -->
<div class="img-upload__overlay hidden">
<div class="img-upload__wrapper">
<div class="img-upload__preview-container">
<!-- Изменение размера изображения -->
<fieldset class="img-upload__scale scale">
<button type="button" class="scale__control scale__control--smaller">Уменьшить</button>
<input type="text" class="scale__control scale__control--value" value="55%" title="Image Scale" name="scale" readonly>
<button type="button" class="scale__control scale__control--bigger">Увеличить</button>
</fieldset>
<!-- Предварительный просмотр изображения -->
<div class="img-upload__preview">
<img src="img/upload-default-image.jpg" alt="Предварительный просмотр фотографии">
</div>
<!-- Изменение глубины эффекта, накладываемого на изображение -->
<fieldset class="img-upload__effect-level effect-level">
<input class="effect-level__value" type="number" name="effect-level" value="20">
<div class="effect-level__line">
<div class="effect-level__pin" tabindex="0">Кнопка изменения глубины эффекта фотографии</div>
<div class="effect-level__depth">Глубина эффекта фотографии</div>
</div>
</fieldset>
<!-- Кнопка для закрытия формы редактирования изображения -->
<button type="reset" class="img-upload__cancel cancel" id="upload-cancel">Закрыть</button>
</div>
<!-- Наложение эффекта на изображение -->
<fieldset class="img-upload__effects effects">
<ul class="effects__list">
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-none" value="none">
<label for="effect-none" class="effects__label">
<span class="effects__preview effects__preview--none">Превью фото без эффекта</span>
Оригинал
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-chrome" value="chrome">
<label for="effect-chrome" class="effects__label">
<span class="effects__preview effects__preview--chrome">Превью эффекта Хром</span>
Хром
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-sepia" value="sepia">
<label for="effect-sepia" class="effects__label">
<span class="effects__preview effects__preview--sepia">Превью эффекта Сепия</span>
Сепия
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-marvin" value="marvin">
<label for="effect-marvin" class="effects__label">
<span class="effects__preview effects__preview--marvin">Превью эффекта Марвин</span>
Марвин
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-phobos" value="phobos">
<label for="effect-phobos" class="effects__label">
<span class="effects__preview effects__preview--phobos">Превью эффекта Фобос</span>
Фобос
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-heat" value="heat" checked>
<label for="effect-heat" class="effects__label">
<span class="effects__preview effects__preview--heat">Превью эффекта Зной</span>
Зной
</label>
</li>
</ul>
</fieldset>
<!-- Добавление хэш-тегов и комментария к изображению -->
<fieldset class="img-upload__text text">
<input class="text__hashtags" name="hashtags" placeholder="#хэш-тег">
<textarea class="text__description" name="description" placeholder="Ваш комментарий..."></textarea>
</fieldset>
<!-- Кнопка для отправки данных на сервер -->
<button type="submit" class="img-upload__submit" id="upload-submit">Опубликовать</button>
</div>
</div>
</form>
</div>
</section>
<!-- Здесь будут изображения других пользователей -->
</section>
<!-- Полноэкранный показ изображения -->
<section class="big-picture overlay hidden">
<h2 class="big-picture__title visually-hidden">Просмотр фотографии</h2>
<div class="big-picture__preview">
<!-- Просмотр изображения -->
<div class="big-picture__img">
<img src="img/logo-background-3.jpg" alt="Девушка в купальнике" width="600" height="600">
</div>
<!-- Информация об изображении. Подпись, комментарии, количество лайков -->
<div class="big-picture__social social">
<div class="social__header">
<img class="social__picture" src="img/avatar-1.svg" alt="Аватар автора фотографии" width="35" height="35">
<p class="social__caption">Тестим новую камеру! =)</p>
<p class="social__likes">Нравится <span class="likes-count">356</span></p>
</div>
<!-- Комментарии к изображению -->
<div class="social__comment-count">5 из <span class="comments-count">125</span> комментариев</div>
<ul class="social__comments">
<li class="social__comment">
<img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35" height="35">
<p class="social__text">Мега фото! Просто обалдеть. Как вам так удалось?</p>
</li>
<li class="social__comment">
<img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35" height="35">
<p class="social__text">Да это фоташоп!!!!!!!!</p>
</li>
</ul>
<!-- Кнопка для загрузки новой порции комментариев -->
<button type="button" class="social__comments-loader comments-loader">Загрузить еще</button>
<!-- Форма для отправки комментария -->
<div class="social__footer">
<img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35" height="35">
<input type="text" class="social__footer-text" placeholder="Ваш комментарий...">
<button type="button" class="social__footer-btn" name="button">Отправить</button>
</div>
</div>
<!-- Кнопка для выхода из полноэкранного просмотра изображения -->
<button type="reset" class="big-picture__cancel cancel" id="picture-cancel">Закрыть</button>
</div>
</section>
</main>
<footer class="page-footer container">
<div class="page-footer__wrapper">
<div class="page-footer__copyright copyright">
<a class="copyright__link copyright__link--image" href="https://htmlacademy.ru/intensive/javascript"><img src="img/htmla-logo.svg" width="130" height="45" alt="HTML Academy"></a>
<p>Сделано в <a class="copyright__link copyright__link--text" href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a> © 2018</p>
</div>
<ul class="page-footer__contacts contacts">
<li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link contacts__link--twitter">Twitter</a></li>
<li><a href="https://www.instagram.com/htmlacademy/" class="contacts__link contacts__link--instagram">Instagtam</a></li>
<li><a href="https://www.facebook.com/htmlacademy" class="contacts__link contacts__link--facebook">Facebook</a></li>
<li><a href="https://vk.com/htmlacademy" class="contacts__link contacts__link--vk">VK</a></li>
</ul>
</div>
</footer>
<!-- Шаблон изображения случайного пользователя -->
<template id="picture">
<a href="#" class="picture">
<img class="picture__img" src="" width="182" height="182" alt="Случайная фотография">
<p class="picture__info">
<span class="picture__comments"></span>
<span class="picture__likes"></span>
</p>
</a>
</template>
<!-- Сообщение с ошибкой загрузки изображения -->
<template id="error">
<section class="error">
<div class="error__inner">
<h2 class="error__title">Ошибка загрузки файла</h2>
<div class="error__buttons">
<button type="button" class="error__button">Попробовать снова</button>
<button type="button" class="error__button">Загрузить другой файл</button>
</div>
</div>
</section>
</template>
<!-- Сообщение об успешной загрузке изображения -->
<template id="success">
<section class="success">
<div class="success__inner">
<h2 class="success__title">Изображение успешно загружено</h2>
<button type="button" class="success__button">Круто!</button>
</div>
</section>
</template>
<!-- Экран загрузки изображения -->
<template id="messages">
<div class="img-upload__message img-upload__message--loading">Загружаем...</div>
</template>
<script src="js/main.js"></script>
</body>
</html>最佳答案
修复它:
var onMouseMove = function (moveEvt) {
moveEvt.preventDefault();
//get the total width of "effectLevelLine"
var effectTotalWidth = effectLevelLine.offsetWidth;
//get the start position of "effectLevelLine" from
var effectLevelStart = effectLevelLine.getBoundingClientRect().right;
//calculate the shift = effectLevelLine position - effect-level__pin moveEvt.clientX
var shift = effectTotalWidth - (effectLevelStart - moveEvt.clientX);
//calculate percent
var percentageLevel = shift / effectTotalWidth * 100;
//to make sure that the pin is inside the effectLevelLine
if (shift > 0 && shift < effectTotalWidth) {
//apply
pinLevel.style.left = percentageLevel + '%';
effectLevelDepth.style.width = percentageLevel + '%';
changeOverlay(percentageLevel);
}
};
注意:代码注释中的解释
'use strict';
var COMMENTS_LIST = [
'Всё отлично!',
'В целом всё неплохо. Но не всё.',
'Когда вы делаете фотографию, хорошо бы убирать палец из кадра. В конце концов это просто непрофессионально.',
'Моя бабушка случайно чихнула с фотоаппаратом в руках и у неё получилась фотография лучше.',
'Я поскользнулся на банановой кожуре и уронил фотоаппарат на кота и у меня получилась фотография лучше.',
'Лица у людей на фотке перекошены, как будто их избивают. Как можно было поймать такой неудачный момент?!'
];
var NAMES_LIST = ['Sam', 'Jack', 'Clive', 'Mathew', 'Alex', 'Karl'];
var ESC_KEYCODE = 27;
var template = document.querySelector('#picture').content.querySelector('a');
var picturesDomElement = document.querySelector('.pictures');
var uploadPicLabel = document.querySelector('#upload-file');
var uploadOverlay = document.querySelector('.img-upload__overlay');
var closeOverlay = document.querySelector('.img-upload__cancel');
var previewPic = document.querySelector('.img-upload__preview');
var effectBar = document.querySelector('.img-upload__effect-level');
var effectsFieldset = document.querySelector('.img-upload__effects');
var commentField = document.querySelector('.text__description');
var hashtagsField = document.querySelector('.text__hashtags');
var pinLevel = document.querySelector('.effect-level__pin');
var effectLevelLine = document.querySelector('.effect-level__line');
var effectLevelDepth = document.querySelector('.effect-level__depth');
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
var getRandomCommentator = function () {
var randomCommentator = {};
var randomComment = COMMENTS_LIST[Math.floor(Math.random() * COMMENTS_LIST.length)];
var randomName = NAMES_LIST[Math.floor(Math.random() * NAMES_LIST.length)];
randomCommentator.avatar = 'img/avatar-' + getRandomInt(1, 6) + '.svg';
randomCommentator.message = randomComment;
randomCommentator.name = randomName;
return randomCommentator;
};
var generateComments = function () {
var randomInt = getRandomInt(1, 26);
var comments = [];
for (var i = 0; i < randomInt; i++) {
comments.push(getRandomCommentator(6));
}
return comments;
};
var generateData = function (count) {
var data = [];
for (var i = 0; i < count; i++) {
data.push(
{
url: 'photos/' + (i + 1) + '.jpg',
likes: getRandomInt(1, 26),
comments: generateComments()
}
);
}
return data;
};
var renderPhotos = function (array) {
var fragment = document.createDocumentFragment();
for (var k = 0; k < array.length; k++) {
var element = template.cloneNode(true);
var item = array[k];
element.querySelector('.picture__comments').textContent = item.comments.length;
element.querySelector('.picture__likes').textContent = item.likes;
element.querySelector('.picture__img').src = item.url;
fragment.appendChild(element);
}
picturesDomElement.appendChild(fragment);
};
var onPopupEscPress = function (evt) {
if (evt.keyCode === ESC_KEYCODE && document.activeElement !== commentField && document.activeElement !== hashtagsField) {
closePicEditor();
}
};
var openPicEditor = function () {
uploadOverlay.classList.remove('hidden');
document.addEventListener('keydown', onPopupEscPress);
};
var closePicEditor = function () {
uploadOverlay.classList.add('hidden');
document.removeEventListener('keydown', onPopupEscPress);
};
uploadPicLabel.addEventListener('change', function () {
openPicEditor();
changeOverlay();
});
closeOverlay.addEventListener('click', function () {
closePicEditor();
});
var validateCommentLength = function () {
if (commentField.value.length > 140) {
commentField.style.border = 'thick solid red';
commentField.setCustomValidity('The message is too long');
} else {
commentField.style.border = '';
commentField.setCustomValidity('');
}
};
var changeOverlay = function (percentage) {
var checkedEffect = effectsFieldset.querySelector('input:checked');
var filterValue;
effectBar.classList.remove('hidden');
switch (checkedEffect.value) {
case 'chrome': filterValue = 'grayscale(' + percentage + ')'; break;
case 'sepia': filterValue = 'sepia(' + percentage + ')'; break;
case 'marvin': filterValue = 'invert(' + percentage + ')'; break;
case 'phobos': filterValue = 'blur(' + percentage + 'px)'; break;
case 'heat': filterValue = 'brightness(' + percentage + ')'; break;
default: {
filterValue = 'none';
effectBar.classList.add('hidden');
}
}
pinLevel.style.left = percentage + '%';
effectLevelDepth.style.width = percentage + '%';
previewPic.style.filter = filterValue;
};
pinLevel.addEventListener('mousedown', function (evt) {
evt.preventDefault();
var onMouseMove = function (moveEvt) {
moveEvt.preventDefault();
//get the total width of "effectLevelLine"
var effectTotalWidth = effectLevelLine.offsetWidth;
//get the start position of "effectLevelLine" from
var effectLevelStart = effectLevelLine.getBoundingClientRect().right;
//calculate the shift = effectLevelLine position - effect-level__pin moveEvt.clientX
var shift = effectTotalWidth - (effectLevelStart - moveEvt.clientX);
//calculate percent
var percentageLevel = shift / effectTotalWidth * 100;
//to make sure that the pin is inside the effectLevelLine
if (shift > 0 && shift < effectTotalWidth) {
//apply
pinLevel.style.left = percentageLevel + '%';
effectLevelDepth.style.width = percentageLevel + '%';
changeOverlay(percentageLevel);
}
};
var onMouseUp = function (upEvt) {
upEvt.preventDefault();
startCoords = upEvt.clientX;
document.removeEventListener('mousemove', onMouseMove);
document.removeEventListener('mouseup', onMouseUp);
};
document.addEventListener('mousemove', onMouseMove);
document.addEventListener('mouseup', onMouseUp);
});
var photos = generateData(25);
renderPhotos(photos);
effectsFieldset.addEventListener('click', changeOverlay);
effectsFieldset.addEventListener('click', function () {
changeOverlay(100);
});
commentField.addEventListener('change', validateCommentLength);
/**
* Шкала регулирования глубины фильтра
*/.effect-level {
position: absolute;
bottom: 10px;
left: 50%;
width: 495px;
height: 33px;
font-size: 12px;
line-height: 42px;
text-align: center;
color: #ffffff;
white-space: nowrap;
background-color: rgba(0, 0, 0, 0.6);
border-radius: 33px;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.effect-level__value {
display: none;
}
.effect-level__line {
position: absolute;
top: 50%;
right: 20px;
left: 20px;
height: 5px;
font-size: 0;
background-color: rgba(255, 231, 81, 0.4);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.effect-level__pin {
position: absolute;
top: 50%;
left: 20%;
z-index: 1;
width: 18px;
height: 18px;
margin: -9px 0 0;
background-color: #ffe753;
border-radius: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
cursor: move;
}
.effect-level__depth {
position: absolute;
width: 20%;
height: 100%;
background-color: #ffe753;
}<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Кекстаграм</title>
<style>
</style>
</head>
<body>
<main>
<!-- Фильтрация изображений от других пользователей -->
<section class="img-filters img-filters--inactive container">
<h2 class="img-filters__title visually-hidden">Фильтр фотографий</h2>
<form class="img-filters__form" action="index.html" method="get" autocomplete="off">
<button type=button class="img-filters__button img-filters__button--active" id="filter-popular">Популярные</button>
<button type=button class="img-filters__button" id="filter-new">Новые</button>
<button type=button class="img-filters__button" id="filter-discussed">Обсуждаемые</button>
</form>
</section>
<!-- Контейнер для изображений от других пользователей -->
<section class="pictures container">
<h2 class="pictures__title visually-hidden">Фотографии других пользователей</h2>
<!-- Поле для загрузки нового изображения на сайт -->
<section class="img-upload">
<div class="img-upload__wrapper">
<h2 class="img-upload__title visually-hidden">Загрузка фотографии</h2>
<form class="img-upload__form" id="upload-select-image" method="post" enctype="multipart/form-data" autocomplete="off">
<!-- Изначальное состояние поля для загрузки изображения -->
<fieldset class="img-upload__start">
<input type="file" id="upload-file" class="img-upload__input visually-hidden" name="filename" required>
<label for="upload-file" class="img-upload__label img-upload__control">Загрузить</label>
</fieldset>
<!-- Форма редактирования изображения -->
<div class="img-upload__overlay hidden">
<div class="img-upload__wrapper">
<div class="img-upload__preview-container">
<!-- Изменение размера изображения -->
<fieldset class="img-upload__scale scale">
<button type="button" class="scale__control scale__control--smaller">Уменьшить</button>
<input type="text" class="scale__control scale__control--value" value="55%" title="Image Scale" name="scale" readonly>
<button type="button" class="scale__control scale__control--bigger">Увеличить</button>
</fieldset>
<!-- Предварительный просмотр изображения -->
<div class="img-upload__preview">
<img src="img/upload-default-image.jpg" alt="Предварительный просмотр фотографии">
</div>
<!-- Изменение глубины эффекта, накладываемого на изображение -->
<fieldset class="img-upload__effect-level effect-level">
<input class="effect-level__value" type="number" name="effect-level" value="20">
<div class="effect-level__line">
<div class="effect-level__pin" tabindex="0">Кнопка изменения глубины эффекта фотографии</div>
<div class="effect-level__depth">Глубина эффекта фотографии</div>
</div>
</fieldset>
<!-- Кнопка для закрытия формы редактирования изображения -->
<button type="reset" class="img-upload__cancel cancel" id="upload-cancel">Закрыть</button>
</div>
<!-- Наложение эффекта на изображение -->
<fieldset class="img-upload__effects effects">
<ul class="effects__list">
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-none" value="none">
<label for="effect-none" class="effects__label">
<span class="effects__preview effects__preview--none">Превью фото без эффекта</span>
Оригинал
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-chrome" value="chrome">
<label for="effect-chrome" class="effects__label">
<span class="effects__preview effects__preview--chrome">Превью эффекта Хром</span>
Хром
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-sepia" value="sepia">
<label for="effect-sepia" class="effects__label">
<span class="effects__preview effects__preview--sepia">Превью эффекта Сепия</span>
Сепия
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-marvin" value="marvin">
<label for="effect-marvin" class="effects__label">
<span class="effects__preview effects__preview--marvin">Превью эффекта Марвин</span>
Марвин
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-phobos" value="phobos">
<label for="effect-phobos" class="effects__label">
<span class="effects__preview effects__preview--phobos">Превью эффекта Фобос</span>
Фобос
</label>
</li>
<li class="effects__item">
<input type="radio" class="effects__radio visually-hidden" name="effect" id="effect-heat" value="heat" checked>
<label for="effect-heat" class="effects__label">
<span class="effects__preview effects__preview--heat">Превью эффекта Зной</span>
Зной
</label>
</li>
</ul>
</fieldset>
<!-- Добавление хэш-тегов и комментария к изображению -->
<fieldset class="img-upload__text text">
<input class="text__hashtags" name="hashtags" placeholder="#хэш-тег">
<textarea class="text__description" name="description" placeholder="Ваш комментарий..."></textarea>
</fieldset>
<!-- Кнопка для отправки данных на сервер -->
<button type="submit" class="img-upload__submit" id="upload-submit">Опубликовать</button>
</div>
</div>
</form>
</div>
</section>
<!-- Здесь будут изображения других пользователей -->
</section>
<!-- Полноэкранный показ изображения -->
<section class="big-picture overlay hidden">
<h2 class="big-picture__title visually-hidden">Просмотр фотографии</h2>
<div class="big-picture__preview">
<!-- Просмотр изображения -->
<div class="big-picture__img">
<img src="img/logo-background-3.jpg" alt="Девушка в купальнике" width="600" height="600">
</div>
<!-- Информация об изображении. Подпись, комментарии, количество лайков -->
<div class="big-picture__social social">
<div class="social__header">
<img class="social__picture" src="img/avatar-1.svg" alt="Аватар автора фотографии" width="35" height="35">
<p class="social__caption">Тестим новую камеру! =)</p>
<p class="social__likes">Нравится <span class="likes-count">356</span></p>
</div>
<!-- Комментарии к изображению -->
<div class="social__comment-count">5 из <span class="comments-count">125</span> комментариев</div>
<ul class="social__comments">
<li class="social__comment">
<img class="social__picture" src="img/avatar-4.svg" alt="Аватар комментатора фотографии" width="35" height="35">
<p class="social__text">Мега фото! Просто обалдеть. Как вам так удалось?</p>
</li>
<li class="social__comment">
<img class="social__picture" src="img/avatar-3.svg" alt="Аватар комментатора фотографии" width="35" height="35">
<p class="social__text">Да это фоташоп!!!!!!!!</p>
</li>
</ul>
<!-- Кнопка для загрузки новой порции комментариев -->
<button type="button" class="social__comments-loader comments-loader">Загрузить еще</button>
<!-- Форма для отправки комментария -->
<div class="social__footer">
<img class="social__picture" src="img/avatar-6.svg" alt="Аватар комментатора фотографии" width="35" height="35">
<input type="text" class="social__footer-text" placeholder="Ваш комментарий...">
<button type="button" class="social__footer-btn" name="button">Отправить</button>
</div>
</div>
<!-- Кнопка для выхода из полноэкранного просмотра изображения -->
<button type="reset" class="big-picture__cancel cancel" id="picture-cancel">Закрыть</button>
</div>
</section>
</main>
<footer class="page-footer container">
<div class="page-footer__wrapper">
<div class="page-footer__copyright copyright">
<a class="copyright__link copyright__link--image" href="https://htmlacademy.ru/intensive/javascript"><img src="img/htmla-logo.svg" width="130" height="45" alt="HTML Academy"></a>
<p>Сделано в <a class="copyright__link copyright__link--text" href="https://htmlacademy.ru/intensive/javascript">HTML Academy</a> © 2018</p>
</div>
<ul class="page-footer__contacts contacts">
<li><a href="https://twitter.com/htmlacademy_ru" class="contacts__link contacts__link--twitter">Twitter</a></li>
<li><a href="https://www.instagram.com/htmlacademy/" class="contacts__link contacts__link--instagram">Instagtam</a></li>
<li><a href="https://www.facebook.com/htmlacademy" class="contacts__link contacts__link--facebook">Facebook</a></li>
<li><a href="https://vk.com/htmlacademy" class="contacts__link contacts__link--vk">VK</a></li>
</ul>
</div>
</footer>
<!-- Шаблон изображения случайного пользователя -->
<template id="picture">
<a href="#" class="picture">
<img class="picture__img" src="" width="182" height="182" alt="Случайная фотография">
<p class="picture__info">
<span class="picture__comments"></span>
<span class="picture__likes"></span>
</p>
</a>
</template>
<!-- Сообщение с ошибкой загрузки изображения -->
<template id="error">
<section class="error">
<div class="error__inner">
<h2 class="error__title">Ошибка загрузки файла</h2>
<div class="error__buttons">
<button type="button" class="error__button">Попробовать снова</button>
<button type="button" class="error__button">Загрузить другой файл</button>
</div>
</div>
</section>
</template>
<!-- Сообщение об успешной загрузке изображения -->
<template id="success">
<section class="success">
<div class="success__inner">
<h2 class="success__title">Изображение успешно загружено</h2>
<button type="button" class="success__button">Круто!</button>
</div>
</section>
</template>
<!-- Экран загрузки изображения -->
<template id="messages">
<div class="img-upload__message img-upload__message--loading">Загружаем...</div>
</template>
<script src="js/main.js"></script>
</body>
</html>关于javascript - 试图让图钉在我的鼠标之后移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56723755/