Доброго дня ... помогите новичку
Встречал на сайтах такое решение по работе классов
К примеру есть горизонтальное скрол div окно 1000px (.scroll_forms) в этом окне отображаются пять div ячейка шириной 200px (.post), и у каждого окна, при наведении не которое, появляется дополнительная div ячейка (.post:hover .info) ... Так вот, суть в том что скрипт обрабатывает классы .info в .scroll_forms, но только те что находятся во второй половине окна .scroll_forms, и добавляет к классу .info к примеру класс revers что это дает в итоге Подскажите где можно про это почитать и посмотреть пример работы... Или скиньте сюда пример |
Цитата:
На них тебе могут показать варианты решений... |
Я вот находил код отвечающий за такое действие ... но не сильно понял что куда
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() }) }; |
Посмотри как в других темах делают нормальные тестовые примеры... ;)
|
та блин какой тестовый пример!!!
я сам прошу сцылу где про это можно почитать или посмотреть пример работы .. я такое ни делал .. и из какого места мне тебе пример взять или если кто сделает за бабосы то я только рад |
тестовый пример - упрощённый (только по сути решаемой задачи) пример нормально оформленного кода, также оформленный в теме с возможностью запуска [html run],
сделайте верстку, попробуйте наполнить функционалом, потом задавайте вопросы по тому, что не получается, а если хотите, чтобы за вас всё сделали => в раздел Работа |
<!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) Оплачу работу через вебмани ... |
<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> |
зачем так мудрёно .. для такого решения достаточна было мне сделать
<script type="text/javascript"> $(".info").slice(3).addClass("revers"); </script> но так как окно скрол ... то тут это не катит получится что у 1-3 класс не добавился а у 4-5 добавило проматываю скрол окно и 6-10 все с добавленным класом ( а надо что бы 5-7 не добавляло 9-10 добавило |
Так вы сами решили задачу? Чего не катит-то? эффект на картинках достигнут
|
Часовой пояс GMT +3, время: 21:57. |