課程
/前端開發
/HTML/CSS
/DOM探索之基礎詳解篇
sublime里js代碼高亮用什么插件啊
2016-03-13
源自：DOM探索之基礎詳解篇 1-3
正在回答
以上是案例完整的代碼，加了css3動畫，鼠標離開時可以恢復到原始位置(注釋部分)。
<!DOCTYPE?html> <html> <head> <meta?charset="UTF-8"> <title>滑動門特效</title> <link?rel="stylesheet"?href="css/style.css"> </head> <body> <div?id="container"> <img?src="images/door1.png"?alt="door1"?title="door1"> <img?src="images/door2.png"?alt="door2"?title="door2"> <img?src="images/door3.png"?alt="door3"?title="door3"> <img?src="images/door4.png"?alt="door4"?title="door4"> </div> </body> <script?src="js/script.js"></script> </html>
*{ margin:0; padding:0; } #container{ position:relative; height:?477px; margin:20px?auto; border-bottom:1px?solid?#d9d9d9; border-right:1px?solid?#d9d9d9; overflow:?hidden; } #container?img{ position:?absolute; left:0; display:block; border-right:?1px?solid?#d9d9d9; transition:?all?0.5s; } #container?img:nth-child(1){ border-left:?1px?solid?#d9d9d9; }
window.onload?=?function(){ //獲取盒子對象 var?box?=?document.getElementById('container'); //獲取圖片對象 var?imgs?=?box.getElementsByTagName('img'); var?imgWidth?=?imgs[0].offsetWidth;?//單張圖片的寬度 var?exposeWidth?=?160; //隱藏門露出寬度 var?boxWidth?=?imgWidth+exposeWidth*(imgs.length-1); //圖片盒子寬度 box.style.width?=?boxWidth+'px'; //設置每道門的初始位置 function?setImgsPos(){ for(var?i=1;i<imgs.length;i++){ imgs[i].style.left?=?imgWidth?+?exposeWidth*(i-1)+'px'; } } setImgsPos(); //?計算每張圖片移動的距離 var?translate?=?imgWidth?-?exposeWidth; //為每道門綁定事件 for(var?i=0;i<imgs.length;i++){ (function(i){ imgs[i].onmouseover?=?function()?{ setImgsPos(); //打開門 for?(var?j?=?1;j<=i;j++)?{ imgs[j].style.left?=?parseInt(imgs[j].style.left,10)?-?translate?+?'px'; //10代表十進制 } }; })(i); } //鼠標移出后復位 //?for(var?i=0;i<imgs.length;i++){ //? imgs[i].onmouseleave?=?function(){ //? setImgsPos(); //? } //?} };
舉報
要知道前端大牛都是從精通DOM開始的，全面講解DOM的基礎知識
2 回答請問老師的sublime用的什么字體？
4 回答dom是什么啊？跟js有關系嗎？
6 回答這行代碼中的10表示什么意思啊
3 回答用什么軟件？
3 回答我把js放到頭文件里怎么就不運行了呢？
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-03-13
以上是案例完整的代碼，加了css3動畫，鼠標離開時可以恢復到原始位置(注釋部分)。
2016-03-13
2016-03-13
*{ margin:0; padding:0; } #container{ position:relative; height:?477px; margin:20px?auto; border-bottom:1px?solid?#d9d9d9; border-right:1px?solid?#d9d9d9; overflow:?hidden; } #container?img{ position:?absolute; left:0; display:block; border-right:?1px?solid?#d9d9d9; transition:?all?0.5s; } #container?img:nth-child(1){ border-left:?1px?solid?#d9d9d9; }2016-03-13
window.onload?=?function(){ //獲取盒子對象 var?box?=?document.getElementById('container'); //獲取圖片對象 var?imgs?=?box.getElementsByTagName('img'); var?imgWidth?=?imgs[0].offsetWidth;?//單張圖片的寬度 var?exposeWidth?=?160; //隱藏門露出寬度 var?boxWidth?=?imgWidth+exposeWidth*(imgs.length-1); //圖片盒子寬度 box.style.width?=?boxWidth+'px'; //設置每道門的初始位置 function?setImgsPos(){ for(var?i=1;i<imgs.length;i++){ imgs[i].style.left?=?imgWidth?+?exposeWidth*(i-1)+'px'; } } setImgsPos(); //?計算每張圖片移動的距離 var?translate?=?imgWidth?-?exposeWidth; //為每道門綁定事件 for(var?i=0;i<imgs.length;i++){ (function(i){ imgs[i].onmouseover?=?function()?{ setImgsPos(); //打開門 for?(var?j?=?1;j<=i;j++)?{ imgs[j].style.left?=?parseInt(imgs[j].style.left,10)?-?translate?+?'px'; //10代表十進制 } }; })(i); } //鼠標移出后復位 //?for(var?i=0;i<imgs.length;i++){ //? imgs[i].onmouseleave?=?function(){ //? setImgsPos(); //? } //?} };