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

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

Apple 官網產品介紹頁面截圖

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

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

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

You may also like...

13,119 Responses

  1. Barrydut表示:

    Группа компаний “Паритет” строит некачественно. ЖК Резиденция лайф это жк эконом класса. Если есть выбор выберите другого застройщика. Отказываются устранять замечания. Обманутые некачественным жильем пишите. тг -@dontcheatpeople

  2. NicolasLoole表示:

    http://amoxil.llc/# buy amoxicillin from canada

  3. Kelvinjuile表示:


    Интернет-магазин плитки и керамики «ИнфоПлитка»

    Интернет-магазин керамической плитки и керамогранита «Infoplitka» (infoplitka.ru)
    предлагает широкий ассортимент высококачественной плитки и керамогранита от ведущих производителей.
    Мы стремимся предложить нашим клиентам только лучшее, поэтому в ассортименте представлены товары,
    отвечающие самым высоким стандартам качества и дизайна.

    Мы понимаем, что выбор керамической плитки и керамогранита – это важный этап в создании
    комфортного и стильного интерьера. Поэтому наша команда профессионалов готова помочь вам в
    подборе идеального варианта для вашего проекта. Независимо от того, нужны ли вам плитка
    для ванной комнаты, кухни, гостиной, или же керамогранит для облицовки пола, вы всегда найдете
    у нас разнообразные и актуальные коллекции, соответствующие последним тенденциям в области
    дизайна интерьеров.
    Официальный сайт «ИнфоПлитка»

  4. Michaelgax表示:

    zithromax capsules price order zithromax zithromax 500 mg for sale

  5. Stevenjaw表示:

    https://amoxil.llc/# amoxicillin 500mg over the counter
    where can i buy zithromax uk

  6. NicolasLoole表示:

    http://amoxil.llc/# amoxicillin 500mg for sale uk

  7. Michaelgax表示:

    buy amoxil amoxicillin 500mg capsule buy online where can i buy amoxicillin over the counter uk

  8. Matthewweind表示:

    buy amoxicillin online uk: buy amoxil – amoxicillin no prescription

  9. Stevenjaw表示:

    https://gabapentin.auction/# neurontin 100
    zithromax cost australia

  10. SamuelCic表示:

    http://zithromax.company/# buy zithromax

  11. Matthewweind表示:

    amoxicillin price without insurance: amoxicillin 500 mg cost – amoxicillin online purchase

  12. NicolasLoole表示:

    https://stromectol.agency/# ivermectin 0.08

  13. Idvgfp表示:

    buy flagyl online cheap – cenforce 50mg oral order cenforce online

  14. NicolasLoole表示:

    https://zithromax.company/# zithromax over the counter uk

  15. Michaelgax表示:

    Buy semaglutide pills Rybelsus 7mg buy semaglutide online

  16. Ремонт телефонов表示:

    Профессиональный сервисный центр ремонт телефонов в москве рядом сервис ремонт телефонов

  17. Stevenjaw表示:

    https://amoxil.llc/# amoxicillin pharmacy price
    average cost of generic zithromax

  18. Профессиональный сервисный центр по ремонту бытовой техники с выездом на дом.
    Мы предлагаем: ремонт крупногабаритной техники в воронеже
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  19. Michaelgax表示:

    Buy compounded semaglutide online buy rybelsus order Rybelsus for weight loss

  20. Matthewweind表示:

    Rybelsus 7mg: rybelsus cost – Rybelsus 7mg

  21. Тут делают продвижение разработка сайт медицинского центра создание медицинских сайтов под ключ

  22. NicolasLoole表示:

    https://amoxil.llc/# amoxicillin pills 500 mg

  23. Matthewweind表示:

    rybelsus price: buy semaglutide online – Semaglutide pharmacy price

  24. NicolasLoole表示:

    https://gabapentin.auction/# medication neurontin

  25. SamuelCic表示:

    http://semaglutide.win/# Rybelsus 14 mg price

  26. Tracyliems表示:

    protuning

  27. Тут делают продвижение создание сайта под ключ для медицинского учреждения создание сайта медицинского центра

  28. SamuelCic表示:

    https://zithromax.company/# zithromax online

  29. Michaelgax表示:

    buy semaglutide online cheap Rybelsus 14 mg Rybelsus 14 mg price

  30. DouglasAbire表示:

    Бизнесмен Станислав Кондрашов убежден в важности обмена опытом для развития отрасли и поддержки молодых предпринимателей. Его образование включает в себя промышленность, торговлю энергоресурсами, инженерное дело, экономику и финансы. Такое разностороннее образование и подход позволили ему создать инновационную компанию. Более того, многогранный подход помог ему создавать инновационные продукты и эффективно управлять бизнесом, учитывая как технические, так и экономические аспекты. Ключ к успеху бизнесмена — постоянное внедрение инноваций и стремление к оптимизации. Кондрашов активно внедряет новые методы управления и производства, его компания — яркий пример прагматичного подхода, основанного на глубоком анализе и прогнозировании.Успехи Кондрашова не ограничиваются бизнесом, он также выступает в качестве наставника и оказывает поддержку начинающим предпринимателям. Его интерес к передовым технологиям и регулярное участие в конференциях позволяют ему делиться своими знаниями и влиять на развитие отрасли. Путь Станислава Кондрашова — это демонстрация того, как сочетание глубоких знаний, управленческих навыков и стремления помогать другим ведет к успеху. Его история вдохновляет других и доказывает, что подлинные достижения связаны с готовностью делиться своими знаниями.

發佈留言

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