⑴ 怎麼用react實現網站頁面類似swiper的效果
通過Bootstrap框架的學習，動畫製作，BOM和DOM：微信場景應用 項目開發步驟講解，使用HTML標簽對網頁進行簡單的排版，bower的安裝以及常用命令，JSON數據格式，常用API和Touch模塊的詳解
通過Swiper插件的學習，React開發WebAPP案例，AJAX、屬性等知識、調試技巧講解，React組件的嵌套，新增標簽：WebAPP開發
第四階段 React的入門到精通 通過對React的學習，基於效果圖通過html+css完成符合W3C標準的HTML頁面
第二階段 Javascript入門到精通 JavaScript基礎課程 JavaScript變數，為web前端的學習打下良好基礎，移動端開發，音頻和視頻的嵌入、3D變換，對象，能夠快速高效的微信場景應用 Swiper插件簡介，正則表達式和表單數據驗證，掌握用H5+CSS3開發移動端應用的方法 CSS3新增屬性，按鈕常用樣式的學習
移動端應用實戰 移動端項目實戰一，常見功能的新老實現方式對比
常用移動端框架 通過Zepto框架的學習，動畫框架的學習，掌握用React快速開發移動端應用的方法 React的背景和原理。 解網站運行的原理及相關概念，ReactJS開發混合APP案例
nodejs&bower&gulp 學習自動化構建前端項目的一些知識 nodejs環境搭建以及常用命令，使用Photoshop完成切圖效果，表單新增元素和屬性；javascript條件語句，以及事件處理的學習
JavaScript高級課程 使用JavaScript操作Cookie，各種事件和動畫方法，數據類型的學習，盒子模型，React組件生命周期，JSONP，能夠快速高效的開發移動端應用 Bootstrap框架簡介，常用API學習，前端優化學習，DOM操作，柵格系統，關鍵詞，常用插件的學習
第三階段 HTML5+CSS3新特性 通過HTML5新增特性的學習階段 HTML的入門到精通 學習HTML的標簽，React組件狀態。 HTML5與之前html的區別，字元串，2D，Canvas標簽，Ajax非同步數據傳輸技術
jQuery入門到精通 jQuery基礎課程 jQuery選擇器，響應式媒體查詢：響應式網站開發
移動端項目實戰一，能夠快速高效的開發移動端WebAPP Zepto框架簡介，React組件屬性，表格；
移動端項目實戰二，和流行的網頁特效製作
jQuery高級課程 jQuery插件的封裝，開發中遇到問題收集、答疑。
HTML+CSS網頁布局 學習DIV+CSS的基礎知識，能夠用DIV+CSS完成帶交互的企業網站的布局 CSS常用屬性和高級技巧，websocket，掌握H5新增特性用法，新增移動端事件
通過CSS3新增特性的學習，表單，掌握網頁布局技巧
⑵ wap產品設計跟web產品設計有什麼區別
首先，糾正一個常識性錯誤。我們常把移動網頁設計叫做：Wap。其實，Wap全稱叫做無線應用協議，是一個使移動用戶使用無線設備隨時使用互聯網的信息和服務的開放的規范。還有人把移動網頁叫做WebApp，其實我們大部分的網站都能叫做WebApp，並不僅僅局限於移動網頁，還包括PC網站。正確的名字應該是「移動網頁」，這樣比較能夠准確地概括手機端的網頁設計。
因為手機自身的一些特性，所以移動網頁對比 Native App 和 PC 端網頁，有一些固有的特點。概括起來主要有以下幾點：
1、使用場景不同；
移動網頁的訪問大部分是通過搜索引擎和直接輸入網址進入的，更多是為了瀏覽信息，以及滿足及時性（比如匯率換算、異地天氣、新聞閱讀）的需求，所以留存較低。
2、可展示空間小；
除了移動設備本身屏幕較小以外，還因為瀏覽器大部分具有地址欄和導航欄，進一步占據了屏幕空間。
3、操作不便；
這個特性其實是由於可展示空間小引起的，因為展示空間較小。大部分瀏覽器將一些「新建標簽頁」、「前進」、「後退」的操作給隱藏了起來。用戶需要更多步驟才能達成一些操作。H5火爆起來以後，這樣的現象在微信中更為明顯。
4、交互方式不同；
因為手機的性能問題，一些App上的特效並不能在移動網頁上復現，即使能復現，特效也不會平滑，用戶體驗比較差。所以，這就決定了移動網頁設計需要不同的交互方式，也有不同的關注點。
根據以上四個特點，我總結出了做移動網頁需要注意的四個原則：
1、理清產品主流程；
因為使用場景的不同，用戶在移動網頁上做的事更為特定。這就需要在做產品設計的時候，理清產品的主流程，刪減不必要的功能；讓用戶順暢的完成目標。另外，我們要看到因為移動網頁本身特點造成留存低，所以需要在明顯位置設置
Native App 下載入口，將用戶導入 App 中。
2、頁面設計以簡約為主；
因為用戶目標比較明顯，以及受屏幕大小限制。所以頁面設計以簡約為主，配合色彩，突出重點信息。
3、更加註重全局導航；
WebApp 應用場景非常多樣，最典型的就是在微信內置瀏覽器。在這樣的情況下，導航的設計就特別重要。每個頁面都要能到達 WebApp 上任意一個頁面，步驟可以多點，但是一定要有路徑。
4、減少特效，考慮頁面載入速度;
採用「點擊」這種最普通的交互方式，盡量減少不必要的效果及元素，突出主要信息的同時還可以加快頁面載入速度。
⑶ 開發內容型WebApp，有哪些H5前端框架可以用
Bootstrap是目前最流行的前端開發框架，最新出來的Bootstrap3提出移動優先，Bootstrap框架主要針對的是桌面端市場，在布局、版式、控制項、特效方面都非常讓人滿意，能極大豐富界面效果，方便前端工程師開發，目前主流的Firefox, Chrome, Opera, Safari, IE8+瀏覽器都能夠很好的兼容，在框架擴展方面，隨著 Bootstrap 的廣泛使用，擴展插件和組件也非常豐富，涉及顯示組件、兼容性、圖表庫等各個方面。
Vue.js 是一套構建Web界面的漸進式框架，是目前唯一提供支持混合預處理器，對CLl,vdom,JSX等業界認可的理念能夠完美的實現。非常受業界移動開發者的喜愛，大型互聯網公司都在使用，如阿里巴巴，餓了么等。
AngularJS是一款優秀的前端JS框架，旨在簡化前端應用程序的開發。它能快速的構建企業級的web應用。目前比較流行的Bootstrap和ionic都是基於AngularJS。 AngularJS很小，只有60K，兼容主流瀏覽器，與 jQuery 配合良好。
⑷ web app 頁面切換特效怎樣實現
使用jQuery Mobile開發Web App-頁面切換動畫 android
jQuery Mobile包含一組基於CSS3的過渡動畫（又稱轉場效果），可以應用在任何頁面或page組件切換。jQuery Mobile默認對頁面切換和返回按鈕設置了滑動（slide）效果。
要設定一個特定過渡效果，只需要在鏈接上添加一個data-transition屬性，可以使用以下屬性值：
<a data-transition="pop">I'll pop</a>
jQuery Mobile提供了6種切換動畫：slide(滑動)、slideup(向上滑動)、slidedown(向下滑動)、pop(拋出)、fade(淡入淡出)和flip(3D翻轉)。動畫效果見這里。
注意：flip效果在大多數android瀏覽器上不能被正確渲染，因為缺少對3d css transform的支持。不幸的是android並沒有忽略flip效果，而是使用水平翻轉來替代。所以建議在android完美支持之前謹慎使用flip效果。
此外，你可以使用data-direction=」reverse」來設定反向的過渡效果，比如對slide效果（從右往左）使用data-direction=」reverse」則會變成從左往右，對pop效果（從小到大拋出）使用data-direction=」reverse」則會變成從大到小消失。
今天老總跟我們聊天，說了很多技術的東西，有很多關於線程和內存的內容，憑我現在的水平，不理解其說的內容，以後要在這方面多加註意些，注重性能優化。
在軟體行業，要實時跟上軟體發展的進程。老總有個比喻，是這樣的。菜市場每天都有很多新鮮的菜進入，如果你抱著一捆不新鮮的菜來買，即使你人緣再好，老主顧也會離你而去，更別說其他。
⑸ 前端開發中常用到的js特效有哪些
HTML5 DOM 選擇器
// querySelector() 返回匹配到的第一個元素var item = document.querySelector('.item');console.log(item);// querySelectorAll() 返回匹配到的所有元素，是一個nodeList集合var items = document.querySelectorAll('.item');console.log(items[0]);1234567
阻止默認行為
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.preventDefault){ // w3c方法 阻止默認行為
event.preventDefault();
} else{ // ie 阻止默認行為
event.returnValue = false;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.preventDefault();
});1234567891011121314151617
阻止冒泡
// 原生jsdocument.getElementById('btn').addEventListener('click', function (event) { event = event || window.event； if (event.stopPropagation){ // w3c方法 阻止冒泡
event.stopPropagation();
} else{ // ie 阻止冒泡
event.cancelBubble = true;
}
}, false);// jQuery$('#btn').on('click', function (event) { event.stopPropagation();
});1234567891011121314151617
滑鼠滾輪事件
$('#content').on("mousewheel DOMMouseScroll", function (event) {
// chrome & ie || // firefox
var delta = (event.originalEvent.wheelDelta && (event.originalEvent.wheelDelta > 0 ? 1 : -1)) || (event.originalEvent.detail && (event.originalEvent.detail > 0 ? -1 : 1));
if (delta > 0) {
// 向上滾動
console.log('mousewheel top');
} else if (delta < 0) { // 向下滾動
console.log('mousewheel bottom');
}
});123456789101112
檢測瀏覽器是否支持svg
function isSupportSVG() {
var SVG_NS = 'http://www.w3.org/2000/svg'; return !!document.createElementNS &&!!document.createElementNS(SVG_NS, 'svg').createSVGRect;
}
// 測試console.log(isSupportSVG());1234567
檢測瀏覽器是否支持canvas
function isSupportCanvas() {
if(document.createElement('canvas').getContext){ return true;
}else{ return false;
}
}// 測試，打開谷歌瀏覽器控制台查看結果console.log(isSupportCanvas());12345678910
檢測是否是微信瀏覽器
function isWeiXinClient() {
var ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}// 測試alert(isWeiXinClient());1234567891011
jQuery 獲取滑鼠在圖片上的坐標
$('#myImage').click(function(event){
//獲取滑鼠在圖片上的坐標
console.log('X：' + event.offsetX+'\n Y:' + event.offsetY);
//獲取元素相對於頁面的坐標
console.log('X：'+$(this).offset().left+'\n Y:'+$(this).offset().top);
});1234567
驗證碼倒計時代碼
<!-- dom --><input id="send" type="button" value="發送驗證碼">12
// 原生js版本var times = 60, // 臨時設為60秒
timer = null;
document.getElementById('send').onclick = function () {
// 計時開始
timer = setInterval(function () {
times--; if (times <= 0) {
send.value = '發送驗證碼';
clearInterval(timer);
send.disabled = false;
times = 60;
} else {
send.value = times + '秒後重試';
send.disabled = true;
}
}, 1000);
}
// jQuery版本var times = 60,
timer = null;
$('#send').on('click', function () {
var $this = $(this); // 計時開始
timer = setInterval(function () {
times--; if (times <= 0) {
$this.val('發送驗證碼');
clearInterval(timer);
$this.attr('disabled', false);
times = 60;
} else {
$this.val(times + '秒後重試');
$this.attr('disabled', true);
}
}, 1000);
});2122
常用的一些正則表達式
//匹配字母、數字、中文字元
/^([A-Za-z0-9]|[\u4e00-\u9fa5])*$/
//驗證郵箱
/^\w+@([0-9a-zA-Z]+[.])+[a-z]{2,4}$/
//驗證手機號
/^1[3|5|8|7]\d{9}$/
//驗證URL
/^http:\/\/.+\./
//驗證身份證號碼
/(^\d{15}$)|(^\d{17}([0-9]|X|x)$)/
//匹配中文字元的正則表達式
/[\u4e00-\u9fa5]/
//匹配雙位元組字元(包括漢字在內)
/[^\x00-\xff]/
js時間戳、毫秒格式化
function formatDate(now) {
var y = now.getFullYear(); var m = now.getMonth() + 1; // 注意js里的月要加1
var d = now.getDate(); var h = now.getHours();
var m = now.getMinutes();
var s = now.getSeconds(); return y + "-" + m + "-" + d + " " + h + ":" + m + ":" + s;
}
var nowDate = new Date(2016, 5, 13, 19, 18, 30, 20);
console.log(nowDate.getTime()); // 獲得當前毫秒數: 1465816710020console.log(formatDate(nowDate));123456789101112131415
js限定字元數（注意：一個漢字算2個字元）
<input id="txt" type="text">//字元串截取function getByteVal(val, max) {
var returnValue = ''; var byteValLen = 0; for (var i = 0; i < val.length; i++) { if (val[i].match(/[^\x00-\xff]/ig) != null) byteValLen += 2; else byteValLen += 1; if (byteValLen > max) break;
returnValue += val[i];
} return returnValue;
}
$('#txt').on('keyup', function () {
var val = this.value; if (val.replace(/[^\x00-\xff]/g, "**").length > 14) { this.value = getByteVal(val, 14);
}
});12345678910111213141516171819
js判斷是否移動端及瀏覽器內核
var browser = {
versions: function() {
var u = navigator.userAgent;
return {
trident: u.indexOf('Trident') > -1, //IE內核
presto: u.indexOf('Presto') > -1, //opera內核
webKit: u.indexOf('AppleWebKit') > -1, //蘋果、谷歌內核
gecko: u.indexOf('Firefox') > -1, //火狐內核Gecko
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動終端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android
iPhone: u.indexOf('iPhone') > -1 , //iPhone
iPad: u.indexOf('iPad') > -1, //iPad
webApp: u.indexOf('Safari') > -1 //Safari
};
}
}
if (browser.versions.mobile() || browser.versions.ios() || browser.versions.android() || browser.versions.iPhone() || browser.versions.iPad()) {
alert('移動端');
}21
之前我用過一個檢測客戶端的庫 覺得挺好用的，也推薦給大家 叫 device.js，大家可以 Googel 或 網路
GItHub倉庫地址：https://github.com/matthewhudson/device.js
getBoundingClientRect() 獲取元素位置
//它返回一個對象，其中包含了left、right、top、bottom四個屬性var myDiv = document.getElementById('myDiv');var x = myDiv.getBoundingClientRect().left;
var y = myDiv.getBoundingClientRect().top;
// 相當於jquery的： $(this).offset().left、$(this).offset().top // js的：this.offsetLeft、this.offsetTop123456
HTML5全屏
function fullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}}
fullscreen(document.documentElement);12345678910111213
⑹ 有沒有簡單的生成APP的方法
最簡單生成app的方法就是使用h5寫一個移動端的頁面，然後外邊放一個webview
這就是最簡單的webapp，現在很多的APP都是採用類似的技術製作的
⑺ 網上下載的帶特效的jquery插件怎麼用
項目的webapp下創建一個目錄，比方起名叫jquery，
在jquery下面建立js、css、images三個目錄，然後分別把對應的js文件放到js下、css文件放到css下，images/*放到images下。
在你要使用的頁面頭部追加對三個js的引用。
然後把插件例子中<script text="text/javascript">$(function(){****};</script>這部分放到這個頁面的頭部，ok。
⑻ jquery特效如何添加到現有網站
<script src="js/jquery.js"></script>
<script src="js/index.js"></script>
<link rel="stylesheet" href="css/shopping_trolley.css" type="text/css" />
⑼ web前端開發需要學習什麼知識
首先對於Web前端初學者而言，HTML和CSS是需要掌握的內容。
HTML稱為超文本標記語言，是一種標識性的語言。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。
CSS層疊樣式表是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。
(9)webapp特效擴展閱讀：
例如，在網上商店中，用戶反復觀察和選擇商品，購買商品，瀏覽一系列網頁，收集所需信息，支付相應費用，最後下訂單，也可以是「軟體升級向導」，指導用戶完成下載和安裝新軟體的過程，也可以是基於Intranet的報價或銷售報告生成工具。
所有這些均不同於「標准」的Web網站。 常規網站使用一系列菜單或導航欄在預定路徑中漫遊該網站。 但是，成為Web應用程序不僅僅是下級控制的導航器。 在網站上自由漫遊時，可以進行無狀態和匿名訪問，但是通常不接受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
web前端學習內容
這個學習的8個階段按照順序學習就是可以的，希望可以幫到你。