这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 实现淡入淡出图片效果的方法, 结合实例形式分析了 js 鼠标响应实现图片淡入淡出效果的原理与相关实现技巧, 需要的朋友可以参考下
本文实例讲述了 JS 实现淡入淡出图片效果的方法。分享给大家供大家参考,具体如下:
效果:鼠标移入时,图片由半透明逐渐变成清晰,移出时,由清晰变为半透明
分析:用变量来储存透明度,因为元素. style.alpha 不能直接增加或减少
核心代码:
- window.onload=function(){
- var oDiv=document.getElementById("div1");
- var timer=null;
- var alpha=30;
- oDiv.onmouseover=function(){
- setAlpha(100);
- };
- oDiv.onmouseout=function(){
- setAlpha(30);
- };
- function setAlpha(iTarget){ //iTarget目标透明度通过参数传入
- clearInterval(timer); //执行计时器之前,先清除计时器,否则执行完一次再执行,上次的计时器还在,会不停抖动
- timer=setInterval(function(){
- var iSpeed;
- if(alpha<iTarget)
- {
- iSpeed=10;
- }
- else
- {
- iSpeed=-10;
- }
- if(alpha==iTarget)
- {
- clearInterval(timer);
- }
- else
- {
- alpha+=iSpeed;
- oDiv.style.opacity=alpha/100;
- oDiv.style.filter='alpha(opacity:'+alpha+')'
- }
- },30);
- };
- };
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0524/329365.html