1.JS运动基础
运动框架
在开始运动时，关闭已有定时器
把运动和停止隔开(if/else)
1.匀速运动
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>01-运动基础</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute; top:50px; left:0px;}
</style>
<script>
//定时器
var timer=null;
function startMove()
{
var oDiv=document.getElementById('div1');
//为了保证只有一个定时器工作,把之前的定时器全关了
clearInterval(timer);
timer=setInterval(function (){
var speed=1;
if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开始运动" onclick="startMove()" />
<div id="div1">
</div>
</body>
</html>
匀速运动
- 2.分享到
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function ()
{
startMove(0);
};
oDiv.onmouseout=function ()
{
startMove(-150);
};
};
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
//先初始化速度
var speed=0;
//开始位置 > 终点位置:比方 起点:350 终点 50 要想到50这个位置,速度得为:-10;
//oDiv.offsetLeft : 起点位置
//iTarget终点位置
if(oDiv.offsetLeft>iTarget)
{
speed=-10;
}
else
{
speed=10;
}
//这个函数存在一个漏洞,如果oDiv.offsetLef 刚好t >=iTarget 定时器不会停止
if(oDiv.offsetLeft==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
}, 30);
}
</script>
</head>
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
</html>
分享到
- 3.淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-淡入淡出</title>
<style>
div{
width: 200px;
height: 200px;
background-color: red;
opacity:0.3; //兼容chrome和ff
filtr:alpha(opacity:30);//兼容低版本的IE
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmouseover = function () {
changeAlpha(100);
};
oDiv.onmouseout = function () {
changeAlpha(30);
};
var timer = null;
var alpha = 30;
function changeAlpha(isTarget) {
clearInterval(timer);
var speed = 0;
timer = setInterval(function () {
//注意这个速度判断要写在定时器里面
if (alpha < isTarget){
speed = 10;
}else {
speed = -10;
}
if (alpha == isTarget){
clearInterval(timer);
}else {
alpha += speed;
oDiv.style.opacity = alpha/100;
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
}
},30);
}
}
</script>
</head>
<body>
<div></div>
</body>
</html>
淡入淡出
3.缓冲运动
- 逐渐变慢，最后停止
- 距离越远速度越大
- 速度由距离决定
- 速度=(目标值-当前值)/缩放系数
Math.ceil():向上取整 Math.ceil(3.41) 结果是4 ,Math.ceil(-9.8) 结果是 -9;
Math.floor():向下取整 Math.floor(-0.9) 结果是 -1;
- 例子：缓冲菜单
Bug：速度取整,取小数会出事!!!
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
padding: 0;
margin: 0;
}
#div1 {width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
</style>
<script>
function startMove()
{
var oDiv=document.getElementById('div1');
setInterval(function (){
var speed=(300-oDiv.offsetLeft)/10;
//缓冲运动一定要取整,否则会出事的!!!!
//Math.ceil():向上取整 Math.ceil(3.41) 结果是4 ,Math.ceil(-9.8) 结果是 -9;
//Math.floor():向下取整 Math.floor(-0.9) 结果是 -1;
//speed=Math.floor(speed);
//速度大于0,向上取整,速度小于0,向下取整;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
//速度不能为小数:速度里面有小数,导致oDiv.style.left的值带有小数,而oDiv.style.left会自动取整,导致他把小数抹掉了,导致误差!!!
//故把速度向上取整,来避免此误差
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>
缓冲运动一(chorme浏览器上有兼容问题)
- 跟随页面滚动的缓冲侧边栏
- 潜在问题：目标值不是整数时,会出现抖动的情况,只要强转成整数就可以了!可能会有0.5像素的误差,可以忽略不计!
右侧悬浮框
先了解下一些基础知识
获取浏览器滚动条滚动的距离
1.在设计页面时可能经常会用到固定层的位置，这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标，这里可能就会用到document.body.scrollTop等属性，但是此属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0，如果不要此标签则一切正常，那么在xhtml页面怎么获得body的坐标呢，当然有办法-使用document.documentElement来取代document.body,可以这样写
例：
获取浏览器滚动条滚动的距离
var top = document.documentElement.scrollTop || document.body.scrollTop;
在JavaScript里||是个好东西，除了能用在if等条件判断里，还能用在变量赋值上。那么上例等同于下例。
例：var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
这么写可以得到很好的兼容性。
相反，如果不做声明的话，document.documentElement.scrollTop反而会显示为0。
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
<html>
<head>
<meta charset="utf-8">
<title>右侧悬浮窗</title>
<style>
#div1 {width:100px; height:150px; background:red; position:absolute; right:0; bottom:0;}
</style>
<script>
window.onscroll=function ()
{
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
//oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
startMove(document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop);
};
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var speed=(iTarget-oDiv.offsetTop)/4;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetTop==iTarget)
{
clearInterval(timer);
}
else
{
oDiv.style.top=oDiv.offsetTop+speed+'px';
}
}, 30);
}
</script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>
右侧悬浮窗
匀速停止
//绝对值,
Math.abs()
比如:(Math.abs(-6)) 和 (Math.abs(6))结果都是6,他的意思就是把值变成没有正负号的样子,都是正的.
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
#div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
</style>
<script>
var timer=null;
function startMove(iTarget)
{
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function (){
var speed=0;
if(oDiv.offsetLeft<iTarget)
{
speed=10;
}
else
{
speed=-10;
}
//目标和物体之间的距离的绝对值小于等于速度,就算他达到目标了.
if(Math.abs(iTarget-oDiv.offsetLeft)<=Math.abs(speed))
{
clearInterval(timer);
//目标和物体之间的有一小小的距离,计算误差导致的.
//让left直接等于目标点
oDiv.style.left=iTarget+'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>
匀速停止
Math.round();四舍五入
