本文目錄一覽：
jq特效和js特效區別
從用戶的角度來看特效之間的區別是沒有的因為他直觀的展示的是效果。可以這麼放心的告訴你。jquery所有做出的效果都是基於js的。屬於另類的js。就像現在其他編程語言無法脫離彙編語言機器語言一樣。「他的底層實現必須依靠他。」
jquery只是一個js的函數框架集。他封裝了很多js實現起來比較繁瑣的事情。讓編寫腳本提供了很大的方便。而且很多的方法寫的比自己寫的高效。而且這個框架很全很強大。基本上可以滿足目前所有coding對於web開發的需要。但是儘管如此jquery還是有他不住的地方。畢竟jquery只是一個框架集。他真正的實現還是靠javascrpit。所以javascript才是基礎，才是根基。如果你想的明白其實有些效果用js實現比jquery的代碼不一定少。而且你如果要使用jquery就必須至少要載入一次jquery。如果你的項目裡面僅僅只寫有幾行很簡單並且js可以輕鬆解決的代碼。那載入一次是不是有點太得不嘗失呢。並且如果一旦jquery庫你調用出現問題。你要跟蹤到裡面去調試希望找出答案是不是又很麻煩因為一般到手的jquery庫都是經過混淆代碼壓縮的N個函數在一行。因此如果要學習客戶端的腳本語言建議至少學一些基本的javascript對他做個基本了解。然後再去學習jquery。這樣會讓你學起來事半功倍的。
(ps:學習我推薦一個網站吧！ 當時我學習jquery自學了2天，就基本上能應付我工作上所有的需要了。那2天就是在那個網站看資料。寫demo。)
本來準備作為評論來發的。但是那裡放不下。因為我覺得上面那哥們已經在追問中回答得很好了。
JS特效代碼，讓網頁打開時候最小化，6秒後最大化。追加100分
object id=hh1 classid=”clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11″
param name=”Command” value=”Minimize”/object
input type=button value=最小化 onclick=hh1.Click()
這個你可以試試。但只針對ie，其他的多標籤瀏覽器似乎不能實現
前端開發中常用到的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 = ”; 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);
}1234567891011121314151617181920
// 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);
});12345678910111213141516171819202122
常用的一些正則表達式
//匹配字母、數字、中文字元
/^([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]/1234567891011121314151617181920
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(‘移動端’);
}123456789101112131415161718192021
之前我用過一個檢測客戶端的庫 覺得挺好用的，也推薦給大家 叫 device.js，大家可以 Googel 或 百度
GItHub倉庫地址：
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
網頁特效代碼
在HTML文件中添加網頁特效代碼，一般有三種情況。
第一，只加在HTML文件頭部，即HTML文件中head……/head之間的代碼。這類代碼只需要加在這個部分，即可達到預期的效果。
第二，只加在HTML文件體部。即HTML文件中body……/body之間的代碼。這類代碼只需要加在這個部分，即可達到預期的效果。如在你題目中提到的就屬於這一類。
除上述情況外，多數代碼需要先在頭部（head……/head之間）在上一些屬性性質的代碼，但是特效的主代碼需要添加在體部（body……/body之間），否則，特效不能正常顯示，有時還會出現錯誤，影響整個頁面的正常顯示。
添加特效代碼的方法：
先要用HTML編輯軟體，如常見的文本編輯器「記事本」，打開需要編輯的文件，根據特效代碼的要求，在文件中找到相應位置，複製，粘貼特效代碼，保存即可。修改完畢後，即可在瀏覽器中看到相應的效果。
在添加的時候一定要注意，一定要按照特效源碼的要求添加，此外，還要保證源碼的完整性，一個標點符號都不能少，也不能多。
另外要說的是，根據我的經驗，直接從網上複製來的代碼，不一定都能直接粘貼了用，一部分必須通過一個軟體來中轉。比如，先把網上的代碼複製後，粘貼到「記事本」中，然後再複製、粘貼到相應的文件位置上。
最後，介紹你幾個經典網頁特效站。
1、網頁特效集錦：
2、javascript網頁特效：
3、萬旭網頁特效：
4、網頁特效夢工廠：
5、網頁製作大寶庫網頁特效大全：
什麼是JS特效
JS特效就是網頁中實現的特殊效果或者特殊的功能的一種技術,是用網頁腳本(javascript)來編寫製作動態特殊效果。
比如圖片切換，漸變等等，它為網頁活躍了網頁的氣氛，有時候會起到一定的親切力。
JavaScript 是根據 “ECMAScript”標準制定的網頁腳本語言。這個標準由 ECMA 組織發展和維護。ECMA-262 是正式的 JavaScript 標準。
擴展資料：
能夠具有交互性，能夠包含更多活躍的元素，就有必要在網頁中嵌入其它的技術。如：Javascript、VBScript、Document Object Model（DOM，文檔對象模型）、Layers和 Cascading Style Sheets（CSS，層疊樣式表）。
JavaScript 使網頁增加互動性。JavaScript 使有規律地重複的HTML文段簡化，減少下載時間。JavaScript 能及時響應用戶的操作，對提交表單做即時的檢查，無需浪費時間交由 CGI 驗證。JavaScript 的特點是無窮無盡的，只要你有創意。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/157365.html
微信掃一掃 
支付寶掃一掃 