划过无透明

<!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. bsp makefile2

    1. grep "bsp_dir" -r ./  -s  --exclude-dir "*.git" 用这个加快目录定位-- 2.编译所有子目录 for dir ...

  2. kubernetes1.14.0部署

    2019/4/6/使用kubeadm安装部署kubernetes集群: 前提:1.各节点时间同步:2.各节点主机名称解析:dns OR hosts:3.各节点iptables及firewalld服务被 ...

  3. 基于aws api gateway的asp.net core验证

    本文是介绍aws 作为api gateway,用asp.net core用web应用,.net core作为aws lambda function. api gateway和asp.net core的 ...

  4. Java面试准备之数据库

    一.考察点 1.联结 1.1 联结的概念: 简单的说,联结是一种机制,用来在一条SELECT语句中关联表,因此称之为联结. 1.2 联结的分类 注意:联结并不代表只有使用join关键字的才算是联结,w ...

  5. Django之 Form和ModelForm组件

    01-Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来. 与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用 ...

  6. 树的平衡之AVL树——错过文末你会后悔，信我

    学习数据结构应该是一个循序渐进的过程: 当我们学习数组时,我们要体会数组的优点:仅仅通过下标就可以访问我们要找的元素(便于查找). 此时,我们思考:假如我要在第一个元素前插入一个新元素?采用数组需要挪 ...

  7. js判断数组中有没有指定元素

    list.findIndex(target => target.sel === 指定元素) ,如果找到返回下标,如果没有返回-1

  8. CodeForces 461B Appleman and T

    题目链接:http://codeforces.com/contest/461/problem/B 题目大意: 给定一课树,树上的节点有黑的也有白的,有这样一种分割树的方案,分割后每个子图只含有一个黑色 ...

  9. 图论专题1考试Problem1

    Problem 1. bricksInput file: bricks.inOutput file: bricks.outTime limit: 1 secondjyb 在BUAA 天天被大神虐,所以 ...

  10. Lodop简短问答客户反馈篇 及排查步骤 及注册相关

    A.http下打印图片正常,https下打印图片是××.(有的客户端可以,有的不可以)重置ie浏览器试试.客户反馈:(和ie浏览器的设置有关)intenet选项--高级里,我调整为和能打印出图片的电脑 ...