运动第六课时

今天看完电商的晚会，感觉自己老了。。。。今天做两个实例。一个是类似于新浪微博的实时更新展示框，另外一个是无缝滚动的完整版。关于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>

View Code

第一步，搭建结构代码。最上面是一个文本区域，通过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>

View Code

第一步，构建样式----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>

运行效果图