какой класс jQuery я должен использовать в этом сценарии?

ProgramBox

какой класс jQuery я должен использовать в этом сценарии?

Post author:admin
Запись опубликована:27 апреля, 2023
Post category:Вопросы по программированию

#jquery #html #css

#jquery #HTML #css

Вопрос:

Я пытаюсь заставить изображения перемещаться справа налево одно за другим, когда мышь находится над кнопкой со стрелкой, но я не могу понять, как и какой класс jQuery я могу реализовать для выполнения точного результата.

введите описание изображения здесь

Мой код выглядит следующим образом:

 <div id="logos">
    <ul>
        <li style="float:left; margin-left:0px; margin-right:40px; "><img src="images/logoamp;typography_porjects.png" width="300" height="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <div class="clear"></div>
        <li style="float:left; margin-left:0px;"><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>
        <li><img src="images/logo-no-image.jpg" height="130" width="130" /></li>              
    </ul>
</div>

и код CSS является:

 #logos { width:1200px; float:right; }
#logos ul { list-style:none; float:right; overflow:hidden; }
#logos ul li { display:inline; margin:0 0 0 10px; }
.clear { height:30px; width:100%; clear:both; }

Ответ №1:

Создать этот эффект довольно просто, у вас есть два divs, один внешний div скрывает переполнение внутреннего div, который перемещается влево и «вправо», изменяя margin-left на отрицательное значение.

HTML

 <div id="hide_overflow">
<div id="moving_panel">
   <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <!-- [... etc ... ] !-->
   </ul>
</div>

Я использую <li> в приведенном выше примере, но вы можете легко изменить их на <img>

CSS

 li {
    background: lightgray;
    padding: 20px;
    margin: 5px;
    float: left;
}

#hide_overflow {
    overflow: hidden;
}

#hide_overflow, #moving_panel {
    height: 70px;
}

jQuery

 $('#left').click(function() {
    var $panel = $('#moving_panel');
    if (!parseInt($panel.css('margin-left'))) return;
    $panel.animate({
        marginLeft: ' =200'
    });
});

$('#right').click(function() {
    $('#moving_panel').animate({
        marginLeft: '-=200'
    });
});

Это очень простой пример для начала. Для jQuery доступно множество плагинов типа слайд-шоу изображений.

Скрипка: http://jsfiddle.net/garreh/9mYJk /

Ответ №2:

И вот мой взгляд на это. В нем нет анимации (ну, мотор — это одна строка!)

Код? Это:

 $('#arrow').click(function() {
    $('li:first').after($('li#arrow_li').prev());
});

Разметка (почти без изменений):

 <div id="logos">
    <ul>
        <li style="float:left; margin-left:0px; margin-right:40px; "><img src="http://www.ssvworks.com/images/arctic_cat_logo2.png" width="300" height="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li style="float:left; margin-left:0px;"><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://www.nytha.com/design/logo.png" height="130" width="130" /></li>
        <li><img src="http://homeflooringonline.com/product_image/Area/logo-rugs-auburn-universi836.jpg" height="130" width="130" /></li>
        <li id="arrow_li"><img src="http://china.keyence.com/products/sensors/fiberoptic/fsn/problem_arrow2.gif" height="130" width="60" id="arrow" /></li>
    </ul>
</div>

CSS (с незначительными изменениями):

 #logos { width:900px; position: absolute; left: 54px; }
#logos ul { list-style:none; float:right; overflow:hidden; }
#logos ul li { display:inline; margin:0 0 0 10px; }
.clear { height:30px; width:100%; clear:both; }

Ответ №3:

Вы должны использовать эффекты jQuery, как, например, этот:http://jqueryui.com/demos/effect /

Или используйте toogle с некоторыми преобразованиями изображения, такими как изменение координат верха и левого края изображения.