已解決430363個問題，去搜搜看，總會有你想問的

如何加入動畫? 本人嘗試多次都沒成功求指導

首頁猿問如何加入動畫?...

如何加入動畫? 本人嘗試多次都沒成功求指導

JavaScript Html/CSS

nideyida 2015-11-01 08:48:11

<!doctype html><html> <head> <meta charset="UTF-8"> <title>sliding doors</title> <link rel="stylesheet" href="styles/reset.css" /> <link rel="stylesheet" href="styles/slidingdoors.css" /> <script src="scripts/slidingdoors.js"></script> </head> <body> <div id='container'> <img src="images/door1.png" alt="1080P神器" title="1080P神器" /> <img src="images/door2.png" alt="5.5寸四核" title="5.5寸四核" /> <img src="images/door3.png" alt="四核5寸" title="四核5寸" /> <img src="images/door4.png" alt="5.7寸機皇" title="5.7寸機皇" /> </div> </body></html>

查看完整描述

2 回答

nideyida

TA貢獻3條經驗獲得超0個贊

滑動門

反對回復 2015-11-01

mengxianghan

TA貢獻2條經驗獲得超0個贊

你這是想加什么動畫？

反對回復 2015-11-01

nideyida
window.onload = function() { //容器對象 var box = document.getElementById('container'); //獲得圖片NodeList對象集合 var imgs = box.getElementsByTagName('img'); //單張圖片的寬度 var imgWidth = imgs[0].offsetWidth; //設置掩藏門體露出的寬度 var exposeWidth = 160; //設置容器總寬度 var boxWidth = imgWidth + (imgs.length - 1) * exposeWidth; box.style.width = boxWidth + 'px'; //設置每道門的初始位置 function setImgsPos() { for (var i = 1, len = imgs.length; i < len; i++) { imgs[i].style.left = imgWidth + exposeWidth * (i - 1) + 'px'; } } setImgsPos(); //計算每道門打開時應移動的距離 var translate = imgWidth - exposeWidth; //為每道門綁定事件 for (var i = 0, len = imgs.length; i < len; i++) { //使用立即調用的函數表答式，為了獲得不同的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'; } }; })(i); } };

回復 2015-11-01

2 回答
0 關注
1528 瀏覽

關注

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

如何加入動畫? 本人嘗試多次都沒成功求指導

如何加入動畫? 本人嘗試多次都沒成功求指導

2 回答

相關問題推薦

添加回答

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何加入動畫? 本人嘗試多次都沒成功求指導

如何加入動畫? 本人嘗試多次都沒成功求指導

2 回答

相關問題推薦

添加回答