нужна вспышка, как меню в JQuery - PullRequest
Новая
       1

нужна вспышка, как меню в JQuery

0 голосов
/ 22 декабря 2010

может помочь в разработке меню, как в следующем примере сайта в jquery http://www.templatemonster.com/flash-templates/27517.html

    <script src="script/jquery-1.4.4.min.js" type="text/javascript"></script>        
    <script type="text/javascript">
        $(function(){
            changesize();
            $("ul#selected li").click(function(){
                var selection=$(this).index();                                        
                var count = $("#selected").children().length;
                var mid=Math.floor(count/2)+1;
                var i;                   
                parseInt(mid);
                if(selection<mid)
                {
                  var  rotation=selection+mid;
                    for(i=1;i<=rotation;i++)
                        $('#selected li:first').appendTo('ul');
                        changesize();
                }                    
                else
                {

                    for(i=selection;i>=mid;i--)
                        {

                        $('#selected li:first').appendTo('ul');


                        }
                        changesize();
                }
        });

    });
    function changesize()
    {
        var height=80;
        var minheight=10;
        var count = $("#selected").children().length;
        var mid=Math.floor(count/2)+1;
        var i,divider,hv;
        for(i=1;i<=count;i++)
                    {
                        if(i<mid){divider=count-i;}
                        else if(i>mid){divider=(i-1);}
                        else
                            divider=1;
                        if(divider!=1)
                        hv=(height/minheight*count*4)/divider;
                        else
                            hv=height;                            
                        $('ul li:nth-child('+i+')').find('img').css('width', hv);

                    }
    }
    </script>
    <style type="text/css">
        ul li{float: left;list-style: none;margin:2px;margin-top: -5px;position: relative; }
        ul li img{position:relative;top: 0px;border: none; }
    </style>

    <ul id="selected">
        <li><a href="#"><img src="images/img1.gif" alt=""/></a></li>
        <li><a href="#"><img src="images/img2.gif" alt=""/></a></li>
        <li><a href="#"><img src="images/img3.gif" alt=""/></a></li>
        <li><a href="#"><img src="images/img4.gif" alt=""/></a></li>
        <li><a href="#"><img src="images/img5.gif" alt=""/></a></li>
        <li><a href="#"><img src="images/img6.gif" alt=""/></a></li>
        <li><a href="#"><img src="images/img7.gif" alt=""/></a></li>
    </ul>

Я выполнил 90% этой работы. Мне нужно добавить анимацию, пожалуйста, помогите мне

Ответы [ 2 ]

0 голосов
/ 22 декабря 2010

  1. Это будет включать в себя список элементов (думаю, ul) с каждым плавающим элементом. Ваша первая цель - создать горизонтальный список элементов или изображений.

  2. Следующим шагом будет дать контейнерам li несколько отрицательных полей, чтобы они перекрывались.

  3. Тогда вы дадите каждому li z-индекс (самый высокий - это передний элемент, затем уменьшающийся по мере продвижения).

  4. JavaScript был бы довольно простым, вы бы анимировали ширину и высоту тега или изображения (в зависимости от того, что вы использовали).

  5. Я включил код внизу; но элементы расширяют весь список. Добавьте немного прозрачности и найдите способ заставить элементы оставаться на своих местах, и вы получили это!

Альтернатива 1 : Вы могли бы немного пойти на компромисс (я знаю, что это не так, но это может сработать). Вы можете быть удовлетворены JQuery Fisheye (только один из многих).

Альтернатива 2: Вы можете потратить $ 65 и получить полную версию Flash;) 

<html>

<head>
    <title>Stack Overflow Example</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">            
        $(document).ready(function(){
            $(".monsterMenu li a img").mouseover(function(){
                $(this).stop().animate({width:138,height:138},300,function(){
                    $(this).animate({width:128,height:128});
                });
            });
        });
    </script>

    <style type="text/css">
        .monsterMenu{
            margin-left:64px;
            list-style:none;
        }
        .monsterMenu li{
            float:left;
            margin-left:-64px; /*64 is half of 128 (the image size)*/
        }
        .monsterMenu li a{
            position:relative;
        }
        .monsterMenu li a img{position:relative;}
        #mm1,#mm3{z-index:8;}
        #mm2{z-index:16;}
    </style>
</head>

<body>
    <ul class="monsterMenu">
        <li ><a id="mm1" href=""><img src="http://upload.wikimedia.org/wikipedia/commons/4/4d/Crystal_Clear_action_lock_-_pink.png"/></a></li>
        <li><a id="mm2" href=""><img src="http://upload.wikimedia.org/wikipedia/commons/0/09/Crystal_Clear_action_info.png"/></a></li>
        <li><a id="mm3" href=""><img src="http://upload.wikimedia.org/wikipedia/commons/f/fe/Crystal_Clear_app_browser.png"/></a></li>
    </ul>
</body>

0 голосов
/ 22 декабря 2010

Я думаю, вы могли бы попробовать этот учебник.

Создание меню вертикальной прокрутки с помощью CSS и jQuery

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...