javascript每日一练—运动
1、弹性运动
运动原理:加速运动+减速运动+摩擦运动;
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} 8 </style> 9 <script> 10 window.onload = function() 11 { 12 var oBtn = document.getElementById('btn1'); 13 var oDiv = document.getElementById('div1'); 14 15 oBtn.onclick = function() 16 { 17 startMove(oDiv, 300); 18 }; 19 }; 20 21 var iSpeed = 0; 22 var left = 0; 23 24 function startMove(obj, iTarget) 25 { 26 clearInterval(obj.timer); 27 obj.timer = setInterval(function(){ 28 iSpeed += (iTarget - obj.offsetLeft)/5; 29 iSpeed *= 0.7; 30 31 left += iSpeed; 32 33 if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){ 34 clearInterval(obj.timer); 35 obj.style.left = iTarget + 'px'; 36 }else{ 37 obj.style.left = obj.offsetLeft + iSpeed + 'px'; 38 } 39 40 }, 30); 41 } 42 </script> 43 </head> 44 45 <body> 46 <input id="btn1" type="button" value="运动" /> 47 <div id="div1"></div> 48 <div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div> 49 </body> 50 </html>
2、图片放大缩小
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片放大缩小</title> <style> *{ margin:0; padding:0; list-style:none;} #ulList{ margin:50px;} #ulList li{ margin:10px; width:100px; height:100px; float:left; background:#ddd; border:1px solid black;} </style> <script> window.onload = function() { var oUl = document.getElementById('ulList'); var aLi = oUl.getElementsByTagName('li'); var zIndex = 2; //布局转换 for(var i=0;i<aLi.length;i++){ aLi[i].style.left = aLi[i].offsetLeft + 'px'; aLi[i].style.top = aLi[i].offsetTop + 'px'; } for(var i=0;i<aLi.length;i++){ aLi[i].style.position = 'absolute'; aLi[i].style.margin = '0'; } for(var i=0;i<aLi.length;i++){ aLi[i].onmouseover = function() { this.style.zIndex = zIndex++; startMove(this, {width:200, height:200, marginLeft:-50, marginTop:-50}); }; aLi[i].onmouseout = function() { startMove(this, {width:100, height:100, marginLeft:0, marginTop:0}); }; } }; function getStyle(obj, attr) { if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true; for(var attr in json) { var iCur=0; if(attr=='opacity') { iCur=parseInt(parseFloat(getStyle(obj, attr))*100); } else { iCur=parseInt(getStyle(obj, attr)); } var iSpeed=(json[attr]-iCur)/8; iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); if(iCur!=json[attr]) { bStop=false; } if(attr=='opacity') { obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')'; obj.style.opacity=(iCur+iSpeed)/100; } else { obj.style[attr]=iCur+iSpeed+'px'; } } if(bStop) { clearInterval(obj.timer); if(fn) { fn(); } } }, 30) } </script> </head> <body> <ul id="ulList"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html>
3、信息滑动淡入加载显示
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #msgBox{ width:500px; margin:0 auto; padding:5px;} 8 .msgList{ filter:alpha(opacity=0); opacity:0; font-size:12px; line-height:1.6; border-bottom:1px solid #ddd;} 9 10 .box{ float:left;} 11 </style> 12 13 <script> 14 window.onload = function() 15 { 16 var oTxt = document.getElementById('txt1'); 17 var oBtn = document.getElementById('btn1'); 18 var oBox = document.getElementById('msgBox'); 19 20 oBtn.onclick = function() 21 { 22 var oMsg = document.createElement('div'); 23 var aDiv = oBox.getElementsByTagName('div'); 24 25 oMsg.className = 'msgList'; 26 oMsg.innerHTML = oTxt.value; 27 oTxt.value = ''; 28 29 if(aDiv.length==0){ 30 oBox.appendChild(oMsg); 31 }else{ 32 oBox.insertBefore(oMsg, aDiv[0]); 33 } 34 35 var iH = oMsg.offsetHeight; 36 oMsg.style.height = 0; 37 38 startMove(oMsg, {height:iH}, function(){ 39 startMove(oMsg, {opacity:100}); 40 }); 41 42 }; 43 }; 44 45 function getStyle(obj, attr) 46 { 47 if(obj.currentStyle){ 48 return obj.currentStyle; 49 }else{ 50 return getComputedStyle(obj, false)[attr]; 51 } 52 } 53 54 function startMove(obj, json, fn) 55 { 56 clearInterval(obj.timer); 57 obj.timer = setInterval(function(){ 58 var bStop = true; 59 60 for(var attr in json){ 61 var iCur = 0; 62 63 if(attr == 'opacity'){ 64 iCur = Math.round((parseFloat(getStyle(obj, attr))*100)); 65 }else{ 66 iCur = parseInt(getStyle(obj, attr)); 67 } 68 69 var iSpeed = (json[attr] - iCur) / 8; 70 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 71 72 if(iCur != json[attr]){ 73 bStop = false; 74 } 75 76 if(attr == 'opacity'){ 77 obj.style.filter = 'alpha(opacity=' + (iCur + iSpeed)+')'; 78 obj.style.opacity = (iCur + iSpeed) / 100; 79 }else{ 80 obj.style[attr] = iCur + iSpeed + 'px'; 81 } 82 } 83 84 if(bStop){ 85 clearInterval(obj.timer); 86 87 if(fn){ 88 fn(); 89 } 90 } 91 }, 30); 92 } 93 </script> 94 </head> 95 96 <body> 97 <div class="box"> 98 <textarea id="txt1" cols="40" rows="10"></textarea><br /> 99 <input id="btn1" type="button" value="提交信息" /> 100 </div> 101 <div id="msgBox"> 102 103 104 </div> 105 </body> 106 </html>
4、无缝滚动
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 *{ margin:0; padding:0; list-style:none;} 8 #div1{ width:480px; height:120px; margin:50px auto; border:1px solid black; position:relative; overflow:hidden;} 9 #div1 li{ float:left; padding:10px;} 10 #div1 li img{ display:block;} 11 #div1 ul{ position:absolute;} 12 </style> 13 <script> 14 window.onload = function() 15 { 16 var oDiv = document.getElementById('div1'); 17 var oUl = oDiv.getElementsByTagName('ul')[0]; 18 var aLi = oUl.getElementsByTagName('li'); 19 var aBtn = document.getElementsByTagName('input'); 20 var iSpeed = -3; 21 var timer = null; 22 23 oUl.innerHTML += oUl.innerHTML; 24 oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px'; 25 26 timer = setInterval(move, 30); 27 28 aBtn[0].onclick = function() 29 { 30 iSpeed = -3; 31 }; 32 33 aBtn[1].onclick = function() 34 { 35 iSpeed = 3; 36 }; 37 38 oDiv.onmouseover = function() 39 { 40 clearInterval(timer); 41 }; 42 43 oDiv.onmouseout = function() 44 { 45 timer = setInterval(move, 30); 46 }; 47 48 function move(){ 49 if(oUl.offsetLeft<-oUl.offsetWidth/2){ 50 oUl.style.left = '0px'; 51 }else if(oUl.offsetLeft>0){ 52 oUl.style.left = -oUl.offsetWidth/2 + 'px'; 53 } 54 oUl.style.left = oUl.offsetLeft + iSpeed + 'px'; 55 } 56 57 }; 58 </script> 59 </head> 60 61 <body> 62 <input type="button" value="向左" /> 63 <input type="button" value="向右" /> 64 <div id="div1"> 65 <ul> 66 <li><img src="images/1.jpg" width="100" height="100" /></li> 67 <li><img src="images/2.jpg" width="100" height="100" /></li> 68 <li><img src="images/3.jpg" width="100" height="100" /></li> 69 <li><img src="images/4.jpg" width="100" height="100" /></li> 70 </ul> 71 </div> 72 </body> 73 </html>