文章目录
一、运动基础
1.1 通过定位的left、top让DIV动起来
需要先通过，offsetLeft 来获取元素的左边距
在Chrome，opera和IE浏览器中offsetLeft是 元素边框外侧到浏览器窗口内侧的距离 且body.offsetLeft=0,
需要解决的问题：
- 1.2 速度 移动的快慢
- 1.3 不会停止
- 1.4 重复点击速度加快
- 1.5 速度取某些值不会停止
<body>
<input type="button" id="btn1" value="开始运动" onclick="startMove()">
<div id="div1"></div>
</body>
<script>
var timer = null;
function startMove(){
var div = document.getElementById('div1');
//解决重复点击速度加快
clearInterval(timer);
timer = setInterval(function(){
//速度
var speed=7;
//解决到达终点过后还会运动和点击还会移动
if(div.offsetLeft >= 300){
clearInterval(timer);
}else{
div.style.left=div.offsetLeft+speed+'px';
}
},30);
}
</script>
效果：
二、侧边栏
2.1 offsetLeft 元素边框外侧到浏览器窗口内侧的距离
在父元素均不设置position属性时，
在Chrome，opera和IE浏览器中offsetLeft是元素边框外侧到浏览器窗口内侧的距离且body.offsetLeft=0,
实例：鼠标移入移出 侧边栏移入移出。
<body>
<div id="div1">
<span>分享到</span>
</div>
</body>
<script>
window.onload=function(){
var div=document.getElementById('div1');
div.onmouseover=function(){
startMove(0)
};
div.onmouseout=function(){
startMove(-150);
}
}
var timer=null;
function startMove(itarget){
var div=document.getElementById('div1');
//自动判断是向左走，还是向右走
if(div.offsetLeft>itarget){
speed=-10;
}else{
speed=10;
}
clearInterval(timer);
timer=setInterval(function(){
if(div.offsetLeft == itarget){
clearInterval(timer);
}else{
div.style.left=div.offsetLeft+speed+'px';
}
},30);
}
</script>
效果:
三、淡入淡出图片
3.1 opacity:0-1; 设置元素的透明度
兼容性: filter:Alpha(opacity=[0-100]); 兼容IE以上的
0是完全透明，1是完全不透明
<body>
<div id="div1"></div>
</body>
<script>
window.onload=function(){
var div = document.getElementById('div1');
//手动设置的默认透明度
var alpha=30;
div.onmouseover=function(){
startMove(100);
}
div.onmouseout=function(){
startMove(30);
}
var timer=null;
function startMove(itarget){
var div = document.getElementById('div1');
//预防多开定时器引发混乱
clearInterval(timer);
timer = setInterval(function(){
var speed=0;
if(alpha<itarget){
speed=1;
}else{
speed= -1;
}
if(alpha == itarget){
clearInterval(timer);
}else{
alpha+=speed;
//IE8以上
div.style.opacity='alpha(opaticy='+alpha+')';
//兼容火狐和Chrome
div.style.opacity=alpha/100;
}
});
}
}
</script>
效果：
