整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
圖1
圖2
圖3
「鏈接」
前端開發來說，通過動畫來提升交互效果是很常見的。在很早以前，做web動畫主要通過javascript或者jquery或者flash這樣的手段，非常麻煩，自打有了ccs3，做動畫就太方便了，只需幾行css代碼就可以搞定。
這里我們就演示一個常見的循環滾動效果，任務是這樣：先準備一個圖片，平鋪到頁面上充滿整個屏幕，然后就讓畫面一直向上循環滾動，形成無邊無際的感覺。
雖然可以從網上搜到一些類似的代碼，但是魚龍混雜，無關緊要的代碼非常多，不夠純粹。如果要弄明白動畫的原理，只有自己動手做一遍才能真正消化吃透。所以我們來一步步原創這個代碼，排除所有不必要的基礎樣式，只說要點，3個步驟你就可以完全掌握其精髓！
第一步：布局
首先，滾動的圖片需要放在一個容器里，一行html代碼即可完成：
第二步：把圖片放進容器
css中body的邊界設為0，把容器設高度100%以充滿屏幕，再調用背景圖pic.png
第三部：讓畫面動起來
咱不做標題黨，循環滾動靠的就是3行css動起來的。
先是1行 -webkit-animation屬性：4個參數分別表示：動畫名稱scroll，1秒時長，移動速度為線性的，無限循環。
然后是對應的關鍵幀 @-webkit-keyframes 屬性，這是自己定義的動畫規則，只需寫2行規則即可：
原理：動畫就是畫從一個地方動到另一個地方。對普通滾動效果來說，有起點和終點這兩個節點的位置就夠了。所以我們用0%和100%分別表示起點和終點，指定2個背景圖的xy位置坐標即可。圖片會在規定時間內從起點移動到終點，并循環下去，數值是負表示是向上移動。320px正好是圖片的高度，這樣循環的時候是無縫銜接的。
好了，最終完整的代碼如下，是不是很精練呢？保存成 index.html 即可
代碼寫完了，還要記得在當前目錄要有pic.png這個圖片哦，我隨便畫了幾筆，絕無觀賞性，建議自己找個好看點的圖片來代替。
現在用瀏覽器打開index.html即可看到效果，比較魔性的地方在于，如果你盯著看久了，關閉窗口以后會出現幻覺，仿佛整個顯示器都在向上飛，哈哈！
最后我們來說說瀏覽器兼容性問題：
大家可能注意到了，前面那2個古怪的 -webkit-animation, @-webkit-keyframes 這里的-webkit-其實是一個前綴，animation和@keyframes才是CSS的標準屬性。
當加上-webkit-后，就形成了一個針對特殊瀏覽器的專有屬性，表示用在谷歌的chrome和蘋果的safari瀏覽器上。此外還有-moz前綴代表針對firefox瀏覽器的私有屬性。
所以我們在用到css3的一些特性的時候，經常使用一大堆的重復性的代碼，比如我們今天的這個代碼，有人會寫成這個樣子：
一個簡單的動畫就要寫這么多冗余的代碼，為的只是支持一些舊的瀏覽器，有必要嗎？為什么在這個例子中我們僅僅采用了-webkit-而沒有使用其它專有屬性呢？
因為現在已經是2019年了！谷歌蘋果的瀏覽器是主流，占據了絕大部分，而其它小眾瀏覽器也大多能夠兼容他們，在版本上，大部分人安裝瀏覽器是直接下載新版本安裝使用，而非找出家里陳年的老軟盤、老光盤去安裝，家中的老電腦也早已升級不知多少回了，所以也幾乎沒有機會使用低版本的瀏覽器了！
至于微軟的IE，就更別提了，IE9以前不支持動畫的，只能用js或者jquery來寫動畫，直到IE10才支持css動畫，隨后IE被放棄，主推Edge，搞了幾天越來越頭大干脆也放棄，現在直接使用chrome內核了，所以針對ie的兼容性除非有特殊要求已經無需考慮。
你在網上能看到的范例代碼，如果有寫成那么復雜臃腫的，估計也都是3-5年前發的老文，或者抄來抄去不做思考的搬磚工留下的“初學者”筆記。
我們不仿測試一下幾款主流瀏覽器的情況看看，結論：
測試結果表明，-webkit-的寫法在4款不同內核的瀏覽器上都能正常使用，所以我們的代碼因此能得以簡化。
當然，這個例子也有局限性，比如你看，只有蘋果safari不支持標準寫法，萬一將來他改邪歸正了呢？畢竟標準寫法才是眾望所歸不是？使用針對個別瀏覽器的私有屬性寫法，雖可用但畢竟有些怪怪的，將來怎么樣還很難說呢。這樣看來，如果使用古老的處理辦法，重復N次為每個專屬瀏覽器各寫一份代碼，除了辣眼睛也真沒什么錯。
瀏覽器的兼容問題涉及面實在是非常廣，三言兩語還真說不完，以后會專門來講。
言:
一位前端界的大神讓我去思考的一個問題, 給了Big-man一段代碼，如下:
function Seriously(options) {
// if called without 'new', make a new object and return that
if(window === this || !(this instanceof Seriously) || this.id !== undefined) {
return new Seriously(options);
}
}
return語句執行之后還會繼續執行嗎？這是大神上來讓我解決的問題，既然提到了return那我也就隨帶解決JS中另外的兩種結束循環的方法break, continue。
Break語句:
break語句會使運行的程序立刻退出包含在最內層的循環或者退出一個switch語句。
由于它是用來退出循環或者switch語句的, 所以只有當它出現在這些語句的時候, 這種形式的break語句才是合法的。
如果一個循環的終止條件非常復雜, 那么使用break語句來實現某些條件比用一個循環表達式所有的條件容易得多。
for(var i = 519; i < 550; i++) {
if(i == 522) {
break;
}
console.log(i);
alert(i);
document.write(i);
}
當i = 521的時候，直接退出for這個循環。這個循環將不再被執行。
對于輸出結果的話，可以自己去測試的吧。
Continue語句:
continue語句和break語句相似。所不同的是，它不是退出一個循環，而是開始循環的一次新迭代。
continue語句只能用在while語句、do/while語句、for語句、或者for/in語句的循環體內, 在其他地方使用都會引起錯誤?
for(var i = 5; i >=0; i--) {
if(i == 4 || i == 3 || i == 1) {
continue;
}
console.log(i);
alert(i);
document.write(i);
}
當i = 4、i = 3以及i = 1的時候，直接跳出for循環。下次繼續執行。
至于輸出結果，還希望大家去打印一下。
Return語句:
return語句就是用于指定函數返回的值。return語句只能出現在函數體內，出現在代碼中的其他任何地方造成語法錯誤！
for(var i = 1; i < 10; i++) {
if(i == 8) {
return;
}
console.log(i);
alert(i);
document.write(i);
}
執行結果Uncaught SyntaxError: illegal return statement(...)
錯誤意思是非法捕獲的查詢返回語句。
當執行return語句時, 即使函數主題中還有其他語句, 函數執行也會停止!
<script type="text/javascript">
if(username == "") {
alert("please input your username: ");
return false;
} else if (qq == "") {
alert("please input your qq number: ");
return false;
}
</script>
上面的實例里，當username為空時，就不會再向下執行，在一些表單提交中，也可以通過return false來阻止默認的提交方式，改用Ajax的提交方式，例如：
<form id="form" onSubmit="return false"> ... </form>
this對應的全局變量:
window == this這個Boolean等式，在不同的情況下的展現都不一樣的。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
function a() {
console.log(window === this)
}
a();
</script>
</body>
</html>
這個時候的window === this打印出來的是true，這也就意味著this絕對等于window。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
'use strict'
function a() {
console.log(window === this)
}
a();
</script>
</body>
</html>
這個時候window === this返回回來的值卻是false， 而且打印出來的this是undefined的。
所以嚴格模式下面的代碼操作需要更加的規范和合理才可以的。
vector illustration web development shield sign
---------------------
作者：JD9
來源：CSDN
原文：https://blog.csdn.net/XXJ19950917/article/details/78310346
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
