今天下午练习了下这个图片的淡入淡出小demo,如有不足,还请前辈多多指导^-^~

总结如下:

第一种方法:

  个人觉得第一种方法比较好,同时兼容IE8以下浏览器,但是如下代码中,不知可不可以将timer和alpha也作为参数封装到函数内,感觉貌似也没必要 - -!......  

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{display:inline-block;opacity:.3;filter:alpha(opacity:30);}
img{vertical-align:top;}
</style>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById("div");
var timer=null;
var alpha=30;
var speed=1; odiv.onmouseover=function(){
startChange(odiv,speed,100);
}
odiv.onmouseout=function(){
startChange(odiv,speed,30);
}
function startChange(obj,speed,target){
clearInterval(timer);
speed=target>alpha?speed:-speed;
timer=setInterval(function(){
if(alpha==target){
clearInterval(timer);
}else{
alpha+=speed;
}
obj.style.opacity=alpha/100;
obj.style.filter="alpha(opacity:"+alpha+")";
},20);
}
}
</script>
</head>
<body>
<div id="div">
<img src="desert.jpg" alt="" />
</div>
</body>
</html>

第二种方法:

  直接利用opacity属性,但还不支持IE8以下的浏览器。另外,在以下32行代码中,还容易出现诡异的小数问题,听说是由于计算机在处理小数的时候,本身就有些问题,但具体如何产生的,以及如何去解决,暂时还不清楚。

  还请各位前辈多多指导,我也去查查资料,嘿嘿~

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{display:inline-block;opacity:1;}
img{display:block;}
</style>
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementsByTagName("div")[0];
var t=null;
var speed=0.1;
div1.onmouseover=()=>{
change(div1,speed,0.3);
}
div1.onmouseout=()=>{
change(div1,speed,1);
}
function change(obj,speed,target){
clearInterval(t);
t=setInterval(()=>{
obj.style.opacity=getComputedStyle(obj,false)["opacity"];
if(obj.style.opacity==target){
clearInterval(t);
}else{
if(target==0.3){
obj.style.opacity-=speed;
}else if(target==1){
speed+=0.1;
console.log(speed); //0.30000000000000004 会出现小数这种BUG
obj.style.opacity=speed;
}
}
},50);
}
}
</script>
</head>
<body>
<div>
<img src="desert.jpg" alt="" />
</div>
</body>
</html>

随机推荐

  1. npm与gulp的使用

    这边将工作中使用的npm以及gulp的一些方法做了整理,方便以后查阅,至少不用去麻烦度娘了~ A.npm的使用: 1.在你所需要的文件夹里面初始化npm-->  npm init -y    - ...

  2. eclipse中如何添加tomcat插件

    本篇简短的介绍了如何安装tomcat插件,因为不eclipse中不安装插件就没有tomcat图标,也就无法正常关闭服务器而只能terminate.废话不多说,直接进入主题: 1.首先下载一个tomca ...

  3. 从一个简单的 JPA 示例开始

    本文主要讲述 Spring Data JPA,但是为了不至于给 JPA 和 Spring 的初学者造成较大的学习曲线,我们首先从 JPA 开始,简单介绍一个 JPA 示例:接着重构该示例,并引入 Sp ...

  4. win7 下安装oracle 10 g

    首先下对版本,Oracle 10g支持Win7版: http://download.oracle.com/otn/nt/oracle10g/10203/10203_vista_w2k8_x86_pro ...

  5. Linux mount命令详解

    mount命令用于加载文件系统到指定的加载点.此命令的也常用于挂载cdrom,使我们可以访问cdrom中的数据,因为你将光盘插入cdrom中,Linux并不会自动挂载,必须使用Linux mount命 ...

  6. http协议的状态码——400,401,403,404,500,502,503,301,302等常见网页错误代码

    http协议的状态码 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态码. 100(继续) 请求者应当继续提出请求.服务器返回此代码表示已收到请求的第一部分,正在等待其余部分. 101( ...

  7. 02-urllib库的get请求方式

    对于urllib中的get请求方式,可以直接传入url的连接即可访问页面,但是对于要传入关键字的话,也可以用quote进行编码再传入. 案例如下: #get请求搜索参数如何添加 import urll ...

  8. 装office系统软件

    在电脑里搜索 SW_DVD5_Office_Professional_Plus_2010w_SP1_64Bit_ChnSimp_CORE_MLF_X17-76742 如果已经安装过了,有错误,直接进行 ...

  9. Git 如何上传文件夹

    Github开源代码库以及版本控制系统,可以托管各种git库,并提供web访问界面.很多朋友喜欢喜欢将个人Blog或小型项目托管到github,这样既方便又简单. 下面介绍如何将本地文件上传到gith ...

  10. pyspark视频

    在一个网课上买了一个pyspark视频,贼贵,本来是想把视频解压密码记下来分享出来的,可是其实用的是EVPLAYER,一机一码,一共只有3个激活码 这里我分享视频链接,百度网盘: https://pa ...