最近剛好在看之前妙趣網站的javascript 初級運動教程，教程里說設置圖片的透明度使用了一個變量。這種方法確實不錯，但是燕姐喜歡麻煩。就用自己的理解方法寫了一遍。其中也是各種坑。現在先把一個圖片的淡入淡出效果代碼放出來。
一張圖片的淡入淡出##
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.img01{
width: 400px;
height: 400px;
opacity: 0.3;
filter: alpha(opacity=30);
}
</style>
</head>
<body>
<img class="img01" id="img01" src="1.jpg" alt="">
<script>
/**
* 使用js勻速運動實現圖片的淡入淡出效果
* 這里沒有使用變量而是用了一個更麻煩的方法。其中遇到種種的問題
* 出錯問題點:
* 1、首先使用getStyle獲得行內樣式的opacity,注意點這個獲得的alpha值其實是一個字符串類型，要轉為數值型
* 2、特別要注意在將值付給opactiy就要這里有一個小數精確的問題: 例如0.1+0.2不等於0.3,解決這個問題可以分別先*10，在除以10
* 3、timer 原先被我定義在startMove中。當快速移入的時候就會出現閃屏的問題。需要把timer移到外面來。
*/
window.onload = function () {
var oImg = document.getElementById('img01');
var alpha = Number(getStyle(oImg,"opacity"));
oImg.onmouseover = function () {
startMove(1);
};
oImg.onmouseout = function () {
startMove(0.3);
};
var timer = null;
function startMove (iTarget) {
var oImg = document.getElementById('img01');
clearInterval(timer);
timer = setInterval(function(){
var speed = 0;
if( alpha < iTarget ) {
speed = 0.1;
}else{
speed = -0.1;
}
if(alpha === iTarget){
clearInterval(timer);
}else{
alpha = (alpha*10 + speed*10)/10;
oImg.style.opacity = alpha;
oImg.style.filter = "alpha(opacity="+ alpha*100 +")";
}
},30);
}
function getStyle (obj, attr) {
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[attr];
}else{
return obj.currentStyle[attr];
}
}
};
</script>
</body>
</html>
在做多張圖片的淡入淡出的時候也是遇到各種問題。話說我是問題君嗎？哭！ 后來實在找不出問題的在哪里，就到 segementfalut上問問題，好心人幫助回答了問題。現在把大神的代碼放出來，其中有一篇他自己寫的相關文章還不錯，推薦給大家
http://www.cnblogs.com/silin6/p/4333999.html
多個圖片淡入淡出##
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.imglist {
width: 1000px;
height: 400px;
}
.imglist ul {
width: 1000px;
overflow: hidden;
}
.imglist ul li.item {
width: 200px;
height: 400px;
float: left;
opacity: 0.3;
filter: alpha(opacity=30);
}
.imglist ul li.item img {
width: 200px;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div class="imglist">
<ul id="imglist">
<li class="item i1"><img src="1.jpg" alt=""></li>
<li class="item i2"><img src="1.jpg" alt=""></li>
<li class="item i3"><img src="1.jpg" alt=""></li>
<li class="item i4"><img src="1.jpg" alt=""></li>
<li class="item i5"><img src="1.jpg" alt=""></li>
</ul>
</div>
<script>
window.onload = function () {
var oImg = document.getElementById('imglist');
var oImgLi = oImg.getElementsByTagName('li');
//ES5的func
Array.prototype.forEach.call(oImgLi, function (img) {//傳遞回調函數，構建新的作用域
//timer、alpha和startMove，不應該被每個li共享使用，因為每個li都有自己的狀態，自己的動畫狀態（自己的動畫時長，alpha透明度）
var timer = null,
alpha = 0.3;
function startMove(obj, iTarget) {
clearInterval(timer);
timer = setInterval(function () {
var speed = 0;
if (alpha < iTarget) {
speed = 0.1;
} else {
speed = -0.1;
}
if (alpha === iTarget) {
clearInterval(timer);
} else {
alpha = (alpha * 10 + speed * 10) / 10;
obj.style.opacity = alpha;
obj.style.filter = "alpha(opacity=" + alpha * 100 + ")";
}
}, 30);
}
img.onmouseover = function () {
startMove(this, 1);
};
img.onmouseout = function () {
startMove(this, 0.3);
};
});
};
</script>
</body>
</html>