Форум

sorokster · #1 (**permalink**) 18.03.2014, 04:36

Доброй ночи, форумчане! Очень нужна ваша помощь!
На сайте есть UI Slider

И есть блок в котором должна двигаться картинка, при изменении положения ползунка UI Slider.

Вот, пример, как должна двигаться картинка.

http://weblinc.github.io/jquery-parallax/index.htm

А вот код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script> 

<script type="text/javascript">

$(document).ready(function(){
    $( ".slider" ).slider({
 	    animate: true,
        range: "min",
        value: 325,
        min: 1,
        max: 1000,
	    step: 1,
              
	//Получаем значение и выводим его на странице
              	slide: function( event, ui ) {
                  		$( "#slider-result" ).html( ui.value );
              	},

	//Обновляем скрытое поле формы, так что можно передать данные с помощью формы
              	change: function(event, ui) { 
              		$('#hidden').attr('value', ui.value);
              	}
	});
        $("#slider_value").val($(".slider").slider("value"));
});
</script> 
<body>
<div class="container"></div>


<div class="slider"></div>
<div id="slider-result">325</div>

</body>

рони · #2 (**permalink**) 18.03.2014, 13:27

Сообщение от sorokster

есть блок в котором должна двигаться картинка

какой именно это блок? и где картинка?

рони · #3 (**permalink**) 18.03.2014, 13:51

плывут по небу облака дубль - 2

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/mint-choc/jquery-ui.css">
  <style>
 body {
    background-color: #28CDF6;
}
  	
  .slider { margin: 10px; }
  .container{
       position: relative;
       width: 100%;
       height: 500px;
       background-image:url('http://weblinc.github.io/jquery-parallax/bg2.png');
    }
 .container .container{
       background-image:url('http://weblinc.github.io/jquery-parallax/bg1.png');
    }
  	</style>

<script type="text/javascript">

$(document).ready(function(){
    $( ".slider" ).slider({
 	    animate: true,
        range: "min",
        value: 325,
        min: 1,
        max: 1000,
	    step: 1,

	//Получаем значение и выводим его на странице
              	slide: function( event, ui ) {
                  		$( "#slider-result" ).html( ui.value );
                        $('.container:first').css("background-position",ui.value/3+"px 0");
                        $('.container:last').css("background-position",ui.value+"px 0");
              	},

	//Обновляем скрытое поле формы, так что можно передать данные с помощью формы
              	change: function(event, ui) {
              		$('#hidden').attr('value', ui.value);
              	}
	});
        $("#slider_value").val($(".slider").slider("value"));
});
</script>
</head>



<body>
<div class="container"><div class="container"></div></div>
<div class="slider"></div>
<div id="slider-result">325</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript