JavaScript手風琴效果
阿新 • • 發佈：2018-08-19
ren pad city 圖片 tostring borde pan min back
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; } * { margin: 0; padding: 0; } div { width: 1150px; height: 400px; margin: 50px auto; border: 1px solid red; overflow: hidden; } div li { width: 240px; height: 400px; float: left; } div ul { width: 1300px; } </style> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="common.js"></script> <script> //獲取任意一個元素的任意一個屬性的當前的值---當前屬性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } function animate(element, json, fn) { clearInterval(element.timeId);//清理定時器 //定時器,返回的是定時器的id element.timeId = setInterval(function () { var flag = true;//默認,假設,全部到達目標 //遍歷json對象中的每個屬性還有屬性對應的目標值 for (var attr in json) { //判斷這個屬性attr中是不是opacity if (attr == "opacity") { //獲取元素的當前的透明度,當前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目標的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移動後的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判斷這個屬性attr中是不是zIndex //層級改變就是直接改變這個屬性的值 element.style[attr] = json[attr]; } else { //普通的屬性 //獲取元素這個屬性的當前的值 var current = parseInt(getStyle(element, attr)); //當前的屬性對應的目標值 var target = json[attr]; //移動的步數 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移動後的值 element.style[attr] = current + "px"; } //是否到達目標 if (current != target) { flag = false; } } if (flag) { //清理定時器 clearInterval(element.timeId); //所有的屬性到達目標才能使用這個函數,前提是用戶傳入了這個函數 if (fn) { fn(); } } //測試代碼 console.log("目標:" + target + ",當前:" + current + ",每次的移動步數:" + step); }, 20); } //獲取所有的li標簽 var list = my$("box").getElementsByTagName("li"); //遍歷所有的li標簽 for (var i = 0; i < list.length; i++) { //為所有li添加背景圖片 list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)"; //為所有的li標簽註冊鼠標進入跟鼠標離開事件 list[i].onmouseover = onmouseoverHandle; list[i].onmouseout = onmouseoutHandele; } //鼠標進入事件 function onmouseoverHandle() { for (var j = 0; j < list.length; j++) { animate(list[j], {"width": 100}); } animate(this, {"width": 800}); } //鼠標離開事件 function onmouseoutHandele() { for (var j = 0; j < list.length; j++) { animate(list[j], {"width": 240}); } } </script> </body> </html>
common.js
/** * Created by Administrator on 2018/8/18. */ /** * Created by Administrator on 2016/7/27. */ /** * Created by Administrator on 2016/7/21. * * 次文件來自 很牛x的程序員 . * * 作者:無名 */ /* * 該函數是返回的是指定格式的日期,是字符串類型 * 參數:date ----日期 * 返回值: 字符串類型的日期 * */ function getDatetoString(date) { var strDate;//存儲日期的字符串 //獲取年 var year = date.getFullYear(); //獲取月 var month = date.getMonth() + 1; //獲取日 var day = date.getDate(); //獲取小時 var hour = date.getHours(); //獲取分鐘 var minute = date.getMinutes(); //獲取秒 var second = date.getSeconds(); hour = hour < 10 ? "0" + hour : hour; minute = minute < 10 ? "0" + minute : minute; second = second < 10 ? "0" + second : second; //拼接 strDate = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;//隱藏問題,關於變量聲明的位置 return strDate; } //根據id獲取元素對象 function my$(id) { return document.getElementById(id); } /* * * innerText屬性IE中支持 * textContent火狐中支持 * dvObj.innerText="您好";設置innerText的值 * console.log(dvObj.innerText);獲取innerText的值 * 因為上述原因,inerText有時候需要設置值，有時候需要獲取值 * 所以,需要寫一個兼容的代碼能在火狐中使用,也可以在IE中使用 * * * */ /* *設置innerText屬性的值 * element-----為某個元素設置屬性值 * content-----設置的值 * */ function setInnerText(element, content) { if (typeof element.textContent === "undefined") { //IE瀏覽器 element.innerText = content; } else { element.textContent = content; } } /* * 獲取innerText屬性的值 * element 要獲取的元素 * 返回的是該元素的innerText值 * */ function getInnerText(element) { if (typeof element.textContent === "undefined") { //IE瀏覽器 return element.innerText; } else { return element.textContent; } } //獲取當前元素前一個元素 function getPreviousElement(element) { if (element.previousElementSibling) { return element.previousElementSibling; } else { var ele = element.previousSibling; while (ele && ele.nodeType !== 1) { ele = ele.previousSibling; } return ele; } } //獲取當前元素的後一個元素 function getNextElement(element) { if (element.nextElementSibling) { return element.nextElementSibling; } else { var ele = element.nextSibling; while (ele && ele.nodeType !== 1) { ele = ele.nextSibling; } return ele; } } //獲取父元素中的第一個元素 function getFirstElementByParent(parent) { if (parent.firstElementChild) { return parent.firstElementChild; } else { var ele = parent.firstChild; while (ele && ele.nodeType !== 1) { ele = ele.nextSibling; } return ele; } } //獲取父元素中的最後一個元素 function getLastElementByParent(parent) { if (parent.lastElementChild) { return parent.lastElementChild; } else { var ele = parent.lastChild; while (ele && ele.nodeType !== 1) { ele = ele.previousSibling; } return ele; } } //獲取兄弟元素 function getsiblings(ele) { if (!ele)return;//判斷當前的ele這個元素是否存在 var elements = [];//定義數組的目的就是存儲當前這個元素的所有的兄弟元素 var el = ele.previousSibling;//當前元素的前一個節點 while (el) { if (el.nodeType === 1) {//元素 elements.push(el);//加到數組中 } el = el.previousSibling; } el = ele.nextSibling; while (el) { if (el.nodeType === 1) { elements.push(el); } el = el.nextSibling; } return elements; } // //能力檢測多個瀏覽器為同一個對象註冊多個事件 var EventTools = { //為對象添加註冊事件 addEventListener: function (element, eventName, listener) { if (element.addEventListener) { element.addEventListener(eventName, listener, false); } else if (element.attachEvent) { element.attachEvent("on" + eventName, listener) } else { element["on" + eventName] = listener; } }, //為對象移除事件 removeEventListener: function (element, eventName, listener) { if (element.removeEventListener) { element.removeEventListener(eventName, listener, false); } else if (element.detachEvent) { element.detachEvent("on" + eventName, listener); } else { element["on" + eventName] = null; } }, //獲取參數e getEvent: function (e) { return e || window.event; }, getPageX: function (e) { if (e.pageX) { return e.pageX; } else { //有的瀏覽器把高度設計在了文檔的第一個元素中了 //有的瀏覽器把高度設計在了body中了 //document.documentElement.scrollTop;//文檔的第一個元素 //document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; return e.clientX + scrollLeft; } }, getPageY: function (e) { if (e.pageY) { return e.pageY; } else { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; return e.clientY + scrollTop; } } };
圖片：
1.jpg
2.jpg
3.jpg
4.jpg
5.jpg
JavaScript手風琴效果