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>
随机推荐
- 知识蒸馏（Distillation）
蒸馏神经网络取名为蒸馏(Distill),其实是一个非常形象的过程. 我们把数据结构信息和数据本身当作一个混合物,分布信息通过概率分布被分离出来.首先,T值很大,相当于用很高的温度将关键的分布信息从原 ...
- 填报表导出excel非可写单元格锁定问题
问题描述: 填报表单元格分为可写和不可写两种状态,当填报表在web上展现的时候可写单元格可以进行数据填报和修改,非可写单元格不可操作. 报表导出为excel时,润乾导出excel包默认情况下不对 ...
- 通过代码管理工具 git 完成一次完整的代码管理过程
1.从公共远程fork一份自己的本地远程之后,从本地远程 clone 到本地 2.将本地代码跟公共远程代码做关联配置 git remote add upstream https://github.co ...
- ubuntu 下mysql导入出.sql文件
1.导出整个数据库 mysqldump -u 用户名 -p 数据库名 > 导出的文件名 mysqldump -u wcnc -p smgp_apps_wcnc > wcnc.sql 2.导 ...
- 判断js对象类型
javascript中检测对象的类型的运算符有:typeof.constructor.instanceof.prototype. 1.typeof typeof是一个一元运算符,返回结果是一个说明运算 ...
- 选中复选框，才能在文本框中输东西。button按钮已启用，
- 【MySQL】sysbench压测服务器及结果解读
主要压测范围包括CPU测试.磁盘IO测试.线程测试.OLTP测试等,那么sysbench就可以满足我们的压测需求.下面我们简单来看下sysbench的安装使用以及压测结果的解读. 一.sysbench ...
- How HashMap works in Java
https://www.javainterviewpoint.com/hashmap-works-internally-java/ How a HashMap Works internally has ...
- Hadoop HBase概念学习系列之HBase里的时间戳（二十六）
HBase集群要求每个节点的时间必须同步.HBase对于节点的时间扭曲(time skew)容忍度很低(这和HDFS是不一样的). 这主要是因为HBase需要使用系统时间来产生时间戳.如果系统时间不同 ...
- Scala编程之访问修饰符
private ,protected,public,在不加前两者声明时为public为公共式访问: private为私有式访问:protected为家族式访问,与Java一致. object Oute ...