Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.07.2013, 16:08
Аспирант
Отправить личное сообщение для Alim Посмотреть профиль Найти все сообщения от Alim
 
Регистрация: 03.07.2013
Сообщений: 31

!!!! Изменение цвета при скролле SOS!!!
В общем вся проблема в том что скрипт некорректно работает во время скролла

т.е во время скролла цвета блоков не меняются

а вся идея в том чтобы цвета плавно менялись во время скроллинга

http://learn.javascript.ru/play/EGRaKb



<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="admin" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <title>Untitled - 1</title>
    <style>
   .active{
        
    }
dbody {
	min-height: 750px;
}
    .body div{
        display: block;
        text-align: center;
        border: 10px solid #000;
        height: 250px;
        width: 70%;
        padding-top: 200px;
    }
    .menu{
        position: fixed;
        right: 20px;
        top: 20px;
        border: 2px solid #000;
    }
    </style>
</head>
<body>
<ul class="menu">
	<li><a href="#1">11111</a></li>
	<li><a href="#2">22222</a></li>
	<li><a href="#3">33333</a></li>
	<li><a href="#4">44444</a></li>
	<li><a href="#5">55555</a></li>
	<li><a href="#6">66666</a></li>
</ul>
<div class="body">
<a name="1" ></a><br /><div id="f1">1</div>
<a name="2" ></a><br /><div id="f2">2</div>
<a name="3" ></a><br /><div id="f3">3</div>
<a name="4" ></a><br /><div id="f4">4</div>
<a name="5" ></a><br /><div id="f5">5</div>
<a name="6" ></a><br /><div id="f6">6</div>
</div>
<script>

$(document).ready(function(){
    var link = window.location.hash.replace("#","");
    $('.body a[name="'+link+'"]').next().next().addClass('active');
    $('.menu a').click(function(){
    var _name = $(this).attr("href");            
    document.location.href = _name;
    location.reload();      
});});
$(function() {
$(window).scroll(function(){
    

var distanceTop1 = $('#f1').offset().top - 450;
var distanceTop2 = $('#f2').offset().top - 450;
var distanceTop3 = $('#f3').offset().top - 450;
var distanceTop4 = $('#f4').offset().top - 450;
var distanceTop5 = $('#f5').offset().top - 450;
var distanceTop6 = $('#f6').offset().top - 450;

if  ($(window).scrollTop() > distanceTop1){
$('#f2,#f3,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f1').animate({ backgroundColor: "green"}, 500);}
else
$('#f1').stop(true).animate({ backgroundColor: "none" }, 500);

if  ($(window).scrollTop() > distanceTop2){
$('#f1,#f3,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f2').animate({ backgroundColor: "green"}, 500);}
else
$('#f2').stop(true).animate({ backgroundColor: "none" }, 500);

if  ($(window).scrollTop() > distanceTop3){
$('#f2,#f1,#f4,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f3').animate({ backgroundColor: "green"}, 500);}
else
$('#f3').stop(true).animate({ backgroundColor: "none" }, 500);

if  ($(window).scrollTop() > distanceTop4){
$('#f2,#f3,#f1,#f5,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f4').animate({ backgroundColor: "green"}, 500);}
else
$('#f4').stop(true).animate({ backgroundColor: "none" }, 500);

if  ($(window).scrollTop() > distanceTop5){
$('#f2,#f3,#f4,#f1,#f6').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f5').animate({ backgroundColor: "green"}, 500);}
else
$('#f5').stop(true).animate({ backgroundColor: "none" }, 500);

if  ($(window).scrollTop() > distanceTop6) {
$('#f2,#f3,#f4,#f5,#f1').stop(true).animate({ backgroundColor: "none"}, 500);
$('#f6').animate({ backgroundColor: "green"}, 500);
}
else
$('#f6').stop(true).animate({ backgroundColor: "none" }, 500);
});
});

</script>
</body>
</html>


ПОМОГИТЕ!!!

Последний раз редактировалось Alim, 04.07.2013 в 20:51.
Ответить с цитированием
  #2 (permalink)  
Старый 04.07.2013, 16:54
Аспирант
Отправить личное сообщение для Alim Посмотреть профиль Найти все сообщения от Alim
 
Регистрация: 03.07.2013
Сообщений: 31

Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2013, 17:25
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Чет там кода слишком много. Удали дубли, а то вломы разбираться..
Ответить с цитированием
  #4 (permalink)  
Старый 04.07.2013, 17:41
Аспирант
Отправить личное сообщение для Alim Посмотреть профиль Найти все сообщения от Alim
 
Регистрация: 03.07.2013
Сообщений: 31

danik.js,
В принципе весь код слизан отсюда http://dnzl.ru/view_post.php?id=188

Только вот это сам кое-как нацарапал (ну почти сам) и с этим кодом вроде бы проблем нет
$(document).ready(function () {
        var link = window.location.hash.replace("#", "");
        $('.body a[name="' + link + '"]').next().next().addClass('active');
        $('.menu a').click(function () {
          var _name = $(this).attr("href");
          document.location.href = _name;
          location.reload();
        });
      });


Без дублей

$(function () {

        $(window).scroll(function () {


          var distanceTop1 = $('#f1').offset().top - 450;

          if ($(window).scrollTop() > distanceTop1) {
         
            $('#f1').animate({
              backgroundColor: "green"
            }, 500);
          } else $('#f1').stop(true).animate({
            backgroundColor: "none"
          }, 500);
        });
      });

Последний раз редактировалось Alim, 04.07.2013 в 18:20.
Ответить с цитированием
  #5 (permalink)  
Старый 04.07.2013, 18:51
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

а в логи ошибки валятся?

или может условие не выполняется..
выведите в консоль результаты при скроле:

...
var distanceTop1 = $('#f1').offset().top - 450;
 console.log(distanceTop1);
console.log(($(window).scrollTop() > distanceTop1) ? 'условие выполнилось' : 'условие не выполнилось');
if ($(window).scrollTop() > distanceTop1) {
...
Ответить с цитированием
  #6 (permalink)  
Старый 04.07.2013, 19:36
Аспирант
Отправить личное сообщение для Alim Посмотреть профиль Найти все сообщения от Alim
 
Регистрация: 03.07.2013
Сообщений: 31

В принципе всё работает только надо было чтобы цвета блоков менялись при скроллинге а не только после его остановки

(в логах ошибок нет)
Ответить с цитированием
  #7 (permalink)  
Старый 04.07.2013, 19:37
Аспирант
Отправить личное сообщение для Alim Посмотреть профиль Найти все сообщения от Alim
 
Регистрация: 03.07.2013
Сообщений: 31

Может есть какая-то библиотека jq?
Ответить с цитированием
  #8 (permalink)  
Старый 04.07.2013, 19:57
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,745

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<style>
dbody {
	min-height: 750px;
}
div {
	text-align: center;
	border: solid 1px lightgreen;
	width: 80%;
	height: 200px;
	margin: 2em;
}
</style>
<div class="f">1</div>
<div class="f">2</div>
<div class="f">3</div>
<div class="f">4</div>
<div class="f">5</div>
<div class="f">6</div>
<script>
jQuery(function ($) {
	$(window).scroll(function(){
		$(".f").each(function() {
			if ($(this).offset().top < $(window).scrollTop() + 50) {
				$(this).animate({backgroundColor: "green"}, 200);
			} else {
				$(this).animate({backgroundColor: "none"}, 200);
			}
		});
	});
});
</script>

ну и подумай как это использовать, чтобы не было each
Ответить с цитированием
  #9 (permalink)  
Старый 04.07.2013, 20:21
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

http://www.xiper.net/examples/js-plu...lor/color.html
вот пример. но вот почему то jquery.color.js с jquery-1.10.1.min.js дружить не хочет..
Ответить с цитированием
  #10 (permalink)  
Старый 04.07.2013, 20:29
Аспирант
Отправить личное сообщение для Alim Посмотреть профиль Найти все сообщения от Alim
 
Регистрация: 03.07.2013
Сообщений: 31

Огромное спасибо за то что потрудились написать скрипт, однако надобно чтобы когда блок в центре экрана он окрашивался а у других цвет изчезал

(всё это дело для интернет магазина, для страницы представления товаров)

Вот уже целый день бьюсь головой об стену

ссори за то что не объяснил суть проблемы
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение фона при обновлении(рефреш) страницы Marker Events/DOM/Window 3 14.10.2013 11:40
Изменение цвета ссылок при наведении на другую облсть iHun jQuery 6 15.05.2012 18:52
Звуковой сигнал при изменении цвета MakapONE Firefox/Mozilla 0 21.07.2011 14:30
Динамическре изменение цвета ячейки по нажатию на ссылку Bagira Элементы интерфейса 7 08.04.2011 15:54
Изменение шапки при обновлении страницы nasty blood (X)HTML/CSS 0 07.04.2008 12:13