纯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 相关文章推荐
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
详解JavaScript中void语句的使用
Jun 04 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
Dec 25 jQuery
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 Vue.js
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+xslt在windows平台上
2006/10/09 PHP
PHP四大安全策略
2014/03/12 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
php实现事件监听与触发的方法
2014/11/21 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
PHP处理bmp格式图片的方法分析
2017/07/04 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
php ActiveMQ的安装与使用方法图文教程
2020/02/23 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
JS的replace方法介绍
2012/10/20 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
javascript正则表达式总结
2016/02/29 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
javascript的几种继承方法介绍
2016/03/22 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
[46:40]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python模拟登陆实现代码
2017/06/14 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
小学生元旦广播稿
2014/02/21 职场文书
保护环境倡议书范文
2014/05/13 职场文书
2014年安全员工作总结
2014/11/13 职场文书
后进生评语大全
2015/01/04 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
vue如何实现关闭对话框后刷新列表
2022/04/08 Vue.js
MySQL分区路径子分区再分区
2022/04/13 MySQL