jQuery範例 – Apple產品導覽介面製作

這次的jQuery應用範例要來試做的是Apple官方網頁上面有關產品介紹的介面。

Apple 官網產品介紹頁面截圖

主要用到的圖檔除了各產品的照片之外,就只有兩張,一個是底部的漸層,另一個是三角形箭頭。

另外當然是用到了jQuery和CSS的語法,CSS中有3.0的語法,所以圓角、陰影…等都不是圖檔構成,有想要研究的可以看看馬老師製作的範例檔下載)、範例檔2下載),大家看完後有任何問題歡迎在此回應,謝謝!

註:本範例所使用的圖片版權屬於Apple與Adobe公司所有。

You may also like...

11,850 Responses

  1. Lewisslund表示:

    Hi mates, its great article concerning teachingand entirely defined, keep it up all the time.
    Набір мішків мікроволокно S-BAG Classic Long Performance для пилососа Philips (883802103010)

  2. Jamesref表示:

    https://propeciaf.online/# cost propecia prices

  3. Marvinteabs表示:

    where buy clomid without a prescription buy cheap clomid without prescription can i buy clomid no prescription

  4. Thomasallop表示:

    order cytotec online: buy cytotec pills – buy cytotec over the counter

  5. Robertbup表示:

    http://propeciaf.online/# buy propecia prices

  6. Thomasallop表示:

    buy clomid without prescription: how can i get cheap clomid – where to buy generic clomid pills

  7. Thomasallop表示:

    buy cheap neurontin: generic neurontin 600 mg – neurontin 100

  8. Robertbup表示:

    https://lisinopril.club/# cost of lisinopril

  9. FobertWen表示:

    В нашем мире, где диплом – это начало отличной карьеры в любом направлении, многие стараются найти максимально быстрый путь получения образования. Факт наличия документа об образовании трудно переоценить. Ведь именно диплом открывает двери перед каждым человеком, который хочет вступить в профессиональное сообщество или учиться в каком-либо институте.
    Наша компания предлагает максимально быстро получить этот важный документ. Вы имеете возможность приобрести диплом, что является отличным решением для всех, кто не смог закончить обучение или потерял документ. диплом изготавливается аккуратно, с максимальным вниманием к мельчайшим элементам. На выходе вы получите полностью оригинальный документ.
    Преимущество данного подхода состоит не только в том, что можно быстро получить свой диплом. Весь процесс организовывается удобно и легко, с профессиональной поддержкой. Начав от выбора нужного образца диплома до точного заполнения личных данных и доставки в любой регион страны — все под абсолютным контролем опытных специалистов.
    В итоге, для тех, кто ищет максимально быстрый способ получения необходимого документа, наша компания может предложить отличное решение. Приобрести диплом – значит избежать долгого обучения и сразу переходить к своим целям: к поступлению в ВУЗ или к началу удачной карьеры.
    http://www.diploman-russia.ru

  10. Roberthaish表示:

    lisinopril pills 10 mg: lisinopril 30 – prinivil online

  11. Thomasallop表示:

    neurontin oral: neurontin 800 mg tablets best price – buying neurontin without a prescription

  12. Robertbup表示:

    http://cytotec.xyz/# purchase cytotec

  13. Marvinteabs表示:

    zestoretic medication lisinopril 10mg online zestril 5 mg

  14. StephenDeery表示:

    В современном мире, где диплом – это начало удачной карьеры в любой сфере, многие стараются найти максимально простой путь получения образования. Факт наличия официального документа переоценить невозможно. Ведь именно он открывает дверь перед людьми, стремящимися вступить в профессиональное сообщество или продолжить обучение в высшем учебном заведении.
    Предлагаем максимально быстро получить этот необходимый документ. Вы можете купить диплом, и это является удачным решением для человека, который не смог закончить обучение или утратил документ. Все дипломы изготавливаются с особой тщательностью, вниманием к мельчайшим элементам, чтобы на выходе получился продукт, полностью соответствующий оригиналу.
    Плюсы этого решения состоят не только в том, что можно максимально быстро получить диплом. Процесс организован комфортно, с нашей поддержкой. От выбора нужного образца диплома до грамотного заполнения персональных данных и доставки по стране — все будет находиться под полным контролем наших специалистов.
    Всем, кто ищет максимально быстрый способ получения требуемого документа, наша компания предлагает отличное решение. Купить диплом – значит избежать продолжительного обучения и не теряя времени перейти к своим целям: к поступлению в университет или к началу успешной карьеры.
    https://diploman-russia.ru/

  15. Roberthaish表示:

    cost generic propecia pill: buy cheap propecia prices – cost generic propecia tablets

  16. Roberthaish表示:

    cheap propecia without insurance: propecia order – propecia cheap

  17. Robertbup表示:

    http://lisinopril.club/# zestoretic 20 25mg

  18. Thomasallop表示:

    lisinopril 40 mg coupon: lisinopril brand name in usa – buy 40 mg lisinopril

  19. Thomasallop表示:

    cost of propecia no prescription: buying propecia – order cheap propecia without dr prescription

  20. Marvinteabs表示:

    buying cheap propecia without insurance order propecia without insurance buy generic propecia without insurance

  21. Thomasallop表示:

    cytotec abortion pill: buy cytotec in usa – buy cytotec

  22. Jamesref表示:

    https://propeciaf.online/# order propecia no prescription

  23. Robertbup表示:

    http://gabapentin.club/# medicine neurontin

  24. Thomasallop表示:

    zestril 2.5 mg tablets: zestril 20 mg cost – generic zestril

  25. Thomasallop表示:

    cytotec pills buy online: cytotec online – cytotec buy online usa

  26. Roberthaish表示:

    lisinopril 10 mg tablet cost: compare zestril prices – zestril drug

  27. Jamesref表示:

    http://lisinopril.club/# prinivil 10 mg tablet

  28. Robertbup表示:

    https://gabapentin.club/# neurontin generic

  29. Marvinteabs表示:

    buy cytotec over the counter Cytotec 200mcg price cytotec pills buy online

  30. Thomasallop表示:

    gabapentin 100mg: neurontin 500 mg – neurontin 200 mg capsules

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。