Javascript-форум - Показать сообщение отдельно - Помогите не бесплатно, нужен revers класса.

D0Gmatist · #1 (**permalink**) 22.09.2012, 15:31

<!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)

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