运动---第二课时

渐变的图片---代码写完了，结果提示没有预料的错误，可能是哪个位置的符号或者字母写错了，大致的代码都是正确的，检查了半天没看出来。

 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     #img1{filter:alpha(opacity:30);opacity:0.3;width:500px;height:500px;}
 8 </style>
 9 <script>
10 window.onload=function ()
11 {
12     var oImg=document.getElementById('img1');
13     
14     oImg.onmouseover=function ()
15     {
16         startMove(100);
17     }
18     
19     oImg.onmouseout=function ()
20     {
21         startMove(30);
22     }
23 }
24 
25     var timer=null;
26     var alpha=30;
27     function startMove(iTarget){
28         clearInterval(timer);
29         var oImg=document.getElementById('img1');
30         timer=setInterval(function(){
31             var iSpeed=0;
32             if(alpha<iTarget){
33                 iSpeed=1;//可以修改速度的快慢
34             }
35             else{
36                 iSpeed=-1;
37             }
38             
39             if(alpha==iTarget){
40                 clearInterval(timer);
41             }
42             else{
43                 alpha=+iSpeed;//这里是最重要的，把透明度来累加或者累减；
44                 oImg.style.filter='alpha(opacity'+alpha+')';//IE6的兼容情况
45                 oImg.style.opacity=alpha/100;//表达的透明度不一样，表示为0.X
46                 document.title=alpha;//改变标题
47             }
48         },30);
49             
50         };
51     }
52 </script>
53 </head>
54 
55 <body>
56 <img id="img1" src="1.jpg" />
57 </body>
58 </html>

 数字取整

1 <script>
2     //alert(Math.ceil('2.3'));向上取整
3     //alert(Math.floor('2.3'));向下取整----顾名思义，按照数字的排列顺序进行取舍
4 </script>

缓冲运动的div

 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 #div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
 8 </style>
 9 <script>
10     var timer=null;
11     function startMove(iTarget){
12         clearInterval(timer);
13         var oDiv=document.getElementById('div1');
14         timer=setInterval(function(){
15             var iSpeed=(iTarget-oDiv.offsetLeft)/8;//计算距离终点的距离，速度越来越小
16             if(iSpeed>0)
17             {
18                 iSpeed=Math.ceil(iSpeed);//向上取整----如果div从左向右移动，速度是正的----由于一个一个的做除法会出现小数点，不能到达指定的300像素的位置，所以要取整
19             }
20             else
21             {
22                 iSpeed=Math.floor(iSpeed);//向下取整----如果div从右向左，那么速度是负的
23             }
24             if(oDiv.offsetLeft==iTarget)
25             {
26                 clearInterval(timer);
27             }
28             else{
29                 oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';//当前左边距+移动的速度
30             }
31         },30);
32     }
33 </script>
34 </head>
35 
36 <body>
37 <input type="button" value="缓冲运动" onclick="startMove(300)" />
38 <div id="div1"></div>
39 <span style="width:1px;height:500px;background:#000000;position:absolute;left:300px;"></span>//参照物
40 </body>
41 </html>

 上下滚动的侧边栏

 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     #div1{width:100px;height:100px;background:#0033CC;border:2px solid dashed;position:absolute;right:0;}
 8 </style>
 9 <script>
10     window.onscroll=function(){ 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//鼠标的滚动事件
11         var oDiv=document.getElementById('div1');
12         var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//scrollTop就是元素的顶部到滚动条的顶部的距离；
13         var a=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2;        //oDiv.style.top=scrollTop+(document.documentElement.clientHeight-oDiv.offsetHeight)/2+'px';　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//距离=不可见的scrollTop+（可视区的高度-div的高度）/2
14         startMove(a);
15     };
16     var timer=null;
17     function startMove(iTarget){
18         var oDiv=document.getElementById('div1');
19         clearInterval(timer);
20         timer=setInterval(function(){
21             var iSpeed=(iTarget-oDiv.offsetTop)/8;　　　　　　　　　　　　　　　　　　　　//运动系数可以适当的改变，offsetTop就是div顶部距离浏览器顶部的距离
22             iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);　　　　　　　　　　　//三目----简写if else判断句
23             if(iSpeed==iTarget){
24                 clearInterval(timer);
25             }
26             else{
27                 oDiv.style.top=iSpeed+oDiv.offsetTop+'px';　　　　　　　　　　　　　　　　//速度+即时的高度
28             }
29         },30);
30     }
31 </script>
32 </head>
33 
34 <body style="height:3000px;">
35 <div id="div1">
36     
37 </div>
38 </body>
39 </html>

关于一些Top,Height,Left的区别

去绝对值

1 <script>
2     alert(Math.abs(-6.3));
3 </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 <style>
 5 #div1 {width:100px; height:100px; position:absolute; background:red; left:0; top:50px;}
 6 </style>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 <title>无标题文档</title>
 9 <script type="text/javascript">
10 var timer=null;
11 
12 function startMove(iTarget)
13 {
14     var oDiv=document.getElementById('div1');
15     
16     clearInterval(timer);
17     timer=setInterval(function (){
18         var iSpeed=0;
19         
20         if(oDiv.offsetLeft<iTarget)//如果左边的距离小于目标值，那么就增加距离。
21         {
22             iSpeed=7;
23         }
24         else
25         {
26             iSpeed=-7;//反之，减少距离
27         }
28         
29         if(Math.abs(oDiv.offsetLeft-iTarget)<7)    //使用取绝对值的方法就不用判断，而是增加最后一次不完整的距离，这个距离大于0，小于7；是否到达终点
30         {
31             clearInterval(timer);    //到达终点
32             
33             oDiv.style.left=iTarget+'px';//强制性的执行最后的一步运动
34         }
35         else
36         {
37             oDiv.style.left=oDiv.offsetLeft+iSpeed+'px';    //到达之前
38         }
39     }, 30);
40 }
41 
42 </script>
43 </head>
44 
45 <body>
46 <input type="button" value="开始运动" onclick="startMove(300)" />
47 <div id="div1"></div>
48 <span style="width:1px; height:300px; background:black; position:absolute; left:300px; top:0;"></span>
49 </body>
50 </html>

参考效果图

posted @ 2013-05-28 20:21  Paxster  阅读(254)  评论(2)  编辑  收藏  举报