Ищу js раздвижения картинок

Последнее редактирование:
surfman написал(а):
А чем в 2017-м PNG-шки уже не в тему?
Нажмите для раскрытия...
Может тем, что PNG - это растр, а устройства сейчас имеют разную плотность экранов (не только телефоны но и экраны ПК) и никто не хочет видеть свой логотип мыльно-отстойным?

surfman написал(а):
так может на jquery есть готовый пример?
Просто я никогда с JS не вникал.
Нажмите для раскрытия...
там на 20 строк CSS и на 1 строку jQuery, если его уж очень хочеться использовать, что может быть более готовым?
 
Почему не работает?
Код: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script src="jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.middle').each(function(){
    $(this).data('width', $(this).width());
    $(this).css({width:0}).hide();
});

var middle = $('.middle');
$('.container').mouseenter(function() {  
    middle.css({display:'block'}).stop().animate({width:middle.data('width')});      
}).mouseleave(function() {
    middle.stop().animate({width:0}, function() {
        middle.hide();
    });
});
</script>

  
<style media="screen" type="text/css">
       .container {
  font-size: 8rem;
  display: table;
  margin: 0 auto;
}
.container > span {
  display:block;
  float: left;
  margin: 0 auto;
}

</style>

</head>
<body>

<div class="container">        
  <span class="middle">3</span>
  <span class="middle">2</span>
  <span class="first">1</span>
  <span class="middle">4</span>
  <span class="middle">5</span>
</div>

</body>
</html>
 
Скрипты > вниз
Основной скрипт > в document.ready
Для просмотра ссылки Войди или Зарегистрируйся

HTML: 
<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>
            .container {
                font-size: 8rem;
                display: table;
                margin: 0 auto;
            }
            .container > span {
                display: block;
                float: left;
                margin: 0 auto;
            }
            .container > .middle {
                display: none;
            }
        </style>
    </head>
    <body>
        <div class="container">    
            <span class="middle">3</span>
            <span class="middle">2</span>
            <span class="first">1</span>
            <span class="middle">4</span>
            <span class="middle">5</span>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(function () {
                $('.middle').each(function () {
                    $(this).data('width', $(this).width());
                    $(this).css({width: 0}).hide();
                });

                var middle = $('.middle');
                $('.container').mouseenter(function () {
                    middle.css({display: 'block'}).stop().animate({width: middle.data('width'), opacity: 1});
                }).mouseleave(function () {
                    middle.stop().animate({width: 0, opacity: 0}, function () {
                        middle.hide();
                    });
                });
            });
        </script>
    </body>
</html>
 
Последнее редактирование:
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху