标签：style blog http color io os ar strong art
方法一：此方法，不是我想的，但是超级喜欢，太漂亮了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02</title> <style> #outer{ width:1400px; height:400px; background-color: pink; } #inner{ width:200px; height:200px; border:6px solid #000; background-color: red; } </style> </head> <body> <div id="outer"> <div id="inner"></div> </div> <script> var inner = document.getElementById("inner"); var speed = 10; var interval; inner.onmouseover = function(){ clearInterval(interval); //如果没有这里的清除，那么每次触发mouseover事件的时候都会在原有的定时器上再增加一个定时器，速度回越来越快 interval = setInterval(change,30); } function change(){ inner.style.width = inner.clientWidth + speed + "px"; if(inner.clientWidth>=688&&speed>0||inner.clientWidth<=0&&speed<0){ speed = -speed; } } </script> </body> </html>
方法二：这个是我想的，但是相对于上边没那么好，但也算是一种方法吧，不喜勿喷……(*^__^*) 嘻嘻……
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02</title> <style> #outer{ width:1400px; height:400px; background-color: pink; } #inner{ width:200px; height:200px; border:6px solid #000; background-color: red; } </style> </head> <body> <div id="outer"> <div id="inner"></div> </div> <script> var inner = document.getElementById("inner"); var interval01 = null; var interval02 = null; interval01 = setInterval(add,30); function add(){ if(inner.clientWidth>=688){ clearInterval(interval01); interval02 = setInterval(reduce,30); }else{ inner.style.width = inner.clientWidth + 10 + "px"; } } function reduce(){ if(inner.clientWidth<=0){ clearInterval(interval02); interval01 = setInterval(add,30); }else{ inner.style.width = (inner.clientWidth - 10) + "px"; } } </script> </body> </html>
标签：style blog http color io os ar strong art
原文地址：http://www.cnblogs.com/bjchenxn/p/3968874.html
