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>
随机推荐
- Android 通过URL获取网络资源
1.先在AndroidManifest.xml中注册加入访问因特网服务的权限: <uses-permission android:name="android.permission.IN ...
- Navicat Premium 连接MySQL数据库出现Authentication plugin 'caching_sha2_password' cannot be loaded的解决方案
1. 管理员权限运行命令提示符,登陆MySQL mysql -u root -p root 2. 修改账户密码加密规则并更新用户密码 ALTER USER 'root'@'localhost' ID ...
- Eclipse连接sqlserver体验过程
以前装的sqlserver 2008试用期到了,就按照网上的步骤,彻底删除了sqlserver,然后又重新装了下,再用eclipse连接的时候,发现提示TCP/IP被禁用,然后找到了sqlserver ...
- 10.Spring——框架的AOP
1.Spring 框架的 AOP 2.Spring 中基于 AOP 的 XML架构 3.Spring 中基于 AOP 的 @AspectJ 1.Spring 框架的 AOP Spring 框架的一个关 ...
- Oracle EBS 应收发票取值
SELECT ct.trx_number ,ctl.description ,fnd_flex_ext.get_segs('SQLGL' ,'GL#' ,gcc.chart_of_accounts_i ...
- PLSQL中使用二维存储结构---二维数组
代码如下: --PLSQL中没有数组的概念 用TYPE 和Table of Record来代替多维数组--create by jenrry 20171028-- 1.0 建立存放列的测试表creat ...
- linux/OSX中“DD”命令制作ISO镜像操作系统安装U盘
linux或者OS X系统中,使用“dd”命令可以直接在终端命令行模式下,制作ISO镜像的系统安装盘. 一.linux系统以centOS7为例. sudo dd if=镜像路径 of=USB设备路径 ...
- 水晶报表自定义纸张大小打印 (Crystal Report Print with custom paper size)
System.Drawing.Printing.PrintDocument doc = new PrintDocument(); doc.PrinterSettings.PrinterName = & ...
- UIButton的两种block传值方式
UIButton的两种block传值方式 方式1 - 作为属性来传值 BlockView.h 与 BlockView.m // // BlockView.h // Block // // Create ...
- Python学习---IO的异步[asyncio +aiohttp模块]
aiohttp aiohttp是在asyncio模块基础上封装的一个支持HTTP请求的模块,内容比8.4.2[基于asyncio实现利用TCP模拟HTTP请求]更全面 安装aiohttp: pip3 ...