javascript勻速運動實現淡入淡出的效果（程式碼）
- 不言原創
- 2018-08-31 10:19:491182瀏覽
這篇文章帶給大家的內容是關於javascript勻速運動實現淡入淡出的效果（代碼） ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。
原理
在做p或圖片淡入淡出的時候，我們主要用到了透明度樣式filter: alpha(opacity:30)相容ie，opacity:0.3相容火狐chrome。
運動淡入淡出時用到了定時器setInterval;clearInterval;
js操作淡入淡出時用下面形式修改透明度op.style. filter="alpha(opacity:" alpha ")";op.style.opacity=alpha/100;
注意：透明度無法直接在js中做判斷，我們採用alpha參數做比較，最後應用在物件上。
實作div淡入淡出
<!DOCTYPE html>
<html>
<head>
<title>div淡入淡出</title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
/* ie */
filter: alpha(opacity:30);
/* chrome firefox */
opacity:0.3;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("div1");
oDiv.onmouseover=function(){
startMove(100);
}
oDiv.onmouseout=function(){
startMove(30);
}
}
var timer=null;
var alpha=30;//透明度默认30
function startMove(iTarget){
var oDiv=document.getElementById("div1");
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(alpha<iTarget){
speed=5;
}else{
speed=-5;
}
if(alpha===iTarget){
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>實作圖片淡入淡出
<!DOCTYPE html>
<html>
<head>
<title>图片淡入淡出</title>
<style>
#img1{
/* ie */
filter: alpha(opacity:30);
/* chrome firefox */
opacity: 0.3;
border: 1px solid #000;
}
</style>
<script>
window.onload=function(){
var oImg=document.getElementById("img1");
oImg.onmouseover=function(){
startMove(100);
}
oImg.onmouseout=function(){
startMove(30);
}
}
var timer=null;
var alpha=30;//透明度默认30
function startMove(iTarget){
var oImg=document.getElementById("img1");
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(alpha<iTarget){
speed=5;
}else{
speed=-5;
}
if(alpha===iTarget){
clearInterval(timer);
}else{
alpha+=speed;
oImg.style.filter="alpha(opacity:"+alpha+")";
oImg.style.opacity=alpha/100;
}
},30);
}
</script>
</head>
<body>
<img id="img1" src="img1.jpg" alt="">
</body>
</html>相關推薦：
##javascript勻速動作實作側邊欄分享效果（程式碼）
########################################################以上是javascript勻速運動實現淡入淡出的效果（程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn