划过无透明

<!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. PSQLException: FATAL: no pg_hba.conf entry for host "127.0.0.1", user "ambari", database "ambari", SSL off

    On your Postgres server, you will need to update your pg_hba.conf file to allow access for the ambar ...

  2. kernel笔记——块I/O

    Linux下,I/O处理的层次可分为4层: 1. 系统调用层,应用程序使用系统调用指定读写哪个文件,文件偏移是多少  2. 文件系统层,写文件时将用户态中的buffer拷贝到内核态下,并由cache缓 ...

  3. Golang 入门 : 数组

    数组是指一系列同一类型数据的集合.数组中包含的每个数据被称为数组元素(element),这种类型可以是任意的原始类型,比如 int.string 等,也可以是用户自定义的类型.一个数组包含的元素个数被 ...

  4. linux-高并发与负载均衡-lvs-3种模型推导

    NAT地址转换:

  5. UEFI和Legacy及UEFI+Legacy启动的区别

    uefi和legacy是两种不同的引导方式,uefi是新式的BIOS,legacy是传统BIOS.你在UEFI模式下安装的系统,只能用UEFI模式引导:同理,如果你是在Legacy模式下安装的系统,也 ...

  6. Kafka-python 客户端导致的 cpu 使用过高，且无法消费消息的问题

    今天遇到一个情况使用了 Kafka-python 1.3.3 来操作读取 broker 1.0.1 版本的 kafka.出现了 rebalance 之后分配到了客户端,但是 cpu 利用率很高且无法消 ...

  7. python如何安装pip及venv管理

    问题1:如何安装pip python的虚拟环境virtualenv的管理 背景: (1)python的版本很多,每个应用项目可能需要使用不同的版本,这样会导致兼容性问题: python的插件相当的丰富 ...

  8. linux 命令ls

    命令格式 ls -la /etc -a  查看所有隐藏文件 以.开头的,就是隐藏文件.改名.开头,就可以改成隐藏文件 -l  长格式显示 ]# ls -al total 8 drwxr-xr-x    ...

  9. python之生成器和列表推导式

    一.生成器函数 1.生成器 就是自己用python代码写的迭代器,生成器的本质就是迭代器(所以自带了__iter__方法和__next__方法,不需要我们去实现). 2.构建生成器的两种方式 1,生成 ...

  10. pycharm设置主题

    步骤很简单: 1.下载皮肤主题(jar) 去 http://www.themesmap.com/ 选择自己喜欢的主题下载 2.导入皮肤主题 导入方法:file–>Import Setting–& ...