① web前端開發這種特效有人會做嗎 急！！！
第一種叫做視差滾動，第二種叫做輪播。
主要是滾到相應頁面的話會有動畫吧，動畫是用Css3的animation寫的
② 想學web前端設計，該怎麼入門
Web前端入門首先要從基礎的內容學起，優就業的Web前端課程第一階段設置為HTML5+CSS3，HTML是一種標記語言，能夠實現Web頁面並在瀏覽器中顯示。HTML5作為HTML的最新版本，引入了多項新技術，大大增強了對於應用的支持能力，使得Web技術不再局限於呈現網頁內容。
CSS是層疊樣式表，是一種用來表現HTML(標准通用標記語言的一個應用)或XML(標准通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS3是CSS技術的升級版本，主要包括盒子模型、列表模塊、超鏈接方式、語言模塊、背景和邊框、文字特效、多欄布局等模塊。
雖然說Web前端相比其他後端編程語言學習難度低一些，但是自學的話還是有一定困難的，自學的話首先學習路線、時間安排都是需要提前制定出來的，再有就是自學的話遇到問題很難及時的解決，在學習效果上來說不會很好，所以還是不推薦大家去自學。
③ Web前端開發一般學習些什麼課程
您好，web前端的學習路線分為以下8個階段：
階段1.前端核心基礎
HTML +_CSS核心、JavaScript基礎語法、JavaScript面向對象、JavaScript DOM和BOM編程、jQuery框架
階段2.HTML5 + CSS3 + 移動端核心
HTML5新特性、Canvas專列、CSS3新特性、CSS3進階、CSS3實例演練
階段3.移動端
移動端核心、移動端適配、移動端特效
階段4.伺服器端
伺服器端開發、資料庫操作、前後端交互核心、微信公眾號開發
階段5.JavaScript高級
JavaScript基礎深入剖析、JavaScript面向對象深入講解、JavaScript非同步編程、JavaScript函數式編程、JavaScript設計模式
階段6.前端必備
性能優化、版本控制工具、模塊化、項目構建工具
階段7.高級框架
React框架基本使用、React框架進階、Vue框架基本使用、Vue框架進階、Vue源碼分析
階段8.小程序
原生小程序入門、原生小程序API使用、小程序框架Mpvue
④ 前端JavaScript中是不是學會了輪播圖就等於學會了JS
當然不是，js大著呢……輪播圖才到哪。。。
學好js要把基礎打牢，高級程序設計和權威指南要帶著看，不管能不能吃透徹，但最起碼得看過至少一遍吧。
想練習就做項目，項目驅動比自己自學可能會更有力。然後你可以繼續向下學習ES6、前端自動化、基本的node知識、webpack、一些前端框架等等（當然這些都是你對HTML，css很熟練的情況下，這些基礎一定要牢，不然一個最簡單的切圖都不會，那肯定不是個合格的前端。。。），一起進步一起學習，共勉~
⑤ fundation前端框架包含哪些功能
一個前端開發框架其實就是一系列產品化的HTML/CSS/JavaScript組件的集合，我們可以在設計中使用它們。前端開發框架有很多，其中有一些寫得很棒。為了大家的使用便利，下文列舉了目前最強大應用最廣泛的幾款前端開發框架。記住，這些框架並不僅僅是CSS 柵格之類的一些東西，它們包括的是整套的前端開發框架。
1. Bootstrap
Boostrap絕對是目前最流行用得最廣泛的一款框架。它是一套優美，直觀並且給力的web設計工具包，可以用來開發跨瀏覽器兼容並且美觀大氣的頁面。它提供了很多流行的樣式簡潔的UI組件，柵格系統以及一些常用的JavaScript插件。
Bootstrap是用動態語言LESS寫的，主要包括四部分的內容：
腳手架——全局樣式，響應式的12列柵格布局系統。記住Bootstrap在默認情況下並不包括響應式布局的功能。因此，如果你的設計需要實現響應式布局，那麼你需要手動開啟這項功能。
基礎CSS——包括基礎的HTML頁面要素，比如表格(table)，表單(form)，按鈕(button)，以及圖片(image)，基礎CSS為這些要素提供了優雅，一致的多種樣式。
組件——收集了大量可以重用的組件，如下拉菜單（dropdowns），按鈕組（button groups），導航面板（navigation control）——包括：tabs,pills,lists標簽，麵包屑導航（breadcrumbs）以及頁碼（pagination），縮略圖(thumbnails)，進度條（progress bars），媒體對象（media objects）等等。
JavaScript——包括一系列jQuery的插件，這些插件可以實現組件的動態頁面效果。插件主要包括模態窗口（modals），提示效果（tool tips），「泡芙」效果（popovers），滾動監控（scrollspy），旋轉木馬(carousel)，輸入提示(typeahead)，等等。
Bootstrap已經足夠強大，能夠實現各種形式的 Web 界面。為了更加方便地利用Bootstrap進行開發，很多工具和資源可以用來配合使用，下面列舉了其中的一部分工具和資源。
jQuery UI Bootstrap —— 對於jQuery和Bootstrap愛好者來說這是個非常好的資源，能夠把 Bootstrap的清爽界面組件引入到jQuery UI中。
jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主題類似，這是一個為jQuery Mobile建立的主題。如果你想讓用Bootstrap開發的網站在手機端也可以優雅訪問，那麼這個資源對你來說很方便易用。
Fuel UX —— 它為Bootstrap添加了一些輕量的JavaScript控制項。Fuel UI 安裝，修改，更新以及優化都很簡單方便。
StyleBootstrap.info —— Bootstrap提供了自己的幾種界面風格，StyleBootstrap提供了更多的配色選項，並且你可以給每個組件都應用不同的配色。
BootSwatchr —— 利用這個工具你可以立刻查看主題修改後的效果。對於每一次變動的效果，這個應用都會生成一個唯一的URL方便你與他人分享，你也可以在任意時刻修改你的主題。
Bootswatch —— 提供大量免費的Bootstrap主題。
Bootsnipp —— 在線前端框架交互組件製作工具，是一個供給設計師和開發者的基於Bootstrap HTML/CSS/JavaScript 架構的免費元素。
LayoutIt —— 通過界面拖放生成器簡便快捷地創建基於Bootstrap的前端代碼。通過拖放動作將Bootstrap風格的組件加入到你的個人設計里並且可以方便地修改他們的屬性，簡單便捷。
2. Fbootstrapp
Fbootstrapp基於Bootstrap並且提供了跟Facebook iframe apps和設計相同的功能。包含用於所有標准組件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導航等等，風格與Facebook類似。
3. BootMetro
BootMetro框架的靈感來自於Metro UI CSS，基於Bootstrap 框架構建，用於創建Windows 8 的Metro風格的網站。它包括所有Bootstrap的功能，並添加了幾個額外的功能，比如頁面平鋪，應用程序欄等等。
4. Kickstrap
Kickstrap是Bootstrap的一個變體。它基於Bootstrap，並在它的基礎上添加了許多app，主題以及附加功能。這使得這個框架可以單獨地用於構建網站，而不需要額外安裝什麼。你需要做的僅僅是把它放到你的網站上，然後用就可以了。
App 是一些頁面載入完成之後載入運行的JavaScript和CSS打包文件。默認載入的app有Knockout.js, Retina.js, Firebug Lite, and Updater，你也可以自行添加更多的app。
選擇不同的主題可以讓你的網站在眾多Bootstrap構建的類似網站中顯得與眾不同。
附加功能是一些用來擴展Bootstrap UI 庫的附件，它們的語法基本相同或者相似。
5. Foundation
Foundation 是一款強大的，功能豐富的並且支持響應式布局的前端開發框架，你可以通過Foundation快速創建原型，利用它所包含的大量布局框架，元素以及最優範例快速創建在各種設備上可以正常運行的網站以及app。Foundation在構建的時候秉承移動優先的策略，它擁有大量實用的語義化功能，並且使用Zepto類庫來取代jQuery，這樣可以帶來更好的用戶體驗，並且提高運行的速度。
Foundation擁有一套12列的靈活可嵌套的網格系統，你可以用它快速創建適應多種瀏覽設備的布局。它有很多的功能。它定義了很多的樣式，比如字體排版，按鈕，表單，以及多種多樣的導航控制項。它也提供了很多的CSS組件，例如操作面板（panels），價格表（price tables），進度條（progress bars），表格（tables）以及可以適應不同設備的可伸縮視頻（flex video）。與此同時，Foundation還包括了很多的JavaScript插件，如下拉菜單（dropdowns），joyride（網站功能引導插件），magellan（網站固定導航插件），orbit（支持觸摸的響應式圖片輪播插件），reveal（彈出框插件），sections（強大的tab插件）以及tooltips（工具提示）等。
Foundation框架還提供了很多有用的擴展。
模板（Stencils）——Foundation框架中的所有UI元素都有Omnigraffle stencils以及矢量PDF兩種格式的下載，你可以用它們來方便快捷的繪制線框圖和原型圖。
HTML模板 —— HTML模板可以方便地用來快速創建頁面布局。你所要做的僅僅是復製得到模板代碼，然後丟到頁面的標簽之間就好了。
圖標字體（Icon Fonts） —— 包含自定義圖標的一種網頁字體。
SVG 社交網路圖標（Social Icons）—— 一組不依賴解析度的社交網路圖標（可縮放矢量圖標）。
響應式表格——Foundation框架中響應式表格的實現機制是固定表格的左邊第一列，然後表格的其他列可以通過滾動條拖拉進行訪問。
關閉帆布布局（Off-Canvas Layouts）—— 這些布局可以允許一些網頁內容或者導航控制項在移動端設備上默認隱藏，當瀏覽屏幕變大或者用戶進行相應操作的時候這些內容再出現。當用戶進行相關操作的時候，網頁內容或者導航控制項將會滑動出現。
如你所見，對於web開發者以及設計師來說，Foundation就像是一個巨大的寶藏。在下載框架的時候，你可以自定義下載框架的內容。
6. GroundworkCSS
GroundworkCSS 是前端框架家族裡面新添的一款小清新框架。它是基於Sass和Compass的一個高級響應式的HTML5，CSS以及JavaScript工具包，可以用於快速創建原型並且建立在各種瀏覽設備上可以正常工作的網站和app。
GroundworkCSS擁有一個靈活，可嵌套的流式網格系統，方便你創建任何布局。這個框架有很多讓人印象深刻的功能，比如在平板以及移動端上的網格系統，當屏幕的寬度小於768或者480像素時，頁面中原本並列排版的表格列（grid column）會自動變為獨立的行，而不是折疊在一起。另一個很酷的功能是jQuery的響應式文本（ResponsiveText）插件，這個插件可以動態調整頁面文字的大小以適應瀏覽設備的屏幕大小。這個插件對於可伸縮的標題以及創建響應式表格的時候特別有用。
GroundworkCSS包含了大量的UI組件，如tabs、響應式數據表格導航、按鈕、表單、響應式導航控制項、tiles（一套替代radio按鈕以及其他默認表單元素的優雅組件）、工具提示、對話框、Cycle2（一款強大的，響應式的內容滑塊）以及其他很多的有用組件。它還提供了很多矢量社交網路圖標以及圖標字體。
你可以通過切換頁面上方的導航按鈕選擇不同的瀏覽設備要來查看這款框架的效果。通過這種方式，你可以測試在不同的瀏覽設備上各種組件的響應式布局情況。
GroundworkCSS的文檔寫的非常好，並且包含著很多的示例，為了讓你更快的上手，他還提供了多種響應式的模板。對於這款框架，唯一我可以想到的缺點就是不能自定義要下載的框架內容。
7. Gumby
Gumby 是一款基於Sass和Compass的簡單靈活並且穩定的前端開發框架。
它的流式-固定布局（fluid-fixed layout）可以根據桌面端以及移動設備的解析度自動優化要呈現的網頁內容。它支持多種網格布局，包括多列混雜的嵌套模式。Gumby提供兩套PSD的模板，方便你在12列和16列的網格系統上進行設計。
Gumby提供了一個功能豐富的UI工具包，包括按鈕，表單，移動端導航，tabs，跳轉鏈接（skip links），撥動開關（toggles and switches，可以方便快捷地切換元素的class，而不需要進行額外的js操作），抽屜功能（drawers），響應式圖片以及retina圖片等等。為了緊跟最近的設計潮流，Gumby的UI元素中還包括了Metro風格的扁平化設計，你也可以用Pretty風格的漸變設計，或者按照你的想法糅合兩種設計風格。該框架還提供了一套出眾的響應式，擁有獨立解析度的Entypo圖標，你可以在自己的web項目中盡情使用。
Gumby有一個很好自定義下載選擇器，你可以自行配置各個組件的顏色，並且按自己的需求方便地下載。
8. HTML KickStart
HTML Kickstart 是一款可以用來方便創建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干凈，符合標准以及跨瀏覽器兼容的代碼。
這款框架提供了多種樣式表，包括網格，排版，表單，按鈕，表格，列表以及一些跨瀏覽器兼容的web組件比如JavaScript的幻燈片功能，tabs，麵包屑導航，包含子菜單的菜單以及工具提示等等。
你可以使用99Lime UIKIT提供的UI組件來搭建你的產品線框圖。
9. IVORY
IVORY 是一款輕量，簡單但是強大的前端框架，可以用於320到1200像素寬度的響應式布局。它基於12列的響應式網格布局，包含表格，按鈕，表格，分頁，撥動開關，工具提示，手風琴，選項卡等網站中常用的組件和樣式。
當你需要一款輕量靈活，不需要額外的其他功能，並且適應不同瀏覽設備的框架時，IVORY是你最好的選擇。
10.Kube
最後，如果你的新項目需要一款實在的，不需要復雜的額外功能組件的，足夠簡單的框架，那麼 Kube 將會是你正確的選擇。Kube是一款最小化的，支持響應式的前端框架，它沒有強加的樣式設計，因此給了你充分的自由來開發自己的樣式表。它提供了一些web元素的基本樣式，比如網格，表單，排版，表格，按鈕，導航，鏈接以及圖片等等。
Kube框架包括一個簡潔的CSS文件用於方便地創建響應式布局，還包括了兩個JS文件來完成tab以及頁面的按鈕操作。如果你希望得到Kube最大化的靈活性以及個性化定製，那麼你可以下載開發者版本（developer version），這個版本包括了LESS文件（包括各種變數，mixins以及模塊）。
如何選擇一款優秀的前端開發框架？
可以根據以下評估標准：
將根據以下標准對這些框架進行評估：
學習曲線
針對簡單任務的開發效率
針對復雜、特殊任務的開發效率
依賴管理
代碼性能/安全優化調整的能力
平台升級/冗餘能力
在企業市場中的認同度
開發、使用SOAP和REST服務的復雜性
總結：
靈活運用框架，將會得到意想不到的效果。這個看怎麼靈活運用，有好的方案大家分享一下共同學習，進步。
學習前端，重在分享！
⑥ 請教用JQuery、javascript 淘寶網首頁的那個圖片輪播怎麼做出來的它的圖片是左右移動的，如何實現
⑦ 如何用Bootstrap製作輪播圖
Bootstrap是Twitter推出的一個用於前端開發的開源工具包，並沒有製作任何前端頁面的功能。
如果要實現輪播可以通過一下代碼實現：
<styletype="text/css">
*{padding:0;margin:0;list-style-type:none;}
body{background-color:#222222}
a,img{border:0;}
body{font:12px/180%Arial,Helvetica,sans-serif,"新宋體";}
/*demo*/
/*五張圖片在縮略圖時所顯示的位置調整*/
#demoli:nth-of-type(1)img{transform:translate(-210px);}
#demoli:nth-of-type(2)img{transform:translate(-180px);}
#demoli:nth-of-type(3)img{transform:translate(-380px);}
#demoli:nth-of-type(4)img{transform:translate(-450px);}
#demoli:nth-of-type(5)img{transform:translate(-320px);}
#demo{width:1160px;height:512px;margin:60pxauto0auto;}
#demoimg{width:820px;height:512px;max-width:820px;}
#demoli{float:left;position:relative;width:82px;height:100%;overflow:hidden;cursor:pointer;transition:0.5s;transform-origin:bottom;filter:alpha(opacity=50);opacity:0.5;}
#demoliimg{transition:1.2s;}
#demolia{display:block;}
#demolidiv{position:absolute;bottom:0;left:0;width:100%;background:#000;line-height:32px;filter:alpha(opacity=70);opacity:0.7;text-indent:2em;}
#demolidiva{color:#FFF;text-decoration:none;}
#demolidiva:hover{color:#F00;text-decoration:none;}
#demoli.active{cursor:pointer;transform:scale(1.02,1.08);z-index:3;width:820px;filter:alpha(opacity=100);opacity:1;}
#demoli.activeimg{transform:translate(0px);}
#demoli:nth-of-type(1){transform-origin:bottomleft;}
#demoli:nth-of-type(5){transform-origin:bottomright;}
</style>
<scriptsrc="js/jquery-1.8.2.min.js"></script>
<scripttype="text/javascript"src="js/jquery.indexSlidePattern.js"></script>
<scriptlanguage="javascript">
$(document).ready(function(e){
varopt = {
"speed" : "fast" , //變換速度,三速度可選slow,normal,fast;
"by" : "mouseover" , //觸發事件,click或者mouseover;
"auto" : true , //是否自動播放;
"sec" : 3000 //自動播放間隔;
};
$("#demo").IMGDEMO(opt);
});
</script>
</head>
<body>
<ulid="demo">
<liclass="active"><ahref="#"><imgsrc="images/1.png"/></a>
<div><ahref="#">Pictureinformation1</a></div>
</li>
<li><ahref="#"><imgsrc="images/2.png"/></a>
<div><ahref="#">Pictureinformation2</a></div>
</li>
<li><ahref="#"><imgsrc="images/3.png"/></a>
<div><ahref="#">Pictureinformation3</a></div>
</li>
<li><ahref="#"><imgsrc="images/4.png"/></a>
<div><ahref="#">Pictureinformation4</a></div>
</li>
<li><ahref="#"><imgsrc="images/5.png"/></a>
<div><ahref="#">Pictureinformation5</a></div>
</li>
</ul>
</div>
</body>
</html>
本案例使用的是jQuery，需要jquery.indexSlidePattern與jquery-1.8.2.min的jQuery庫！
⑧ 如何使用RecyclerView打造首頁輪播圖
對於一位合格的前端開發人員來說，首頁圖片輪播可謂是必會的基本功。那麼我們聊一聊如何用jquery封裝自己的輪播插件。 首先必須要聊到的jquery為我們提供的兩大擴展方法，$.fn和$.extend(),$.extend相當於為jQuery類（注意，JavaScript並沒有類
⑨ web前端開發小插件之swiper輪播圖
前端開發是現在比較火的一個職業，當然前端工程師的水平也是參差不齊，小編也是其中一員，技術還在努力提高中。在前端開發中經常會遇到要做輪播圖的時候，一般在網站首頁。網上有很多的輪播圖插件，小編要介紹的就是一款跨PC跟移動平台的輪播圖插件——swiper。
