纯js实现图片匀速淡入淡出效果
更新时间：2017年08月22日 11:21:43 作者：diuleilaomo
这篇文章主要为大家详细介绍了纯js实现图片匀速淡入淡出效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
图片匀速淡入淡出效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淡入效果</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
border: 2px solid #aaa;
}
img {
width: 300px;
height: 300px;
filter: alpha(opacity:30);
opacity: .3;
margin: 0 auto;
}
</style>
</head>
<body>
<div>
<img src="img/timg.jpg" alt="" id="img">
</div>
<script>
var alpha=30;
var img = document.getElementById("img");
img.onmouseover=function(){
startMove(100)
};
img.onmouseout=function(){
startMove(30)
}
var timer;
function startMove(tar) {
var img = document.getElementById("img");
clearInterval(timer);
timer = setInterval(function () {
var ispeed=0;
ispeed= alpha<tar?5:-5;
if(alpha==tar){
clearInterval(timer)
}
else{
alpha+=ispeed;
img.style.filter="alpha(opacity:"+alpha+")";
img.style.opacity=alpha/100;
}
}, 30)
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
关于JavaScript使用export和import的两个报错解决
说来惭愧es6写了这么久,连最基本的export和import都没搞明白,下面这篇文章主要给大家介绍了关于JavaScript使用export和import的两个报错的解决方法,需要的朋友可以参考下2022-07-07
使用Bootstrap typeahead插件实现搜索框自动补全的方法
这篇文章主要介绍了使用Bootstrap typeahead插件实现搜索框自动补全的方法的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
这篇文章为大家主要介绍了js获取url参数值的几种方式详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-07-07
jsp js 鼠标移动到指定区域显示选项卡示例,离开时隐藏，具体实现代码如下，感兴趣的朋友可以了解下哈，希望对你有所帮助2013-06-06
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
多网站的需要填写的文本框在默认状态下都会给出一个默认的提示语言，当鼠标点击此文本框的时候能够将里面的默认文本清除，当删除输入的文本且焦点离开文本框的时候再将默认的文本写入文本框2016-01-01
http头部字段Origin和Access-Control-Allow-Origin解决请求跨域
这篇文章主要为大家介绍了http头部字段Origin和Access-Control-Allow-Origin解决请求跨域示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
本文主要介绍了js实现返回顶部效果的实例。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
在js的嵌套for循环异步执行,声明i和使用i获取到的变量 都要用 let 声明,不要用var,这篇文章主要介绍了JS的for循环中的var和let,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了微信小程序全屏滚动字幕的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
23个Javascript弹出窗口特效，需要的朋友可以参考下。2011-02-02
最新评论