JS--- part6課程介紹 & part5複習_ZenDei技術網路在線

JS--- part6課程介紹 & part5複習

-Advertisement-

part6 課程介紹 scroll系列: 重點,每個屬性是什麼意思封裝scroll系列的相關的屬性,固定導航欄案例事件瀏覽器的滾動條事件--能夠寫出來封裝動畫函數緩動動畫變速動畫筋斗雲獲取元素計算後的樣式屬性值升級變速動畫理解能夠自己寫出最終版本的函數手風琴案例開機動畫案例 ...

part6 課程介紹

scroll系列:-----重點,每個屬性是什麼意思封裝scroll系列的相關的屬性,固定導航欄案例---事件瀏覽器的滾動條事件--能夠寫出來封裝動畫函數---緩動動畫---變速動畫--- 筋斗雲獲取元素計算後的樣式屬性值升級變速動畫--------------理解---能夠自己寫出最終版本的函數手風琴案例開機動畫案例旋轉木馬案例另一個系列圖片跟著滑鼠飛------

part5 複習

定時器:兩個 setInterval(函數,時間);//定時器,隔一段時間就執行一次函數的代碼 clearInterval(定時器的id); setTimeout(函數,時間);//定時器,只執行一次函數的代碼-----一次性的定時器 clearTimeout(定時器的id);// 動畫函數:* offset系列: 獲取元素的相關的樣式屬性的值 offsetWidth:獲取元素的寬 offsetHeight:獲取元素的高 offsetLeft:獲取元素距離左邊位置的值 offsetTop:獲取元素距離上面位置的值** 完整輪播圖: 1. 根據ul中li個數(圖片的個數)動態的創建li,並且加入到ol中,作為小按鈕來使用為每個ol中的li添加滑鼠進入的事件,(添加事件之前,先把索引保存在每個li的自定義屬性中),滑鼠進入li的時候做排他功能(背景顏色),移動圖片(圖片整體移動,移動的ul,每次移動的是一個圖片的寬度,圖片的寬度就是向寬的寬度),調用的是動畫函數,移動ul,移動的是索引值*圖片的寬度,並且把索引值存儲在一個全局變數中,pic 2. 創建li之後,1---設置ol中第一個li有預設的背景顏色,2---把ul中的第一個li克隆一下(無縫連接的效果)追加到ul中所有的li的最後面(無縫效果:頁面中的第一個圖片和最後一個圖片是同一個圖片)* 3.左右焦點的div顯示和隱藏 4.為左右按鈕註冊點擊事件每一次點擊右邊的按鈕,先判斷pic的值是不是ul中li的length-1(pic的值最大是5),此時設置pic的值為0,同時設置ul距離左邊的left值為0(初始值),此時pic立刻加1,移動ul,用戶看到的就是第二個圖片設置小按鈕的背景顏色左邊按鈕,需要判斷pic值是不是0,如果是0此時pic=5,ul的left為5*圖片的寬,立刻pic-1,然後ul移動一張圖片,此時用戶看到了第五個圖片* 5.自動播放在頁面載入的時候,啟動一個定時器,裡面調用的就是右邊按鈕的點擊事件的處理函數** BOM中頂級對象:Window DOM中頂級對象:Document jQuery中頂級對象:$--jQuery

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

使用dva改造React舊項目的數據流方案

前言最近在給自己的腳手架項目轉到TypeScript時，遇到了一些麻煩。項目之前採用的是react + react redux + redux thunk + redux actions +redux promise的體系。當項目轉TypeScript時,react和react redux這種 ...
JS Math對象、日期對象、函數、定時器

Math對象開平方：sqrt 絕對值：abs π：PI x的y次方：pow 四捨五入取整：round 向下取整：floor 向上取整：ceil 最大值：max 最小值： min 隨機數：random 日期對象獲取當前時間：Date() 獲取年：getFullYear 獲取月：getMonth 獲 ...
ES6轉ES5

本人近期接到一個天大的“好消息”：zxbc項目某些客戶為保險業等種種原因要支持IE…… 2013年，ES6草案凍結，2015年6月，ES6正式通過，成為國際標準。都9102啦，Chrome還好啦，升級到最新版本，大部分ES6還是ok的，但是萬惡之源IE呢？作為一個前端開發者，相容萬惡的IE，頓時，胸 ...
記錄AJAX充電點點滴滴

首先要明白什麼是 AJAX ？ AJAX = 非同步 JavaScript 和 XML。 AJAX 是一種用於創建快速動態網頁的技術。通過在後臺與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX ...
HtEditor使用總結

最近在公司學習到ht編輯器的使用，關於使用方法上總結了一下，避免入坑。ht是做大屏數據可視化比較好的一款軟體，不過多介紹，官網上有具體使用方法和展示樣例，這裡我整理一下我用的最多的功能。##1、如何將HT編輯器生成的圖紙json問價嵌入到C#解決方案中？有兩種方式：（1）以本地文件的方式讀取（2）發 ...
基於webpack實現多html頁面開發框架八 html引入圖片打包和公共頁面模塊復用

一、解決什麼問題 1、html中img引入的圖片地址沒有被替換，找不到圖片 2、html公共部分復用問題，如頭部、底部、浮動層等二、html中img引入圖片問題解決 1、在index.html插入img，引用圖片<img src="../../assets/img/test.jpeg"> 2、np ...
JS---offset系列和scroll系列

元素的樣式屬性是無法直接通過:對象.style.屬性來獲取(樣式在style屬性中設置) offset系列: offsetLeft:距離左邊位置的值 offsetTop:距離上面位置的值 offsetWidth:元素的寬(有邊框) offsetHeight:元素的高(有邊框) scroll系列: 滾 ...
由於ie瀏覽器ajax緩存導致layui table表格重載失敗的解決辦法

where: { time:new Date()//增加一個數據介面的額外參數→時間戳 } ...