Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.04.2017, 21:51
Новичок на форуме
Отправить личное сообщение для AlekSay Посмотреть профиль Найти все сообщения от AlekSay
 
Регистрация: 23.04.2017
Сообщений: 8

Выджвижной блок
Покажите пожалуйста пример скрипта в котором при нажатии на кнопку выдвигался влево div блок
Ответить с цитированием
  #2 (permalink)  
Старый 23.04.2017, 22:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

AlekSay,
конечный результат в html с css можно увидеть?
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 23.04.2017, 22:42
Новичок на форуме
Отправить личное сообщение для AlekSay Посмотреть профиль Найти все сообщения от AlekSay
 
Регистрация: 23.04.2017
Сообщений: 8

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
		<title></title>
		<link type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	</head>
<style>
#block{
   position:absolute;
   left:300px;
   top:50px;
   width:100px;
   height:100px;
   background-color:black;
}
#button{
   position:absolute;
   top:200px;
   width:150px;
   height:100px;
   background-color:red;
}
</style>
<script type="text/javascript">
</script>
<body>
<div id="button"></div>
<div id="block"></div>
</body>
</html>


при нажатии на button block должен влево сдвинуться, а также при повторном нажатии block должен назад сдвинуться
Ответить с цитированием
  #4 (permalink)  
Старый 23.04.2017, 22:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

AlekSay,
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
<style>
#block{
  position:absolute;
  left:300px;
  top:50px;
  width:100px;
  height:100px;
  background-color:black;
  transition: left .8s ease-in-out;
}
#button{
  position:absolute;
  top:200px;
  width:150px;
  height:100px;
  background-color:red;
}
#block.anime{
  left: 0;
}

</style>
 <script>
$(function() {
    $("#button").on("click", function() {


        $('#block').toggleClass("anime");

})
});
  </script>
<body>
<div id="button"></div>
<div id="block"></div>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 23.04.2017, 23:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
<style>
#block{
  position:absolute;
  left:300px;
  top:50px;
  width:100px;
  height:100px;
  background-color:black;
}
#button{
  position:absolute;
  top:200px;
  width:150px;
  height:100px;
  background-color:red;
}
</style>
 <script>
$(function() {
    var n = 1;
    $("#button").on("click", function() {
        var left = 300 * (n^= 1)+"px";
        $('#block').animate({left : left}, 800);

})
});
  </script>
<body>
<div id="button"></div>
<div id="block"></div>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 23.04.2017, 23:35
Новичок на форуме
Отправить личное сообщение для AlekSay Посмотреть профиль Найти все сообщения от AlekSay
 
Регистрация: 23.04.2017
Сообщений: 8

Спасибо большое
Ответить с цитированием
  #7 (permalink)  
Старый 23.04.2017, 23:41
Новичок на форуме
Отправить личное сообщение для AlekSay Посмотреть профиль Найти все сообщения от AlekSay
 
Регистрация: 23.04.2017
Сообщений: 8

Сообщение от рони Посмотреть сообщение
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
<style>
#block{
  position:absolute;
  left:300px;
  top:50px;
  width:100px;
  height:100px;
  background-color:black;
}
#button{
  position:absolute;
  top:200px;
  width:150px;
  height:100px;
  background-color:red;
}
</style>
 <script>
$(function() {
    var n = 1;
    $("#button").on("click", function() {
        var left = 300 * (n^= 1)+"px";
        $('#block').animate({left : left}, 800);

})
});
  </script>
<body>
<div id="button"></div>
<div id="block"></div>
</body>
</html>
А это нормально, что оно срабатывает со второго клика
Ответить с цитированием
  #8 (permalink)  
Старый 23.04.2017, 23:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от AlekSay
что оно срабатывает со второго клика
??
Ответить с цитированием
  #9 (permalink)  
Старый 23.04.2017, 23:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

AlekSay,
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
<style>
#block{ color : hsla(0, 0%, 100%, 1);
  position:absolute;
  left:300px;
  top:50px;
  width:100px;
  height:100px;
  background-color:black;
}
#button{
  position:absolute;
  top:200px;
  width:150px;
  height:100px;
  background-color:red;
}
</style>
 <script>
$(function() {
    var n = 1, k = 0;
    $("#button").on("click", function() {
        var left = 300 * (n^= 1)+"px";
        $('#block').animate({left : left}, 800).text(++k);

})
});
  </script>
<body>
<div id="button"></div>
<div id="block"></div>
</body>
</html>
Ответить с цитированием
  #10 (permalink)  
Старый 24.04.2017, 21:38
Новичок на форуме
Отправить личное сообщение для AlekSay Посмотреть профиль Найти все сообщения от AlekSay
 
Регистрация: 23.04.2017
Сообщений: 8

Сообщение от рони Посмотреть сообщение
AlekSay,
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </head>
<style>
#block{ color : hsla(0, 0%, 100%, 1);
  position:absolute;
  left:300px;
  top:50px;
  width:100px;
  height:100px;
  background-color:black;
}
#button{
  position:absolute;
  top:200px;
  width:150px;
  height:100px;
  background-color:red;
}
</style>
 <script>
$(function() {
    var n = 1, k = 0;
    $("#button").on("click", function() {
        var left = 300 * (n^= 1)+"px";
        $('#block').animate({left : left}, 800).text(++k);

})
});
  </script>
<body>
<div id="button"></div>
<div id="block"></div>
</body>
</html>
На блоке счётчик кликов
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
при скроллинге блок исчезает avanesov89 Общие вопросы Javascript 0 19.03.2016 13:26
Ховер и появляющий блок Shuryga Элементы интерфейса 3 28.09.2015 14:39
Копирование блоков в блок maximus Events/DOM/Window 1 14.09.2013 19:40
как скрыть блок div по ключевому слову Sacred13 Элементы интерфейса 6 06.08.2013 19:13
Показать/скрыть блок Lelja_05 jQuery 10 01.07.2013 20:05