练习：javascript淡入淡出半透明效果

时间：2021-10-21 12:02:36

划过无透明

练习：javascript淡入淡出半透明效果

<!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. 淡入淡出&lpar;折叠效果&rpar;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&period;动画篇---淡入淡出效果

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

  6. 淡入淡出效果模板 js

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

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

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

  8. &lbrack;转&rsqb;Android UI&colon;看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写&lpar;附 图片淡入淡出效果&rpar;

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

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

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

随机推荐

  1. 用文件模拟CMOS保存数据

    Hi3520D 芯片的内置CMOS最多只有5个字节可以用,但是我需要保存的数据有很多. 其中一个解决办法是:可以把其他需要保存的数据放到一个配置文件中.每次写的时候写到配置文件,用的时候再从配置文件读 ...

  2. phpcms v9用get-sql调用数据表中的图组图片示例代码

    {pc:get sql="SELECT pictureurls FROM phpcms_picture_data where id = $id" start="0&quo ...

  3. Android常用的颜色列表 color&period;xml

    转自:http://blog.csdn.net/libaineu2004/article/details/41548313 <?xml version="1.0" encod ...

  4. 每天一条Linux命令&lpar;OS X系统上操作&rpar;

     Linux菜鸟必学的60个命令 安装和登录命令:login.shutdown.halt.reboot.install.mount.umount.chsh.exit.last: 文件处理命令:file ...

  5. FineUI布局应用&lpar;二&rpar;

    一.FineUI页面布局分为 1.Fit布局 <f:Panel ID="Panel1" Title="布局Fit(Layout=Fit)" runat=& ...

  6. Page Controller页面控制器实现

    A Page Controller is one object or file declaration designed to handle the request for one logical w ...

  7. Xcode无法安装基于ruby的插件问题的解决

    Xcode有时需要安装一些第三方插件,很多插件是基于ruby的,确切的说是基于ruby gem的! 但是在国内有一个很尴尬的情况,就是官方的gems网站:https://rubygems.org 的安 ...

  8. 【BZOJ】1969&colon; &lbrack;Ahoi2005&rsqb;LANE 航线规划

    题目链接: 传送~~ 题解:  老夫实在是码不动了…… 正着搞显然不好做,尝试倒着乱搞.先给被删除的边标记一个时间戳,先删除的时间戳大,同时维护询问时间戳,询问早的时间戳大.没被删除过的边时间戳都是0 ...

  9. Maven之setting&period;xml配置文件详解

    setting.xml配置文件 maven的配置文件settings.xml存在于两个地方: 1.安装的地方:${M2_HOME}/conf/settings.xml 2.用户的目录:${user.h ...

  10. win7&plus;opencv3&period;0&period;0&plus;vs2010 安装及配置

    最近看<学习opencv>,想要跑人脸识别的例子,于是先配环境吧. 1.  opencv下载: 具体下载地址,http://opencv.org/,官网太慢,百度网盘的资源链接:http: ...

相关文章