文章目錄
一、運動基礎
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>
效果：
