Форум

D0Gmatist · #1 (**permalink**) 21.09.2012, 14:03

Встречал на сайтах такое решение по работе классов
К примеру есть горизонтальное скрол div окно 1000px (.scroll_forms) в этом окне отображаются пять div ячейка шириной 200px (.post), и у каждого окна, при наведении не которое, появляется дополнительная div ячейка (.post:hover .info) ...

Так вот, суть в том что скрипт обрабатывает классы .info в .scroll_forms, но только те что находятся во второй половине окна .scroll_forms, и добавляет к классу .info к примеру класс revers

что это дает в итоге

Подскажите где можно про это почитать и посмотреть пример работы...
Или скиньте сюда пример

ksa · #2 (**permalink**) 21.09.2012, 14:36

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

Или скиньте сюда пример

Учись делать тестовые примеры сам.

На них тебе могут показать варианты решений...

D0Gmatist · #3 (**permalink**) 21.09.2012, 17:33

Я вот находил код отвечающий за такое действие ... но не сильно понял что куда

b.init = function() {
                        a(".image", c).mouseenter(function(h) {
                                var d = a(c).width(),
                                        e = a(window).width(),
                                        f = a(c).offset().left;
                                b.params.enableReverse === !0 && (e - (d + f) < 499 ? a(".xinfo", c).addClass("reverse") : a(".xinfo", c).removeClass("reverse"));
                                b.params.carouselMode && b.expandInfoMouseover(h);
                                h.stopPropagation()
                        }).mouseleave(function(a) {
                                a.stopPropagation()
                        })
                };

ksa · #4 (**permalink**) 21.09.2012, 21:05

Посмотри как в других темах делают нормальные тестовые примеры...

D0Gmatist · #5 (**permalink**) 21.09.2012, 23:22

та блин какой тестовый пример!!!
я сам прошу сцылу где про это можно почитать или посмотреть пример работы .. я такое ни делал .. и из какого места мне тебе пример взять

или если кто сделает за бабосы то я только рад

bes · #6 (**permalink**) 22.09.2012, 08:59

тестовый пример - упрощённый (только по сути решаемой задачи) пример нормально оформленного кода, также оформленный в теме с возможностью запуска [html run],
сделайте верстку, попробуйте наполнить функционалом, потом задавайте вопросы по тому, что не получается, а если хотите, чтобы за вас всё сделали => в раздел Работа

D0Gmatist · #7 (**permalink**) 22.09.2012, 18:49

<!DOCTYPE html>
<html>
<head>
  
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
 jQuery('#mycarousel').jcarousel({wrap: 'circular',scroll: 5});
});
</script>
  
<style type="text/css">
.jcarousel-skin-tango {
	width:1100px;
  height: 275px;
  margin:0 auto 0;
}

.jcarousel-skin-tango .jcarousel-container {
	width:1100px;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
  width: 1036px;
  padding: 0 32px;
}

.jcarousel-skin-tango .jcarousel-clip {
  overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
  width:  1030px;
  height: 274px;
  margin:5px 0;
	border-left:3px solid #ff9c2e;
	border-right:3px solid #ff9c2e;
	border-top:0px solid #ff9c2e;
	border-bottom:0px solid #ff9c2e;
}

.jcarousel-skin-tango .jcarousel-item {
  width: 200px;
  height: 275px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
	margin:0 3px 0 3px;
}

/**Horizontal_Buttons**/

.jcarousel-skin-tango .jcarousel-next-horizontal {
  position: absolute;
  top: 113px;
  right: 0;
  width: 32px;
  height: 54px;
  cursor: pointer;
  background: transparent url("http://dogmatist.nbr.by/templates/D0Gmatist/images/next-horizontal.png") no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
  left: 5px;
  right: auto;
  background-image: url("http://dogmatist.nbr.by/templates/D0Gmatist/images/prev-horizontal.png");
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
  background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
  background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
  cursor: default;
  background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
  position: absolute;
  top: 113px;
  left: 0;
  width: 32px;
  height: 54px;
  cursor: pointer;
  background: transparent url("http://dogmatist.nbr.by/templates/D0Gmatist/images/prev-horizontal.png") no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
  left: auto;
  right: 5px;
  background-image: url("http://dogmatist.nbr.by/templates/D0Gmatist/images/next-horizontal.png");
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
  background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
  background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
  cursor: default;
  background-position: -96px 0;
}  
  
.minipost {
  border:1px solid #ff9c2e;
  height:272px;
  width:198px;
}
  
.info {
  display:none;
}
  
.minipost:hover .info {
  position: absolute;
  display:block;
  width:350px;
  height:232px;
  background:#ccc;
  border:1px solid #ff9c2e;
  float:right;
  margin:40px 0 0 198px;
}
  
/* реверс класса */
.minipost:hover .revers {
  position: absolute;
  display:block;
  width:350px;
  height:232px;
  background:#ccc;
  border:1px solid #ff9c2e;
  float:right;
  margin:40px 0 0 -352px;
}

</style>
	
</head>

<body>
  

<ul id="mycarousel" class="jcarousel-skin-tango">

<li><div class="minipost"><div class="info"></div>1</div></li>
<li><div class="minipost"><div class="info"></div>2</div></li>
<li><div class="minipost"><div class="info"></div>3</div></li>
<li><div class="minipost"><div class="info"></div>4</div></li>
<li><div class="minipost"><div class="info"></div>5</div></li>
<li><div class="minipost"><div class="info"></div>6</div></li>
<li><div class="minipost"><div class="info"></div>7</div></li>
<li><div class="minipost"><div class="info"></div>8</div></li>
<li><div class="minipost"><div class="info"></div>9</div></li>
<li><div class="minipost"><div class="info"></div>10</div></li>
  
<!-- реврес класса -->
<script type="text/javascript">
    $(".info").addClass("revers");
</script>

</ul>


  
</body>
</html>

Так вот мне нужно чтобы

<script type="text/javascript">
    $(".info").addClass("revers");
</script>

применялся только к правой половине отображаемых (.minipost) в (.jcarousel-clip-horizontal)

Оплачу работу через вебмани ...

bes · #8 (**permalink**) 22.09.2012, 21:24

<style>
#tit {
	position: absolute;
	left: -999px;
	top: -999px;
	border: solid 1px orange;
	z-index: 100;
	width: 550px;
	height: 20px;
	background: lightgray;
	margin-top: 5px;
}
#list {
	white-space: nowrap;
}
#list li{
	display: inline-block;
	width: 200px;
	height: 200px;
	border: solid 2px green;
	margin: 10px;
}
</style>

<div id="tit"></div>

<ul id="list">
	<li>post 1
	<li>post 2
	<li>post 3
	<li>post 4
	<li>post 5
</ul>
  
<script>
window.onload = function () {
	var tit = document.getElementById('tit');
	var list = document.getElementById('list');
	var mas = [
	'text 1',
	'text 2',
	'text 3',
	'text 4',
	'text 5',
	];
	
	function index(elem) {
		var childs =  elem.parentNode.children;
		var len = childs.length;
		for (var i = 0; i < len; i++) {
			if (childs[i] == elem) {
				return i;
			} 
		}
		return -1;
	}
	
	list.onmouseover = function (e) {
		e = e || event;
		var target = e.target || e.srcElement;
		if (target.parentNode == this) {
			var i = index(target);
			tit.innerHTML = mas[i];
			var coords = target.getBoundingClientRect();
			tit.style.top = coords.top + 'px';
			if (i < 2) {
				tit.style.left = coords.right + 'px';
			} else {
				tit.style.left = coords.right - 550 + 'px';
			}
		}
	}
	
	list.onmouseout = function (e) {
		e = e || event;
		var target = e.target || e.srcElement;
			tit.style.top = '-999px';
			tit.style.left = '-999px';
	}

}
</script>

D0Gmatist · #9 (**permalink**) 22.09.2012, 22:00

зачем так мудрёно .. для такого решения достаточна было мне сделать

<script type="text/javascript">
$(".info").slice(3).addClass("revers");
</script>

но так как окно скрол ... то тут это не катит
получится что у 1-3 класс не добавился а у 4-5 добавило
проматываю скрол окно и 6-10 все с добавленным класом (
а надо что бы 5-7 не добавляло 9-10 добавило

bes · #10 (**permalink**) 22.09.2012, 22:10

Так вы сами решили задачу? Чего не катит-то? эффект на картинках достигнут

Форум

Справочник

Discord чат

Курсы javascript