划过无透明

<!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. 厚着脸皮求领导写了一篇java小白进阶大牛之路！！！

    缘起&应朋友之邀 2019年已经过去两个月了,应朋友之邀,写写自己的个人经历,与其说经历还不如是自我的总结与反思.2012年2月份只身一人拖着行李箱来到北京库巴科技有限公司实习,那时候库巴处在 ...

  2. 将arguments转换成数组的方法

    将函数里的arguments,转换成一个真正的数组的方法,arguments是个类数组,除了有实参所组成的类似数组以外,还有自己的属性,如callee,arguments.callee就是当前正在执行 ...

  3. SpringBoot整合RabbitMQ-消息可靠性投递

    本系列是学习SpringBoot整合RabbitMQ的练手,包含服务安装,RabbitMQ整合SpringBoot2.x,消息可靠性投递实现等三篇博客. 学习路径:https://www.imooc. ...

  4. IntelliJ IDEA编译项目报错 "xxx包不存在" 或 "找不到符号"

    简介 在维护一个新的项目时出现在的这个情况,项目构建时一直报错"xxx包找不到",但是引用的包和引用的类都是存在的,一开始以为是项目问题,还问了做过的同事,第一次搞好了,但是换了分 ...

  5. 基于Flask 实现Web微信登陆

    网页版微信登陆网址 https://login.wx.qq.com/ 获取微信登陆的二维码 在浏览器中访问登陆接口 https://login.wx.qq.com/ 我们查找二维码的图片可以看到 其中 ...

  6. 采用VSPD、ModbusTool模拟串口、MODBUS TCP设备进行Python采集软件开发

    版权声明:本文为博主原创文章,欢迎转载,并请注明出处.联系方式:460356155@qq.com 不少仪器/设备都提供了数据采集的接口,其中不少是串口或网络的MODBUS/TCP协议. 串口是比较简单 ...

  7. JDBC连接池之C3P0

    1.导入jar包 c3p0-0.9.1.jar mchange-commons-java-0.2.3.4(注:该jar包是c3p0数据库连接池的辅助包,没有这个包系统启动的时候会报classnotfo ...

  8. Python进阶1---高阶函数、柯里化

    高阶函数 不相等  自定义sort函数 内建函数--高阶函数 #sort函数 def sort2(lst,key = None,reverse = False): res = [] if key is ...

  9. Python——SQLite

    一.连接数据库 import sqlite3 conn = sqlite3.connect('数据库名.db') 二.插入 import sqlite3 conn = sqlite3.connect( ...

  10. socketserver和socket的补充(验证客户端合法性)

    一.socket的补充 1.参数 socket.socket(family=AF_INET,type=SOCK_STREAM,proto=0,fileno=None) 参数说明: family 地址系 ...