纯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 相关文章推荐
客户端脚本中常常出现的一些问题和调试技巧
Jan 09 Javascript
在textarea中显示html页面的javascript代码
Apr 20 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
使用JS CSS去除IE链接虚线框的三种方法
Nov 14 Javascript
js如何打印object对象
Oct 16 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
vue环境搭建简单教程
Nov 07 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 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 pack与unpack 摸板字符字符含义
2009/10/29 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
javascript记住用户名和登录密码(两种方式)
2015/08/04 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
js 颜色选择插件
2017/01/23 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
Echarts实现单条折线可拖拽效果
2019/12/19 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
如何基于python操作excel并获取内容
2019/12/24 Python
pytorch中的自定义数据处理详解
2020/01/06 Python
详解python程序中的多任务
2020/09/16 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
毕业生大学生活自我总结
2014/01/31 职场文书
综合实践教学反思
2014/01/31 职场文书
初中班主任寄语
2014/04/04 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
股东授权委托书范文
2014/09/13 职场文书
起诉离婚协议书样本
2014/11/25 职场文书
接收函格式
2015/01/30 职场文书
大学生实习推荐信
2015/03/27 职场文书
奖学金主要事迹范文
2015/11/04 职场文书
微信早安问候语
2015/11/10 职场文书