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>
随机推荐
- java 内存分析之方法返回值及匿名对象一
package Demo; public class Point { private double x, y, z; public Point(double _x, double _y, double ...
- 带你从零学ReactNative开发跨平台App开发（十）
ReactNative跨平台开发系列教程: 带你从零学ReactNative开发跨平台App开发(一) 带你从零学ReactNative开发跨平台App开发(二) 带你从零学ReactNative开发 ...
- Django 多表查询 聚合查询 分组查询 F查询 Q查询
# -------------------------------------------------------------------------------------------------- ...
- JVM知识（三）：内存模型和可见性
这篇文章我们将根据JVM的内存模型探索java当中变量的可见性以及不同的java指令在并发时可能发生的指令重排序的情况.来聊聊java线程对一个变量的更新怎么通知另一个线程,及volatile的作用和 ...
- Jboss Jmx-Console和 Jboss web-console安全设置
1.介绍 如果你暴露你的JBoss服务器通过网络(如通过启动服务器使用选项B 0.0.0.0或者通过改变jboss.bind.address首次出现0.0.0.0在.../jboss/server/d ...
- MySQL8.0初体验
MySQL8.0的官方社区开源版出来有段时间了,而percona的8.0版本还没有正式对外发布(已发布测试版),一直以来也没安装体验下这个号称质的飞跃的版本,今天正好有些时间就下了安装体验体验. 一. ...
- gridview导出数据，如果为0开头，丢失0解决方案
1.protected void GridView1_RowDataBound( object sender, GridViewRowEventArgs e ) { if (e.Row.Row ...
- ORACLE 参数设置绑定变量
使用 CURSOR_SHARING 参数 EXACT 默认,不替换 SIMIAR 当替换不会影响到执行计划时,才会将字面量替换成绑定变量 FORCE 只要有可能,字面量会被替换为绑定变量
- 定制NSError
定制NSError 效果: 系统的NSError是可以自己定制的,以下提供代码来实现并表示如何使用: YXError.h 与 YXError.m // // YXError.h // CustomYX ...
- AppHangB1：explorer进程停止与Windows交互
现象:Windows 7,打开 “计算机” 的时候,资源管理器卡死,如图所示. 解决方法:卸载 CAD迷你看图软件,利用 CCleaner 清除注册表.