• Страница 1 из 1
  • 1
Модератор форума: Admin, Cибиря4ка, Komoff, Diana  
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Если вы пришли за помощью, то Вам сюда... » Проблема с js-кодом и прокруткой колесом мыши (Бегущая строка неправильно реагирует на скроллинг)
Проблема с js-кодом и прокруткой колесом мыши
Дата: Понедельник, 13.08.2012, 01:58 |
Сергей2
Рядовой
Группа: Зарегистрированные
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


Добрый день, Антон.

Прошу помощи - у самого не получается разобраться с кодом.

На сайте имеется бегущая строка.

К сайту подключен файл jquery-1.8.0.js

И ещё файл jquery.crawlLine.js. Вот его содержимое:
Code

/*******************************************************************************************/
// jquery.event.wheel.js - rev 1
// Copyright (c) 2008, Three Dub Media (http://threedubmedia.com)
// Liscensed under the MIT License (MIT-LICENSE.txt)
// http://opensource.org/licenses/mit-license.php
// Created: 2008-07-01 | Updated: 2008-07-14
// $(body).bind('wheel',function(event,delta){    alert( delta>0 ? "up" : "down" );    });
/*******************************************************************************************/
;(function($){$.fn.wheel=function(a){return this[a?"bind":"trigger"]("wheel",a)};$.event.special.wheel={setup:function(){$.event.add(this,b,wheelHandler,{})},teardown:function(){$.event.remove(this,b,wheelHandler)}};var b=!$.browser.mozilla?"mousewheel":"DOMMouseScroll"+($.browser.version<"1.9"?" mousemove":"");function wheelHandler(a){switch(a.type){case"mousemove":return $.extend(a.data,{clientX:a.clientX,clientY:a.clientY,pageX:a.pageX,pageY:a.pageY});case"DOMMouseScroll":$.extend(a,a.data);a.delta=-a.detail/3;break;case"mousewheel":a.delta=a.wheelDelta/120;if($.browser.opera)a.delta*=-1;break}a.type="wheel";return $.event.handle.call(this,a,a.delta)}})(jQuery);

/*
  * jQuery crawlLine v1.2.0
  * Copyright (c) 2008 Taranets Aleksey
  * email: aleks_tar@ukr.net
  * www: markup-javascript.com
  * Licensed under the MIT License:
  * http://opensource.org/licenses/mit-license.php
  */

jQuery.fn.crawlLine = function(_options){
  // defaults options
  var _options = jQuery.extend({
   speed:3,
   crawElement:'div',
   textElement:'p',
   hoverClass:'viewText'
  },_options);
   
  return this.each(function(){
   var _THIS = jQuery(this);
   var _el = $(_options.crawElement, _THIS).css('position','relative');
   var _text = $(_options.textElement, _THIS);
   var _clone = _text.css('whiteSpace','nowrap').clone();
   var _elWidth = 0;
   var _k = 1;
    
   // set parametrs *******************************************************
   var _textWidth = 0;
   _text.each(function(){
    _textWidth += $(this).outerWidth(true);
   });
   var _duration = _textWidth*50 / _options.speed;
   _el.append(_clone);
   _el.css('width',_textWidth*2);
    
      var animate = function() {
    _el.animate({left:-_textWidth}, {queue:false, duration:_duration*_k, easing:'linear', complete:function(){
     _el.css('left','0');
     _k=1;
     animate();
    }})
      }
      animate();
    
      _THIS.hover(function() {
    _el.stop();
    _THIS.addClass(_options.hoverClass);
      }, function(){
    _THIS.removeClass(_options.hoverClass);
    _k = (_textWidth + parseInt(_el.css('left')))/_textWidth;
    animate();
      })
   _THIS.bind('wheel',function(event,delta){
    var _marginScroll;
    if (delta<0) {
     _marginScroll = parseInt(_el.css('left')) - 20;
     _el.animate({left:_marginScroll}, {queue:false, duration:100, easing:'linear', complete:function(){
      _k = (_textWidth + parseInt(_el.css('left')))/_textWidth;
     }});
    } else {
     _marginScroll = parseInt(_el.css('left')) + 20;
     if (_marginScroll > 0) _marginScroll = 0;
     _el.animate({left:_marginScroll}, {queue:false, duration:100, easing:'linear', complete:function(){
      _k = (_textWidth + parseInt(_el.css('left')))/_textWidth;
     }});
    }
    return false;
   });
  });
}


Также на той странице, где расположена бегущая строка, есть такой код:
Code

<script type="text/javascript">
  $(document).ready(function(){
      $('.news').crawlLine({crawElement:'.move'});
  });
</script>


Сама же строка закодирована так:
Code

<div class="news">
  <div class="bg">
   <div class="move">
    <p>
     Приглашаем Вас посетить другие сайты, созданные учениками школы №162 г.о. Самара.           * * *           
    </p>
   </div>
  </div>
</div>


И ещё есть стили, заданные через css-файл.

Так вот, при наведении курсора на строку текст в ней должен останавливаться. Это происходит.
А вот если крутануть колесо мыши в одну сторону текст должен поехать (как бы вслед за колесом мыши) в ту же сторону, если крутануть в другую - текст должен поехать в другую сторону.
А у меня получается, что куда бы я колесо не крутил, текст всё равно движется только направо почему-то.

Я думал, что это связано с -20 и +20 в файле jquery.crawlLine.js. Но изменения знаков + и - ни к чему не привели.

Подскажите, пожалуйста, как можно решить проблему.
Адрес сайта (на всякий случай) smallrivers.narod.ru

Спасибо


 
Дата: Среда, 17.10.2012, 23:33 |
Группа: Гости





Искал решение, и напоролся на ответ в Вашем вопросе )) проблема в новой версии jquery - подключил 1.6.2 вместо 1.8.2, и всё заработало как надо.

 
Дата: Среда, 17.10.2012, 23:53 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Вот еще интересный слайдер типа бегущей строки: bxSlider

 
Скрипты и коды для юкоз - Форум аццкого кодера » Раздел для начинающих » Если вы пришли за помощью, то Вам сюда... » Проблема с js-кодом и прокруткой колесом мыши (Бегущая строка неправильно реагирует на скроллинг)
  • Страница 1 из 1
  • 1
Поиск:


Мобильная версия