纯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.holdReady()使用方法
May 20 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
浅谈JS中json数据的处理
Jun 30 Javascript
用原生JS对AJAX做简单封装的实例代码
Jul 13 Javascript
js完整倒计时代码分享
Sep 18 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
Mar 09 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
利用JavaScript将Excel转换为JSON示例代码
Jun 14 Javascript
javascript创建元素和删除元素实例小结
Jun 19 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 网页过期时间的控制代码
2009/06/29 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
PHP里的中文变量说明
2011/07/23 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
2016/03/01 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
Html5 js实现手风琴效果
2020/04/17 Javascript
Bootstrap Table 删除和批量删除
2017/09/22 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
python实现与redis交互操作详解
2020/04/21 Python
详解python polyscope库的安装和例程
2020/11/13 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
laravel使用redis队列实例讲解
2021/03/23 PHP
我们的节日清明节活动方案
2014/03/05 职场文书
2014年党员干部四风问题自我剖析材料
2014/09/29 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
Golang 结构体数据集合
2022/04/22 Golang