Эффект параллакса
Доброй ночи, форумчане! Очень нужна ваша помощь!
На сайте есть 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>
|
Цитата:
|
:write: плывут по небу облака дубль - 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>
|
| Часовой пояс GMT +3, время: 18:43. |