親愛的老師 我還是發現了個問題 當我想看完視頻后自己寫的時候遇到了寫問題 當我想解決問題的時候我不得不回頭來看視頻 而且不停的快進之類的去看我想看的代碼 然而您視頻又是一步步講的 我理清邏輯就又不得不重新看一遍您的視頻 我任然想您是否可以給一份源代碼 我始終認為視頻只是作了解 我要看代碼我才能吸收 所以跪求源代碼
親愛的老師 我還是發現了個問題 ?當我想看完視頻后自己寫的時候遇到了寫問題 ?當我想解決問題的時候我不得不回頭來看視頻 而且不停的快進之類的去看我想看的代碼 然而您視頻又是一步步講的 我理清邏輯就又不得不重新看一遍您的視頻 ?我任然想您是否可以給一份源代碼 ?我始終認為視頻只是作了解 我要看代碼我才能吸收 所以跪求源代碼
2016-02-24
<!doctype>
<html>
<head>
<meta charset = "utf-8">
<title>同時改變寬高</title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,li{list-style: none;}
ul li{width: 200px;height: 50px;background: #333;margin-bottom: 20px;border: 2px solid #999;}
</style>
<script type="text/javascript">
window.onload = function(){
//var aLi = document.getElementsByTagName("li");
var li1 = document.getElementById("li1");
var li2 = document.getElementById("li2");
var timer = null;
// for(var i = 0;i<aLi.length;i++){
// aLi[i].onmouseover = function(){
// startMove(this,400);//鼠標移入是寬變成400px
// }
// aLi[i].onmouseout ?= function(){
// startMove(this,200);
// }
// }
li1.onmouseover = function(){
startMove(this,400,"width");
}
li1.onmouseout = function(){
startMove(this,100,"width");
}
li2.onmouseover = function(){
startMove(this,400,"height");
}
li2.onmouseout = function(){
startMove(this,100,"height");
}
//函數定義有多種方法1、var提前 ?2、直接輸入function
function getStyle(obj,attr){//obj是對象，attr是屬性
if(obj.currentStyle){
return obj.currentStyle[attr];//ie瀏覽器
}else{
return getComputedStyle(obj,false)[attr];//針對火狐瀏覽器
}
}
var startMove = function(obj,iTarget,attr){//obj表示多個當前的
? clearInterval(obj.timer);
? obj.timer = setInterval(function(){
? var curr = parseInt(getStyle(obj,attr));//定義當前變量
? var ?speed = (iTarget ?- curr)/8;//不可以放到前面去定義，因為obj是沒有被定義
? speed = speed>0?Math.ceil(speed):Math.floor(speed);//如果大于零向上取整，如果小于零就向下取整；
? if(curr == iTarget){
? clearInterval(obj.timer);
? }else{
? obj.style[attr] = curr + speed + "px";//
? }
? },30)
}
}
</script>
</head>
<body>
<div>
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li></li>
</ul>
</div>
</body>
</html>
應該是沒錯的，可以參考一下
2015-12-16
老師說，我沒看到，自己寫吧