-
@@--Tab選項卡切換效果--1-4 js實現切換效果 title[i].id給遍歷的元素加一個屬性--索引值（?。? function $(id){ return typeof id==='string'?document.getElementById(id):id; } window.onload=function(){ //獲取鼠標滑過或點擊的標簽和要切換內容的元素 var titles=$('notice-tit').getElementsByTagName('li'), divs=$('notice-con').getElementsByTagName('div'); if(titles.length!=divs.length) return; //遍歷titles下所有的li for(var i=0;i<titles.length;i++){ titles[i].id = i; titles[i].onmouseover = function(){ //清除所有li上的class for(var j=0;j<titles.length;j++){ titles[j].className = ''; divs[j].style.display = 'none'; } //設置當前為高亮顯示 this.className = 'select'; divs[this.id].style.display = 'block'; } } }查看全部
-
@@--Tab選項卡切換效果--1-3 tab頁面布局-內容布局 編輯選項卡內容樣式： 1、顯示默認內容； 2、隱藏其他內容 3、剩下的留給JS函數實現。查看全部
-
@@--Tab選項卡切換效果--1-2 tab頁面布局-標題布局 ul的寬度=298px+2px+1px=301px; li的高度=26px+1px=27px;(border-bottom:1px #fff solid;) ul要比盒子加上邊框后的總長度長1像素再左移動1像素這樣在被點擊時顯示的左右邊框才不會和盒子的邊緣緊挨在一起以至于變得很粗（所以盒子要設為relative ul要設為absolute才能移動-1像素） li的寬度在設置時要考慮被點擊狀態時加上的兩邊的邊框所以之前未被點擊時左右要設置1像素的padding在被點擊后padding取消用左右邊框代替查看全部
-
選項卡分類： @@--Tab選項卡切換效果-- -第1章 滑動、點擊切換效果實現 1、滑過切換；(延遲) 2、點擊切換； 3、延遲切換；（后兩類加定時器在前者基礎之上） 4、自動切換。 最大的優點，可以節省空間查看全部
-
僅僅是實現了查看全部
-
.設置公告欄時要進行絕對定位。因為各個標題劃過時高亮顯示每一個標題都有一個左右邊框，如果不加入絕對定位則兩邊的標題會發生邊框重疊。所以要在ul上加入絕對定位。查看全部
-
分析 優化代碼查看全部
-
一、頁面加載、獲取整個容器、所有放數字索引的li及放圖片列表的ul、定義放定時器的變量、存放當前索引的變量index 二、添加定時器，每隔2秒鐘index遞增一次、調用一次切換圖片函數 提示: 1. index不能一直無限制的遞增下去，需做判斷 2.調用切換圖片函數時需將遞增之后的index作為參數傳過去 三、定義圖片切換函數 提示: 1.遍歷所有放數字索引的li，將每個li上的類去掉。 2.根據傳遞過來的index值找到對應的li給它添加類設為當前高亮顯示。 3. 根據傳遞過來的index值計算放圖片的ul的top值 4. 改變index的值，讓其等于傳遞過來的參數值 注意：放圖片的ul的top值=-index*單張圖片的高度（所有圖片必須等高） 四、鼠標劃過整個容器時，圖片停止切換，離開繼續 提示: 1. 鼠標滑過整個容器時清除定時器 2. 鼠標離開時繼續執行定時器，切換至下一張圖片 五、遍歷所有放數字的li，且給他們添加索引、鼠標滑過時切換至對應的圖片 提示: 1. 鼠標滑過時調用圖片切換函數，將滑過的li的索引傳過去查看全部
-
第一步、獲取按鈕、綁定事件、設置定時器變量和計時變量 第二步、添加定時器，每隔1秒鐘計時減1，直至當計時小于等于0時清除定時器，按鈕恢復為“發送驗證碼”，否則顯示為“X秒后重試查看全部
-
1、在changeOption()的最后添加一行代碼解決繼續播放時下一個選項卡index不對的BUG：index = currentIndex； 2、如果劃過太快，會有很多個定時器，所以要在設置定時器之前先清除一下定時器： if(timer){ clearInterval(timer); }查看全部
-
選項卡自動切換與滑動事件結合： 1、加載加載頁面時，調用定時器事件； 2、鼠標滑過時清除定時器，并執行滑動切換； 3、鼠標離開時調用定時器； 4、代碼優化，即將某一功能封裝在一個函數里，并在使用的時候調用即可。查看全部
-
選項卡自動切換： 1、清除當前延遲時間； 2、獲取標題數組、內容數組； 3、指定當前標題標志； 4、綁定定時事件；查看全部
-
setTimeout是一段時間之后執行什么清除是clearsetTimeout 而setInterval如圖查看全部
-
function $(id){ return typeof id==='string'?document.getElementById(id):id; } 這個 函數的作用就是之后用到id選擇器可以簡寫，至于判斷的意義就是傳入的參數為字符串就返回 document.getElementById(id)，其他的就返回參數本身，這個只是一個獲取頁面dom元素的一個簡陋版本的函數，還不夠完善。查看全部
-
延遲效果查看全部
舉報
0/150
提交
取消