Как изменять размеры картинки с помощью мыши на javascript?

Приветствую вас дорогие друзья! В этом уроке я покажу, как легко и просто можно изменять размеры картинки на веб странице!
Как изменять размеры картинки с помощью мыши на javascript

Изменять размеры картинки очень просто, для этого достаточно навести мышь на одну из сторон картинки (или к одному из углов), нажать и потянуть мышью!

Данный функционал можешь вам понадобиться, например, при создании приложения для проектирования или какого-нибудь графического редактора, где нужно изменять размеры изображений.

Стоит отметить, что данным способом можно изменять размеры не только изображения, но и любого другого объекта на странице!

В заголовке я умышленно упомянул слово “картинка” так как именно этот запрос имеет большую популярность, а значит, данный вопрос интересует многих.

Итак, к делу!

Первым делом необходимо подключить нужные библиотеки и стили:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

Теперь, нужно присвоить какой-нибудь идентификатор тому элементу, размеры которого мы хотим изменять – в моем случае в качестве элемент выступит картинка с идентификатором – “resize_image”:

 

<img id="resize_image" src="http://sergey-oganesyan.ru/wp-content/uploads/2016/01/planet.jpg">

 

Теперь, все что нужно сделать, так это произвести выборку нужного элемента (в данном случае по id) и повесить на него два метода:

<script>$(function(){$('#resize_image').draggable().resizable();});</script>

Этот код нужно разместить после выбранного элемента – лучше всего перед закрывающим тегом – “</html>”, чтобы успели загрузиться все элементы DOM.

Можно разместить и до элемента, обернув этот код в метод – “ready”.

Весь код целиком:

<!DOCTYPE html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

<title>Как изменять размеры картинки с помощью мыши - Seo блог sergey-oganesyan.ru</title>

<style>
#resize_image{
width: 407px;
height: 375px;
float: left;
}
</style>

</head>
<body>

	<img id="resize_image" src="http://sergey-oganesyan.ru/wp-content/uploads/2016/01/planet.jpg">

</body>
<script>$(function(){$('#resize_image').draggable().resizable();});</script>
</html>

Реальный пример.

Демонстрационный пример

Подписывайтесь на обновления и получайте новые уроки по javascript, на этом всё, пока!


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

  1. Umed пишет:

    хорошо очень

  2. Umed пишет:

    Я рад что на щель такой хороший справочник

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>