渐变的图片---代码写完了，结果提示没有预料的错误，可能是哪个位置的符号或者字母写错了，大致的代码都是正确的，检查了半天没看出来。
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="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="1px; height:300px; background:black; position:absolute; left:300px; top:0;"></span> 49 </body> 50 </html>
参考效果图