㈠ 前端開發學習去哪裡
前端開發可以自學，也可以選擇口碑好、信譽佳的機構學。我有全套web前端視頻課資料可以發給你自學，課程是目前前沿的前端技能叫做web全棧工程師。
web全棧工程師5.0課程學習內容包括：
①計算機基礎以及PS基礎
②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）
③移動開發
④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）
⑤小程序開發
⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）
⑦就業拓展（網站SEO與前端安全技術）
如果打算線下學，你可以考察對比一下南京課工場、北大青鳥、中博軟體學院等開設有前端開開發專業的學校。記得下載全套web全棧工程師視頻課資料，祝你學有所成！望採納！
北大青鳥中博軟體學院web全棧課堂實拍
㈡ 前端特效工程師有前途嗎
web前端有廣闊的發展空間，app、小程序、移動端、pc端等都是需要前端技術的開發支持才能夠完成，技術門檻相對較低、需求量較大，薪資待遇良好。只要是互聯網端的客戶界面，就需要前端來製作完成，前端開發的編程量不大，但是需要部分編程，入門簡單，但是要學的深入需要一個過程。
Web前端招聘崗位
• 前端開發工程師、Web開發工程師、網頁開發工程師、HTML開發工程師...
• H5開發工程師、移動應用開發工程師、App開發工程師、小程序開發工程師...
• JS開發工程師、Vue.js開發工程師、Node.js開發工程師、前端架構師...
• 小游戲開發工程師、數據可視化開發工程師、WebGL開發工程師、WebVR開 發工程師、Web安全工程師...
在互聯網行業，前端有WEB前端、HTML前端等，隨著互聯網技術發展，就業方向也有很多。web前端的就業方向有web架構師、web前端工程師、HTML前端開發工程師、網頁設計師等等。
HTML前端開發
與Web前端開發不同的是，使用HTML5不僅僅可以開發前端，還有網頁游戲，手機APP，使用瀏覽器進行3D渲染等一系列建立在HTML5標准與搭載其標准瀏覽器上的開發，而未來可能會有更多的功能分支並入HTML5標准。web前端工程師
這個方向是目前從事Web前端開發的主要就業方向
Web架構師
薪資普遍比較高，技術要求高，掌握多種技能，包括：後端技術、DBA、Platform等等，甚至包括網站優化SEO技術。
數據方向
數據研發這個是在Web開發的基礎上用數據附能，懂可視化的一定是有前端能力的，懂hadoop的一定java要熟悉，屬於Web開發的拓展方向。
大前端方向
比如阿里，在大量實踐rn和weex;由於公司內部安卓/ios式微，一定程度上，前端把ios和安卓收編了，統稱大前端。
圖形學方向
前端自然是與圖形學有千絲萬縷的聯系，除了上面提到了可視化，還有相關3d引擎的開發工作。做這一行要求也非常高了，圖形學相關的演算法，3d引擎的開發，這都需要圖形學相關知識。
㈢ js特效寫的非常棒的網站有哪些，要做一個前端網站，想參考下
不要用js了，考慮一下vue和react的吧，餓了么有開源的的基於vue和react的模板，你可以參考一下
㈣ web前端主要學哪些去哪裡學好呢
前端前景是很不錯的，像前端這樣的專業還是一線城市比較好，師資力量跟得上、就業的薪資也是可觀的，學習前端可以按照路線圖的順序，
0基礎學習前端是沒有問題的，關鍵是找到靠譜的前端培訓機構，你可以深度了解機構的口碑情況，問問周圍知道這家機構的人，除了口碑再了解機構的以下幾方面：
1. 師資力量雄厚
要想有1+1>2的實際效果，很關鍵的一點是師資隊伍，你接下來無論是找個工作還是工作中出任哪些的人物角色，都越來越愛你本身的技術專業前端技術性，也許的技術專業前端技術性則絕大多數來自你的技術專業前端教師，一個好的前端培訓機構必須具備雄厚的師資力量。
2. 就業保障完善
實現1+1>2效果的關鍵在於能夠為你提供良好的發展平台，即能夠為你提供良好的就業保障，讓學員能夠學到實在實在的知識，並向前端學員提供一對一的就業指導，確保學員找到自己的心理工作。
3. 學費性價比高
一個好的前端培訓機構肯定能給你帶來1+1>2的效果，如果你在一個由專業的前端教師領導並由前端培訓機構自己提供的平台上工作，你將獲得比以往更多的投資。
希望你早日學有所成。
㈤ 求一個網站前端特效（滑鼠經過圖片左側滑動文字說明）
純CSS代碼特效，當滑鼠經過圖片時，圖片彈出說明文字，文字背景半透明，同時圖片的邊框會變換顏色。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滑鼠經過圖片,邊框變色,圖片上出現半透明文字</title>
<style type="text/css">
img{border:none}
.wrap{margin:8px;position:relative;}
.photo a{position:absolute;display:block;border:1px solid #888888;padding:2px}
.photo a:hover{border:1px solid #fff;text-decoration:none}
.photo a span {display:none;cursor:hand;text-align:center;font:bold 12px/30px Verdana, Arial;}
.photo a:hover span{width:500px;margin:0 2px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:alpha(opacity=56);-moz-opacity:0.6;opacity:0.6;}
</style>
</head>
<body>
<div class="wrap">
<div class="photo"><a href="#">
<img src="/jscss/demoimg/wall7.jpg" border="0" alt=""/><span>壩上春色，景色迷人</span></a></div>
</div>
</body>
也可以自行改進，希望對你有幫助。
㈥ 求一web前端特效源碼
https://github.com/SimonZhangITer/VueDemo_Sell_Eleme
㈦ 前端開發中常用到的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