JavaScript渐变效果的实现
2012-02-07 00:00
597 查看
先来看一下效果演示:
#runs{width:300px; margin:10px auto;}
#runs li{width:80px; height:80px; background:#06c; list-style:none; float:left; margin:10px; display:inline; filter:alpha(opacity=30); opacity:0.3;}
window.onload = function(){
var runs = document.getElementById("runs");
var runs_li = runs.getElementsByTagName("li");
var i=0;
for(i=0; iobj.alpha){
speed = 5;
}else{
speed = -5;
}
if(obj.alpha == target){
clearInterval(obj.timer);
}else{
obj.alpha = obj.alpha + speed;
obj.style.filter = "alpha(opacity="+obj.alpha+")";
obj.style.opacity = obj.alpha/100;
}
},30)
}
简
明
现
代
魔
法
上面的元素,鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小。
关键代码:
根据目标值和当时值的对比,来决定是正向还是负向速度。
给每一个元素加上各自的透明度值,各自的透明度变化分开。
全部代码:
#runs{width:300px; margin:10px auto;}
#runs li{width:80px; height:80px; background:#06c; list-style:none; float:left; margin:10px; display:inline; filter:alpha(opacity=30); opacity:0.3;}
window.onload = function(){
var runs = document.getElementById("runs");
var runs_li = runs.getElementsByTagName("li");
var i=0;
for(i=0; iobj.alpha){
speed = 5;
}else{
speed = -5;
}
if(obj.alpha == target){
clearInterval(obj.timer);
}else{
obj.alpha = obj.alpha + speed;
obj.style.filter = "alpha(opacity="+obj.alpha+")";
obj.style.opacity = obj.alpha/100;
}
},30)
}
简
明
现
代
魔
法
上面的元素,鼠标移上去透明度渐渐增加,鼠标移出,透明度渐渐减小。
关键代码:
var speed = 0; if(target>obj.alpha){ speed = 5; }else{ speed = -5; }
根据目标值和当时值的对比,来决定是正向还是负向速度。
for(i=0; i < runs_li.length; i++){ runs_li[i].timer = null; runs_li[i].alpha = 30; runs_li[i].onmouseover = function(){ startrun(this,100); } runs_li[i].onmouseout = function(){ startrun(this,30); } }
给每一个元素加上各自的透明度值,各自的透明度变化分开。
全部代码:
<style> #runs{width:300px; margin:10px auto;} #runs li{width:80px; height:80px; background:#06c; list-style:none; float:left; margin:10px; display:inline; filter:alpha(opacity=30); opacity:0.3;} </style> <script> window.onload = function(){ var runs = document.getElementById("runs"); var runs_li = runs.getElementsByTagName("li"); var i=0; for(i=0; i<runs_li.length; i++){ runs_li[i].timer = null; runs_li[i].alpha = 30; runs_li[i].onmouseover = function(){ startrun(this,100); } runs_li[i].onmouseout = function(){ startrun(this,30); } } } function startrun(obj,target){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = 0; if(target>obj.alpha){ speed = 5; }else{ speed = -5; } if(obj.alpha == target){ clearInterval(obj.timer); }else{ obj.alpha = obj.alpha + speed; obj.style.filter = "alpha(opacity="+obj.alpha+")"; obj.style.opacity = obj.alpha/100; } },30) } </script> <ul id="runs"> <li>简</li> <li>明</li> <li>现</li> <li>代</li> <li>魔</li> <li>法</li> </ul>
相关文章推荐
- JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
- JavaScript实现的鼠标响应颜色渐变效果完整实例
- Javascript 实现DIV透明度渐变、移动放大等效果
- Javascript 颜色渐变效果的实现代码
- JavaScript实现图片的渐变效果
- 纯JavaScript实现的完美渐变弹出层效果代码
- JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
- JavaScript渐变效果的实现
- 纯JavaScript实现的完美渐变弹出层效果代码
- Javascript 颜色渐变效果的实现代码
- ArcGIS API for Javascript 图层切换渐变效果实现
- ArcGIS API for Javascript 图层切换渐变效果实现
- javascript实现带下拉子菜单的导航菜单效果
- javascript 实现函数/方法重载效果
- Android 图片合成:添加蒙板效果 不规则相框 透明度渐变效果的实现
- javascript实现拖拽效果
- 使用JavaScript实现弹出层效果的简单实例
- JavaScript实现图片拖曳效果
- javascript实现的登陆遮罩效果汇总
- JavaScript学习——使用JS实现首页轮播图效果