Перейти к содержимому


Как Сделать, Чтобы При Наведении На Товар Из Каталога, Он Немного Двигался


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 3

#1 m-ya-v

m-ya-v

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 193 сообщений

Отправлено 28 Ноябрь 2014 - 17:17

Добрый день, подскажите, пожалуйста, как сделать, чтобы при наведении на товар из каталога, он немного двигался, тем самым показывая, что кликают на него

#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 29 Ноябрь 2014 - 02:53

В шаблоне HTML найдите:
<ul>
					{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li class="cat-item">
							<a href="{catalog.URL}"
							  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
							  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
							>{catalog.NAME}</a>
						  </li>
						{% ENDIF %}
					  {% ENDFOR %}
					{% ENDIF %}
					</ul>

замените на:
<ul class="leftmenu">
				  <li class="categories"><h2><a href="{CATALOG_URL}" class="indexPage">Каталог товаров</a></h2>
					<ul id="cats-menu">
					{%IFNOT catalog_empty %}
					  {% FOR catalog %}
						{% IFNOT catalog.HIDE %}
						  <li class="cat-item cat-level{catalog.LEVEL}">
							<a href="{catalog.URL}" {% IF catalog.CURRENT %}class="selected"{% ENDIF %}><span>{catalog.NAME}</span></a>
						  </li>
						{% ENDIF %}
					  {% ENDFOR %}
					{% ENDIF %}
					</ul>

также найдите и удалите:
<script type="text/javascript" src="{JAVASCRIPT_BUG_HUNTING_URL}"></script>

и в конец main.js добавьте:
$(document).ready(function()
{
  $(".leftmenu > li > h2").wrap("<div class='zagol' />");
  slide("#cats-menu", "+=8", "-=8", 150, .8);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
  // creates the target paths
  var list_elements = navigation_id + " li.cat-item";
  var link_elements = list_elements + " a span";
 
  //alert(link_elements);
 
  // initiates the timer used for the sliding animation
  var timer = 0;
  delay = 0;
 
  var orig_margin;
  // creates the slide animation for all list elements
  $(navigation_id + " a span").each(function(i)
  {
  var id = $(this).attr('id');
  setTimeout( '$("#'+id+'").animate({ paddingLeft: "+=8" }, 200); $("#'+id+'").animate({ paddingLeft: "-=8" }, 200);', delay );
  delay += 20;
   
  /* 
	orig_margin = $(this).css("margin-left");   
	//right_state = 0;   
	// margin left = - ([width of element] + [total vertical padding of element])
	$(this).css("margin-left","-180px");
	// updates timer
	timer = (timer*multiplier + time);
	$(this).animate({ marginLeft: "-15px" }, timer);
	$(this).animate({ marginLeft: "0px" }, timer);
	$(this).animate({ marginLeft: "-15px" }, timer);
  */
  });
  // creates the hover-slide effect for all link elements	
  $(navigation_id + " a").each(function(i)
  {
	$(this).hover(
	function()
	{
	  $(this).find('span').animate({ paddingLeft: pad_out }, 150);
	  //$(this).css({paddingLeft: '100px'});
	},   
	function()
	{
	  $(this).find('span').animate({ paddingLeft: pad_in }, 150);
	});
  });
}


#3 m-ya-v

m-ya-v

    Продвинутый пользователь

  • Пользователи
  • PipPipPip
  • 193 сообщений

Отправлено 01 Декабрь 2014 - 11:47

Добрый день, ничего не получилось...
Заменить надо вот это из шаблона Сияние:
{%IFNOT catalog_empty %}
  {% FOR catalog %}
{% IFNOT catalog.HIDE %}
  <li class="cat-item">
<a href="{catalog.URL}"
  {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("20")}px"{% ENDIF %}
  {% IF catalog.CURRENT %}class="selected"{% ENDIF %}
>{catalog.NAME}</a>
  </li>
{% ENDIF %}
  {% ENDFOR %}
{% ENDIF %}
</ul><br />

И удаление этой строки: <scripttype="text/javascript"src="{JAVASCRIPT_BUG_HUNTING_URL}"></script>   Разве потом она не будет нужна, если я хочу сделать карусель на странице товара?

#4 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 03 Декабрь 2014 - 04:23

Пожалуйста, опишите подробнее что именно у вас не получилось? Приведенная вами (удаляемая строка) не влияет на работу другого кода, в частности реализации карусели.




Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных