纯js实现图片匀速淡入淡出效果


Posted in Javascript onAugust 22, 2017

图片匀速淡入淡出效果如下:

纯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 相关文章推荐
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
Mar 08 Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
Vue $mount实战之实现消息弹窗组件
Apr 22 Javascript
es6数组includes()用法实例分析
Apr 18 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 #Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 #Javascript
jQuery插件DataTables分页开发心得体会
Aug 22 #jQuery
React学习笔记之列表渲染示例详解
Aug 22 #Javascript
bootstrap switch开关组件使用方法详解
Aug 22 #Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 #Javascript
jQuery实现广告条滚动效果
Aug 22 #jQuery
You might like
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php 多文件上传的实现实例
2016/10/23 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
2010/04/25 Javascript
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
js跳转页面方法总结
2014/01/29 Javascript
AngularJS HTML编译器介绍
2014/12/06 Javascript
利用jQuery对无序列表排序的简单方法
2016/10/16 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
JS数组搜索之折半搜索实现方法分析
2017/03/27 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
vue 如何从单页应用改造成多页应用
2020/10/23 Javascript
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
英国健身超市:Fitness Superstore
2019/06/17 全球购物
internal修饰符起什么作用
2013/12/16 面试题
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
Java如何读取CLOB字段
2013/10/10 面试题
消防工作实施方案
2014/06/09 职场文书
校园安全学习心得体会
2016/01/18 职场文书
创业计划书之酒店
2019/08/30 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
python基础入门之字典和集合
2021/06/13 Python
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers