今天看完电商的晚会，感觉自己老了。。。。今天做两个实例。一个是类似于新浪微博的实时更新展示框，另外一个是无缝滚动的完整版。关于javascript的运动，实现的形式很多，其实无非就是改变元素的属性值，主要有高度，宽度，透明度，文字等。个人觉得javascript的运动应用是最广泛的，也可以说是最难的位置，当然了，面向对象这一部分，同样很有难度。希望这个学期之前，把面向对象学习完，端午节回家做实例。
实例一-------内容更新
下面是整个实例的代码，依然应用了前面写的js框架。下面一一道来。
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>内容更新</title> 4 <style> 5 *{margin:0;padding:0;} 6 #ul1{width:200px;height:200px;list-style:none;border:1px solid #ccc;} 7 #ul1 li{overflow:hidden;border-bottom:1px dashed #666666;padding:2px;filter:alpha(opacity:30);opacity:0.3;} 8 #btn1{width:70px;height:40px;} 9 </style> 10 <script src="完美运动框架.js"></script> 11 <script> 12 window.onload=function(){ 13 var oTxt=document.getElementById('txt1'); 14 var oBtn=document.getElementById('btn1'); 15 var oUl=document.getElementById('ul1'); 16 17 oBtn.onclick=function () 18 { 19 var oLi=document.createElement('li'); 20 var aLi=oUl.getElementsByTagName('li'); 21 22 oLi.innerHTML=oTxt.value; 23 oTxt.value=''; 24 25 if(aLi.length){ //如果存在至少一个li，就在第一个li前面插入li 26 oUl.insertBefore(oLi,aLi[0]); 27 } 28 else{ 29 oUl.appendChild(oLi); //如果没有，那么就创建一个li，并且第一个就是元素就是第一个li 30 } 31 var iHeight=oLi.offsetHeight;//首先确定高度，但是没有使用，到后面才开始调用 32 oLi.style.height=0; //现在设置为0；隐藏li 33 startMove(oLi,{height:iHeight},function(){ 34 startMove(oLi,{opacity:100}) 35 }); 36 }; 37 }; 38 </script> 39 </head> 40 41 <body> 42 <textarea id="txt1" rows="10" cols="40"></textarea><br /> 43 <input id="btn1" type="button" value="发布" /> 44 <ul id="ul1"> 45 </ul> 46 </body> 47 </html>
第一步，搭建结构代码。最上面是一个文本区域，通过rows来设置行，cols设置列。其次，下面是一个按钮。最下面是一个ul列表，里面用来生成li元素。
关于样式----li设置了overflow：hidden用来防止内容溢出。透明度的两种写法为了兼容IE，FF。其他的样式没什么好说的了。
1 <style> 2 *{margin:0;padding:0;} 3 #ul1{width:200px;height:200px;list-style:none;border:1px solid #ccc;} 4 #ul1 li{overflow:hidden;border-bottom:1px dashed #666666;padding:2px;filter:alpha(opacity:30);opacity:0.3;} 5 #btn1{width:70px;height:40px;} 6 </style> 7 </head> 8 <body> 9 <textarea id="txt1" rows="10" cols="40"></textarea><br /> 10 <input id="btn1" type="button" value="发布" /> 11 <ul id="ul1"> 12 </ul> 13 </body>
第二步，开始写Js。首先引入框架，也就是startMove函数。首先获取各种元素，然后给按钮添加事件，创建li元素用createElement方法。其次令oLi.innerHTML的值等于你输入的文本框的值，执行这一句之后，清空文本框。接着---要确定插入li元素的位置，进行一个判断，如果存在至少一个li,那么就在他的前面插入li元素，用insertBefore函数，如果没有li元素，就是在后面添加li元素，其实也就是它本身，用appendChild方法。最后通过startMove函数来开始运动，总共有两个步骤，一是插入li的高度慢慢伸展开，二是透明度变为100。最后提醒一下，使用ul来包含li会产生一点BUG，产生新内容的时候会卡住，所以把UL替换为div会更好，没有了在IE下产生的卡壳现象。
1 <script src="完美运动框架.js"></script> 2 <script> 3 window.onload=function(){ 4 var oTxt=document.getElementById('txt1'); 5 var oBtn=document.getElementById('btn1'); 6 var oUl=document.getElementById('ul1'); 7 8 oBtn.onclick=function () 9 { 10 var oLi=document.createElement('li'); 11 var aLi=oUl.getElementsByTagName('li'); 12 13 oLi.innerHTML=oTxt.value; 14 oTxt.value=''; 15 16 if(aLi.length){ //如果存在至少一个li，就在第一个li前面插入li 17 oUl.insertBefore(oLi,aLi[0]); 18 } 19 else{ 20 oUl.appendChild(oLi); //如果没有，那么就创建一个li，并且第一个就是元素就是第一个li 21 } 22 var iHeight=oLi.offsetHeight;//首先确定高度，但是没有使用，到后面才开始调用 23 oLi.style.height=0; //现在设置为0；隐藏li 24 startMove(oLi,{height:iHeight},function(){ 25 startMove(oLi,{opacity:100}) 26 }); 27 }; 28 }; 29 </script>
运行效果图
实例二-------无缝滚动
无缝滚动我就不多说了，网站上面到处可见，附上整个代码。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style> 7 *{margin:0;padding:0;} 8 #div1{position:relative; border:1px solid black; width:680px; height:132px; margin:10px auto; overflow:hidden;} 9 ul{position:absolute; left:0;} 10 ul li{list-style:none; float:left; width:150px; height:112px; padding:10px;} 11 ul li img{width:150px;height:112px;} 12 </style> 13 <script> 14 window.onload=function(){ 15 var oDiv=document.getElementById('div1'); 16 var oUl=document.getElementsByTagName('ul')[0];//通过已经设置的第一个ul获取元素 17 var aLi=oUl.getElementsByTagName('li'); 18 var aA=document.getElementsByTagName('a'); 19 var iSpeed=10; 20 var timer=null; 21 oUl.innerHTML+=oUl.innerHTML;//复制一份四个图片 22 oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//ul的宽度=li的个数*第一个li的长度，因为不能预知有多少个li 23 24 function fnMove() 25 { 26 if(oUl.offsetLeft<-oUl.offsetWidth/2)//如果ul的offsetleft小于offsetwidth的一半，那么ul的左边为0 27 { 28 oUl.style.left=0; 29 } 30 else if(oUl.offsetLeft>0) 31 { 32 oUl.style.left=-oUl.offsetWidth/2+'px'; 33 } 34 oUl.style.left=oUl.offsetLeft+iSpeed+'px'; 35 } 36 37 timer=setInterval(fnMove,50) 38 39 aA[0].onclick=function(){ 40 iSpeed=-10; 41 } 42 aA[1].onclick=function(){ 43 iSpeed=10; 44 } 45 46 oDiv.onmouseover=function(){ 47 clearInterval(timer); 48 } 49 oDiv.onmouseout=function(){ 50 timer=setInterval(fnMove,50); 51 } 52 } 53 </script> 54 </head> 55 56 <body> 57 <a href="javascript:">←</a> 58 <a href="javascript:">→</a> 59 <div id="div1"> 60 <ul> 61 <li><img src="1.jpg" /></li> 62 <li><img src="2.jpg" /></li> 63 <li><img src="3.jpg" /></li> 64 <li><img src="4.jpg" /></li> 65 </ul> 66 </div> 67 </body> 68 </html>
第一步，构建样式----HTML+CSS。创建一个div用来包含所有的内容，每一个li里面插入一张图片，如果你喜欢，可以自己试着做一个，用自己喜欢的照片。a标签用来控制左右移动。给div一个overflow：hidden来溢出隐藏。li左浮动，在一排显示。其他的也很简单，略过。。。。
1 <style> 2 *{margin:0;padding:0;} 3 #div1{position:relative; border:1px solid black; width:680px; height:132px; margin:10px auto; overflow:hidden;} 4 ul{position:absolute; left:0;} 5 ul li{list-style:none; float:left; width:150px; height:112px; padding:10px;} 6 ul li img{width:150px;height:112px;} 7 </style> 8 </head> 9 <body> 10 <a href="javascript:">←</a> 11 <a href="javascript:">→</a> 12 <div id="div1"> 13 <ul> 14 <li><img src="1.jpg" /></li> 15 <li><img src="2.jpg" /></li> 16 <li><img src="3.jpg" /></li> 17 <li><img src="4.jpg" /></li> 18 </ul> 19 </div> 20 </body>
第二步，书写JS。首先获取所有的元素，设置iSpeed可以方便来赋值，把图片的左右滚动来封装成一个函数，fnMove()方便来调用。关于fnMove()-----如果oUl.offsetLeft小于他的一半，那么就把他的左边距离设置为0，把他走过的一半的时候拖回来，实现无限循环；相反的，如果oUl.offsetLeft>0，那么左边的距离为
-oUl.offsetWidth/2+'px'。把定时器赋值给一个变量timer，当点击左箭头的时候，图片向左滚动，速度为负的；反之向右滚动，速度为正数。当鼠标移入oDiv的时候，用清楚定时器来清楚滚动，当移除oDiv的时候再次开启定时器。
1 <script> 2 window.onload=function(){ 3 var oDiv=document.getElementById('div1'); 4 var oUl=document.getElementsByTagName('ul')[0];//通过已经设置的第一个ul获取元素 5 var aLi=oUl.getElementsByTagName('li'); 6 var aA=document.getElementsByTagName('a'); 7 var iSpeed=10; 8 var timer=null; 9 oUl.innerHTML+=oUl.innerHTML;//复制一份四个图片 10 oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';//ul的宽度=li的个数*第一个li的长度，因为不能预知有多少个li 11 12 function fnMove() 13 { 14 if(oUl.offsetLeft<-oUl.offsetWidth/2)//如果ul的offsetleft小于offsetwidth的一半，那么ul的左边为0 15 { 16 oUl.style.left=0; 17 } 18 else if(oUl.offsetLeft>0) 19 { 20 oUl.style.left=-oUl.offsetWidth/2+'px'; 21 } 22 oUl.style.left=oUl.offsetLeft+iSpeed+'px'; 23 } 24 25 timer=setInterval(fnMove,50) 26 27 aA[0].onclick=function(){ 28 iSpeed=-10; 29 } 30 aA[1].onclick=function(){ 31 iSpeed=10; 32 } 33 34 oDiv.onmouseover=function(){ 35 clearInterval(timer); 36 } 37 oDiv.onmouseout=function(){ 38 timer=setInterval(fnMove,50); 39 } 40 } 41 </script>
运行效果图