划过无透明

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>淡入淡出半透明效果</title>

    <style>

        img {width:400px;height:200px;opacity: 0.3;filter:alpha(opacity=30)}

    </style>

</head>

<body>

<img src="data:images/4.jpg" alt="" id="img">

<script>

    // opacity IE8及以下版本不支持

    var oImg= document.getElementById('img');

    oImg.onmouseover=function(){

        animate(30,100)

    }

    oImg.onmouseout=function(){

        animate(100,30)

    }

    var timer = null;

    function animate(speed,dest){

       //speed初始透明度，dest透明度目标值

        clearInterval(timer);

        timer = setInterval(function(){

            speed<dest?speed+=10:speed-=10;

            if(speed==dest){

                clearInterval(timer);

                timer=null;

            }else {

                oImg.style.opacity=speed/100;

                oImg.style.filter="alpha(opacity:"+speed+")";

            }

        },20)

    }

</script>

</body>

</html>

练习：javascript淡入淡出半透明效果的更多相关文章

  1. javascript淡入淡出效果的实现思路

    这个思路是最近写XScroll.js类的时候想明白的.平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了.不过经过分析,我觉得其实只需要一半就行了如题,只有思路,没有代码. 这个思 ...

  2. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  3. 淡入淡出(折叠效果)and点击切换背景图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  5. jQuery-4.动画篇---淡入淡出效果

    jQuery中淡出动画fadeOut 让元素在页面不可见,常用的办法就是通过设置样式的display:none.除此之外还可以一些类似的办法可以达到这个目的.这里要提一个透明度的方法,设置元素透明度为 ...

  6. 淡入淡出效果模板 js

    html文件中: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> &l ...

  7. jQuery效果之隐藏与显示、淡入淡出、滑动、回调

    隐藏与显示 淡入淡出 滑动效果

  8. [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)

    http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...

  9. React-Native ListView加载图片淡入淡出效果的组件

    今天练习项目中需要给listview在加载图片时增加一个淡入淡出的效果,因此干脆就自己封装了一个组件: 'use strict' import React from 'react-native' va ...

随机推荐

  1. idea右键无法新建Java Class

    项目中新建目录之后,要在该目录下新增java Class文件,右键——>New发现无对应选项. 原因:新建目录之后需要设置目录作用,从而让idea识别. 方法:File-Project Stru ...

  2. spring boot拦截器中获取request post请求中的参数(转)

    文章转自 https://www.jianshu.com/p/69c6fba08c92

  3. （六）List All Indices

    Now let’s take a peek at our indices: 现在让我们来看看我们的指数: GET /_cat/indices?v And the response: health st ...

  4. fliplr函数

    fliplr  左右翻转矩阵 语法: B = fliplr(A) 将矩阵A的列绕垂直轴进行左右翻转 matabc 如果A是一个行向量,fliplr(A)将A中元素的顺序进行翻转. 如果A是一个列向量, ...

  5. 【Atcoder Grand Contest 011 F】Train Service Planning

    题意:给\(n+1\)个站\(0,\dots,n\),连续的两站\(i-1\)和\(i\)之间有一个距离\(A_i\),其是单行(\(B_i=1\))或双行(\(B_i=2\)),单行线不能同时有两辆 ...

  6. 聊聊基准测试的MVP方案

    上篇博客介绍了基准测试的一些思路和方法策略,这篇博客,聊聊基准测试的MVP(最小可行性方案)... 思维导图 一.测试策略 策略名称 阈值 运行时间 性能指标 基线 注释 并发测试 CPU75%+Er ...

  7. PHP性能优化：in_array和isset 在大数组查询中耗时相差巨大，以及巧妙使用array_flip

    今天在PHP业务开发中,发现了一个问题. 两个较大数组(20万+元素),遍历其中一个$a,另一个数组$b用于查找元素. 比如 foreach($a as $val){ if(in_array($xx, ...

  8. .net core 的图片处理及二维码的生成及解析

    写代码这事,掐指算来已经十有余年. 从html到css到javascript到vbscript到c#,从兴趣到职业,生活总是失落与惊喜并存. 绝大部分时候,出发并不是因为知道该到哪里去,只是知道不能再 ...

  9. Laravel 和 Spring Boot 两个框架比较创业篇（二：人工成本）

    前面从开发效率比较了 Laravel 和 Spring Boot两个框架,见:Laravel 和 Spring Boot 两个框架比较创业篇(一:开发效率) ,这一篇打算比较一下人工成本. 本文说的人 ...

  10. jvm 垃圾回收机制和算法（转）

    stop-the-world 在学习Java GC 之前,我们需要记住一个单词:stop-the-world .它会在任何一种GC算法中发生.stop-the-world 意味着JVM因为需要执行GC ...