1.匀速运动
效果目标：
点击按钮时，目标开始移动，运动到指定像素值时停下来
大致思路：
设置一个定时器，物体每30毫秒运动指定的位移（定义为速度）当到达指定位置时关闭定时器
注意事项：
当物体开始运动时，再次点击按钮会导致物体速度加快，这是因为每点击一次按钮会打开一个定时器，多次点击就会打开多个定时器，解决办法是在定时器开启前关闭所有的定时器
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 150px;
background: #7FFF00;
position: absolute;
left: 0px;
top: 70px;
}
</style>
<script type="text/javascript">
var timer = null;
function startMove(){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval (function (){
var speed = 5;
if(oDiv.offsetLeft >= 400){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft+speed+"px";
}
},30);
}
</script>
</head>
<body>
<input type="button" value="开始运动" id="btn1" onclick="startMove()"/>
<div id="div1"></div>
</body>
</html>
2.侧边隐藏栏
效果目标:
页面有隐藏的部分，当鼠标移入隐藏栏标题时，隐藏的部分匀速移出显示；当鼠标移出隐藏栏时，隐藏的部分匀速移入隐藏
大致思路：
同样使用定时器来完成物体的移入移出，每30毫秒使物体移动指定位移，并设置鼠标的移入移出事件；因物体移动的方向会有不同，所以增加对速度判断正值和负值
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 250px;
background: aqua;
position: absolute;
left:-200px;
}
#div1 span{
width: 20px;
height: 50px;
background: #FF0000;
position: absolute;
line-height: 20px;
right: -20px;
top: 70px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover = function(){
startMove(0);
}
oDiv.onmouseout = function(){
startMove(-200);
}
}
var timer = null;
function startMove (size){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(oDiv.offsetLeft>size){
speed = -10;
}else{
speed = 10;
}
if(oDiv.offsetLeft == size){
clearInterval(timer);
}else{
oDiv.style.left = oDiv.offsetLeft+speed+"px";
}
},30);
}
</script>
</head>
<body>
<div id="div1">
<span>分享</span>
</div>
</body>
</html>
3.透明度的改变
效果目标：
当鼠标移入物体时背景颜色透明度匀速变为100，当鼠标移出后透明度匀速下降到30
大致思路：
当传入参数大于开始设定透明度的值时，需要速度为正，反之速度取负值，同样使用定时器每30毫秒增加相应的透明度值，设置鼠标移入移出事件调用函数并传入相应参数
注意事项：
布局时透明度的设置注意浏览器的兼容：filter:alpha(opacity:30);和opacity:0.3;
调用函数前设置一个alpha变量来代表初始设置透明度的值
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: #FF0000;
filter:alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv = document.getElementById('div1');
oDiv.onmouseover=function (){
startMove(100);
}
oDiv.onmouseout=function (){
startMove(30);
}
}
var timer = null;
var alpha = 30;
function startMove(size){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(alpha<size){
speed = 10;
}else{
speed = -10;
}
if(alpha==size){
clearInterval(timer);
}else{
alpha += speed;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},30)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
4.物体的缓冲运动
效果目标：
点击开始按钮，物体运动到指定位置，速度逐渐减小
大致思路：
使用指定的位置减去现在的位置再除以一个数，为此时的速度，但速度必须为整数，所以要使用到数学函数，当速度大于0时向上取整，当速度小于0时向下取整，这样能实现物体刚好处于指定位置的现象
注意事项：
不是每个速度得到的时候都是整数，因为实时的位置改变或者因为被除数不能被除数除尽所以需要取整；当负值向上取整时会像0的方向移动，所以当小于0时需要向下取整
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: #00FFFF;
position: absolute;
left: 0px;
top: 50px;
}
#div2{
width: 1px;
height: 500px;
background: #000;
position: absolute;
left: 300px;
top: 0px;
}
</style>
<script type="text/javascript">
function startMove(){
var oDiv = document.getElementById('div1');
setInterval(function(){
var speed = (300-oDiv.offsetLeft)/7;
if(speed>0){
speed = Math.ceil(speed);
}else{
speed = Math.floor(speed);
}
oDiv.style.left = oDiv.offsetLeft+speed+'px';
document.title = oDiv.offsetLeft+','+speed;
},30)
}
</script>
</head>
<body>
<input type="button" value="开始运动" onclick="startMove()"/>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
5.侧边悬浮框
效果目标：
浏览器的侧边有一物体无论可视范围是哪里都处于规定的位置，随着滚动条缓冲滚动到可视范围内的相同位置
大致思路：
布局后，首先设置调用函数，速度设置和缓冲运动原理相同，当传入值与此时物体位置相同时关闭定时器，不相同时就设置物体位置
调用函数时传入参数
注意事项：
设置物体处于可是页面的正中位置
document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop
图片解释如下：
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 70px;
height: 100px;
background: #7FFF00;
position: absolute;
right: 0px;
bottom: 0px;
}
</style>
<script type="text/javascript">
window.onscroll = function(){
var oDiv = document.getElementById('div1');
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
startMove(parseInt((document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop));
}
var timer = null;
function startMove(size){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = (size-oDiv.offsetTop)/5;
if(speed>0){
Math.ceil(speed);
}else{
Math.floor(speed);
}
if(oDiv.offsetTop==size){
clearInterval(timer);
}else{
oDiv.style.top = oDiv.offsetTop + speed +'px';
}
},30)
}
</script>
</head>
<body style="height: 2000px;">
<div id="div1"></div>
</body>
</html>
6.匀速运动和停止
效果目标：
使目标物体多次匀速运动到指定位置并停止，位置不唯一
大致思路：
按钮onclick事件调用函数并传入参数，使用定时器，每30毫秒运动指定位移运动到目标位置，
注意事项：
使用数学方法Math.abs()计算出传入参数和物体现在位置的差值，绝对值<=速度值时关闭定时器，使物体的位置为目地位置，>速度值的话就继续移动物体位置
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: #7FFF00;
position: absolute;
left: 600px;
top: 60px;
}
#div2{
width: 1px;
height: 500px;
background: #000000;
position: absolute;
left: 100px;
top: 0px;
}
#div3{
width: 1px;
height: 500px;
background: #000000;
position: absolute;
left: 300px;
top: 0px;
}
</style>
<script type="text/javascript">
var timer = null;
function startMove(size){
var oDiv = document.getElementById('div1');
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if(size>oDiv.offsetLeft){
speed = 8;
}else{
speed = -8;
}
if(Math.abs(size-oDiv.offsetLeft)<=8){
clearInterval(timer);
oDiv.style.left=size+'px';
}else{
oDiv.style.left = oDiv.offsetLeft + speed +'px';
}
},30)
}
</script>
</head>
<body>
<input type="button" value="到100" onclick="startMove(100)"/>
<input type="button" value="到300" onclick="startMove(300)"/>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
7.多个目标变宽变窄
效果目标：
实现页面中多个div布局，鼠标移入时目标div变宽，移出时返回原来样式
大致思路：
布局多个div，定义要调用的函数，用定时器来完成每30毫秒运动的位移，若此时位置与设定位置相同，将定时器停止，若不同则设置目标物体的宽，变宽变窄由速度的正负值来决定
注意事项：
每开启一个定时器时都会将之前的定时器关掉，所以要为每一个目标div添加一个定时器，并且在关闭定时器的时候指定关闭的是哪一个定时器；这样就不会发生上一个目标div还未执行完就被关闭的情况
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 100px;
height: 30px;
background: #7FFF00;
margin: 10px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var aDiv = document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++){
aDiv[i].timer = null;
aDiv[i].onmouseover = function(){
startMove(this,345)
}
aDiv[i].onmouseout = function(){
startMove(this,100)
}
}
}
function startMove(obj,size){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (size-obj.offsetWidth)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(size == obj.offsetWidth){
clearInterval(obj.timer);
}else{
obj.style.width = obj.offsetWidth + speed +'px';
}
},30)
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
8.多物体透明度改变
效果目标：
使布局中的多个物体透明度通过鼠标的移入移出而改变
大致思路：
（同7）
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background: #FFFF00;
float: left;
filter: alpha(opacity:30);
opacity: 0.3;
margin: 20px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var aDiv = document.getElementsByTagName('div');
for(var i=0;i<aDiv.length;i++){
aDiv[i].alpha = 30;
aDiv[i].timer = null;
aDiv[i].onmouseover=function(){
startMove(this,100);
}
aDiv[i].onmouseout=function(){
startMove(this,30);
}
}
}
function startMove(obj,size){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (size-obj.alpha)/6
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(size==obj.alpha){
clearInterval(obj.timer);
}else{
obj.alpha += speed;
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
obj.style.opacity= obj.alpha/100;
}
},30)
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
9.物体改变样式多合一
效果目标：
物体多种样式的改变
大致思路：
原理相似，需要单独设置获取属性定义函数
注意事项：
需要获取属性时单独定义函数
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
float: left;
background: #FFFF00;
margin: 20px;
border: 10px solid #000000;
font-size: 14px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv1 = document.getElementById('div1');
oDiv1.onmouseover = function (){
startMove(this,'height',400);
}
oDiv1.onmouseout = function (){
startMove(this,'height',200);
}
var oDiv2 = document.getElementById('div2');
oDiv2.onmouseover = function (){
startMove(this,'width',400);
}
oDiv2.onmouseout = function (){
startMove(this,'width',200);
}
var oDiv3 = document.getElementById('div3');
oDiv3.onmouseover = function (){
startMove(this,'fontSize',50);
}
oDiv3.onmouseout = function (){
startMove(this,'fontSize',20);
}
var oDiv4 = document.getElementById('div4');
oDiv4.onmouseover = function (){
startMove(this,'borderWidth',50);
}
oDiv4.onmouseout = function (){
startMove(this,'borderWidth',20);
}
}
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
};
function startMove(obj,attr,size){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var cur = parseInt(getStyle(obj,attr));
var speed = (size-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==size){
clearInterval(obj.timer);
}else{
obj.style[attr]=cur+speed+'px';
}
},30);
}
</script>
</head>
<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">safasfasd</div>
<div id="div4"></div>
</body>
</html>
10.物体的任意运动
效果目标：
实现一个物体使用同一框架完成多种样式改变操作
大致思路：
思路原理同（9）类似
注意事项：
需要在主要函数中设置判断是否为透明度的样式
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
float: left;
background: #7FFF00;
margin: 20px;
border: 10px solid #000;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv1 = document.getElementById('div1');
oDiv1.onmouseover=function(){
startMove(this,'opacity',100);
}
oDiv1.onmouseout=function(){
startMove(this,'opacity',30);
}
}
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,attr,size){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var cur = 0;
if(attr=='opacity'){
cur = parseFloat(getStyle(obj,attr))*100;
}else{
cur = parseInt(getStyle(obj,attr))
}
var speed = (size-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==size){
clearInterval(obj.timer);
}else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity:'+cur+speed+')';
obj.style.opacity = (cur+speed)/100;
}else{
obj.style[attr]=cur+speed+'px';
}
}
},30)
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
学习还是需要多多练习呀！！！
这里仅仅是运动的一小部分，有问题请多指教
1754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
