HTML
<div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div> <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; /* background: url("images/1.jpg"); 圖片位置*/ } div ul { width: 1300px; } </style>JS
var box = document.getElementById("box"); var ul = box.children[0]; var lis = ul.children; for (var i = 0; i < lis.length; i++) { //加載圖片 注意修改圖片的來源 lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)"; //注冊鼠標移入事件 lis[i].onmouSEOver = function () { //進行排他 for (var i = 0; i < lis.length; i++) { delayedPlay(lis[i], {"width": 100}); } //當前li 寬度為800 delayedPlay(this, {"width": 800}); } } //當鼠標移動到box外面 box.onmouseout = function () { for (var i = 0; i < lis.length; i++) { delayedPlay(lis[i], {"width": 240}); } }; //延時動畫 function delayedPlay(obj, json) { clearInterval(obj.timer); obj.timer = setInterval(function () { var flag = true; for (var k in json) { var leader = parseInt(getStyle(obj, k)); var target = json[k]; var step = (json[k] - leader) / 10; var step = step > 0 ? Math.ceil(step) : Math.floor(step); var leader = leader + step; obj.style[k] = leader + "px"; console.log("leader :" + leader + "target" + target); if (target !== leader) { flag = false; } } //如果全部完成,清理定時器 if (flag) { clearInterval(obj.timer); } }, 15); } function getStyle(obj, attr) { if (window.getComputedStyle) { return window.getComputedStyle(obj, null)[attr];//支持最新瀏覽器 } else { return obj.currentStyle[attr]; } }新聞熱點
疑難解答
