划过无透明

<!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. 百度杯”CTF比赛 九月场 123

    进去后让登录,先看源码有提示 进到user.php 后发现是空的,看了wp才知道,有bak 下载下来直接爆破 但是那个1990是蛮骚的 直接进去登录 登录成功后是空的,走fd看看是怎么过 的 改包然后 ...

  2. 异步渲染页面怎么点击checkbox获取value值

    前后端分离时 后端向前端传递json数据  前端根据需要进行页面渲染 因为是异步渲染 想要获取获取渲染数据里面的值时获取不到的 介绍两个方法: 1,设置全局变量 即渲染时在html页面设置全局变量 如 ...

  3. 深入理解 Java 基本数据类型

    深入理解 Java 基本数据类型

  4. Daily Scrum 12.20

    Member Task on 12.20 Task on 12.21 仇栋民 继续Task972 : 完成活动评分基础功能 完成Task972 : 完成活动评分基础功能 康家华 完成 Task1010 ...

  5. 细述：nginx http内核模块提供的变量和解释

    导读 ngx_http_core_module模块在处理请求时,会有大量的变量,这些变量可以通过访问日志来记录下来,也可以用于其它nginx模块. 在我们对请求做策略如改写等等都会使用到一些变量,顺便 ...

  6. Flask 微信公众号开发

    公众号接口 1. 公众号消息会话 目前公众号内主要有这样几类消息服务的类型,分别用于不同的场景. 群发消息 公众号可以以一定频次(订阅号为每天1次,服务号为每月4次),向用户群发消息,包括文字消息.图 ...

  7. Python如何将整数转化成二进制字符串

    Python 如何将整数转化成二进制字符串 1.你可以自己写函数采用 %2 的方式来算. >>> binary = lambda n: '' if n==0 else binary( ...

  8. 其它综合-有趣的linux命令行工具-lolcat

    lolcat :一个在 Linux 终端中输出彩虹特效的命令行工具 何为Lolcat Lolcat 是一个针对 Linux,BSD 和 OSX 平台的工具,它类似于 cat,并为 cat 的输出添加彩 ...

  9. CentOS下安装nvm

    1安装版本管理工具git yum install git 查看git版本 git --version 2 安装Node.js版本管理工具nvm curl -o- https://raw.githubu ...

  10. 作业二：Git的安装与使用

    作业的要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2097 分布式版本控制系统Git的安装与使用 1.下载安装配置用户名 ...