JS实现图片的淡入和淡出的两种方法，如有不足，还请前辈多多指导^-^~
今天下午练习了下这个图片的淡入淡出小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>
随机推荐
- ShortcutBadger添加桌面角标（Badge）
1.简介:角标原本是苹果的ios中的东西,android原生并不支持角标,因为google的意思是让大家用notification(提示栏)即可,不过无妨,厉害的android第三方厂商可以通过在自定 ...
- CSS深入理解之float（HTML/CSS）
float的设计初衷仅仅是:为了文字环绕效果 float的包裹与破坏 包裹:收缩.坚挺.隔绝(BFC) 破坏:父元素高度塌陷 <!DOCTYPE html> <html> &l ...
- 单独配置 Ehcache
package com.shy.ehcache; import net.sf.ehcache.Cache; import net.sf.ehcache.CacheManager; import net ...
- React：组件的生命周期
在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化.一个组件就是一个状态机,对于特定地输入,它总返回一致的输出. 一个React组件的生命周期分为三个部 ...
- voltdb数据库持久性，扩展集群
之前在git上下载的voltdb,以及在官网下载的社区版voltdb均不支持持久性事务,和扩展集群,今天下载了企业试用版voltdb,安装过程不再赘述,记录一下我的使用过程 持久性测试 以前的 vol ...
- Mysqlbinlog工具及导出数据并转换编码导入
2014 - binlog是通过记录二进制文件方式来备份数据,然后在从二进制文件将数据恢复到某一时段或某一操作点. 1.使用mysqlbinlog工具来恢复 Mysqlbinlog日志如何开启? 在m ...
- linux rz上传文件及出错解决方案
在把Windows上的文件传至Linux端时用到SecureCRT,一般小文件都没有问题,文件太大时则出现了上传后的文件只有几K大小,当然大于2个G的是不可能传的上去的了.对于几百M到1G多的大文件要 ...
- Linux less/more命令详解
less 的用法比起 more 更加的有弹性.在 more 的时候,我们并没有办法向前面翻, 只能往后面看,但若使用了 less 时,就可以使用 [pageup] [pagedown] 等按键的功能来 ...
- 为什么mysql要做主从复制？
为什么MySQL要做主从复制(读写分离)? 通俗来讲,如果对数据库的读和写都在同一个数据库服务器中操作,业务系统性能会降低. 为了提升业务系统性能,优化用户体验,可以通过做主从复制(读写分离)来减轻主 ...
- hibernate连接mysql，查询条件中有中文时，查询结果没有记录，而数据库有符合条件的记录（解决方法）
今天在另一台服务器上重新部署了网站,结果出现了以下问题: ——用hibernate做mysql的数据库连接时,当查询条件中有中文的时候,查询结果没有记录,而数据库中是存在符合条件的记录的. 测试了以下 ...