<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js淡入淡出的图片</title>

<style>

#img{display:block;margin:0 auto; opacity:0.3; filter:alpha(opacity=30); width:200px; height:300px;}

</style>

<script>

window.onload=function(){

var oImg=document.getElementById('img');

var iTimer=0;

oImg.onmouseover=function(){

   startMove(this,100,10);

}

oImg.onmouseout=function(){

   startMove(this,30,-10);

}

function startMove(obj, iTarget, iSpeed) {

        clearInterval(iTimer);

        var iCur=0;

        iTimer = setInterval(function() {

            iCur=Math.round(css(obj,'opacity')*100);

            if (iCur == iTarget) {

                clearInterval(iTimer);

            } else {

                obj.style.opacity=(iCur+iSpeed)/100;

                obj.style.filter='alpha(opacity='+(iCur+iSpeed)+')';   //加括号防止转换成字符串

            }

        }, 30);

    }

function css(obj,attr){       //获取元素的css任何属性

  if(obj.currentStyle){

      return obj.currentStyle[attr];

   }else{

     return getComputedStyle(obj,false)[attr];

   }

}}

</script>

</head>

<body>

<img src='cat.jpg' id='img'/>

</body>

</html>

js 淡入淡出的图片的更多相关文章

  1. js淡入淡出

    示例: js淡入淡出 原理:更改css不透明数值 知识点: css不透明 filter:alpha(opacity:30); opacity:0.3;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...

  2. ExtJS简单的动画效果2（ext js淡入淡出特效）

    Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度. 面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果: (注意导入js和css文 ...

  3. ExtJS简单的动画效果（ext js淡入淡出特效）

    1.html页面:Application HTML file - index.html <html> <head> <title>ExtJs fadeIn() an ...

  4. js 淡入淡出的tab选项卡

    代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  5. 利用jQuery的淡入淡出实现轮播器

    基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果: 但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教 HTML: & ...

  6. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  7. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  8. js实现多个图片淡入淡出，框架

    单个淡入淡出已经写过,可以看看上几遍的博文 <style> *{ margin:0; padding:0; } div{ height:100px; width:100px; backgr ...

  9. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

随机推荐

  1. (转)深入理解JavaScript 模块模式

    深入理解JavaScript 模块模式 (原文)http://www.cnblogs.com/starweb/archive/2013/02/17/2914023.html 英文:http://www ...

  2. 如何解决requireJs的模块加载超时

    requireJs的加载是一种异步机制,它加载js的时候有个默认的超时机制,当加载一个js超过一定时间的时候,它就会在浏览器中抛出模块加载超时错误,接下来,就不会加载这个模块. 这个机制其实是起到了节 ...

  3. Python 基礎 - 數據類型

    標準數據類型 Python3 中有六個標準的數據類型 1 Number(數字) 2 String(字符串) 3 List (列表) 4 Tuple (元組) 5 Sets (集合) 6 Diction ...

  4. maven遇到的问题

    1.Missing artifact net.sf.json-lib:json-lib:jar:2.4:compile pom.xml原内容: <dependency> <group ...

  5. oracle 跨数据库取数据

    思路:先从另一个数据库里把数据取出来, 然后,把这个数据集合解析,根据这个数据集合拆分组合成一个创建oralce临时表的方法及数据的插入.紧接着就可以写sql语句进行联合查询了. 下面是具体实例的方法 ...

  6. linux和window下mkdir函数问题（转-锦曦月）

    通过WIN32宏进行判断   window下mkdir函数   #include<direct.h> int _mkdir( const char *dirname );   linux下 ...

  7. 深入解读Linux与Android的相互关系（转-lining）

    大家都知道Android是基于Linux内核的操作系统,也曾经和Linux基金会因为内核问题产生过分歧,本文将开始对Android的内核进行剖析,主要介绍Android和Linux之间的关系,后续还会 ...

  8. hihoCoder-1036 （AC自动机模板题）

    题目大意:判断模式串中是否出现模板. 代码如下: # include<iostream> # include<cstdio> # include<queue> # ...

  9. 去除Visual Studio引号中的内容和注释中出现的波浪下划线

    [描述] 使用vs2013,注释或者字符串常量中,经常会出现红色的波浪线,非常烦人. 注意,不是代码错误的那种波浪线,我觉得代码错误智能提示的波浪线还是有必要留着的,这样可以避免过多的编译来发现错误, ...

  10. Java输入输出流（一）——常用的输入输出流

    1.流的概念:在Java中,流是从源到目的地的字节的有序序列.Java中有两种基本的流--输入流(InputStream)和输出流(OutputStream). 根据流相对于程序的另一个端点的不同,分 ...