<!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. Unity3d_学习笔记_入门

    转自:http://blog.csdn.net/zlfxy/article/details/8722437 本文内容来自“编程教父”的视频课程. 1.Unity3d一个游戏引擎,可以用来开发很多游戏. ...

  2. android基础（三）ContentProvider

    ContentProvider主要用于在不同的应用程序之间实现数据共享,它提供了一套完整的机制,允许一个程序访问另一个程序中的数据,同时还能保证被访问数据的安全性,目前内容提供其实android实现跨 ...

  3. 【OpenCV】图像的遍历

    Mat类的两种遍历比较快的方式,分别给出了按行和按列遍历,以及运行过程图. 原图: 按行遍历过程图 按列遍历过程图 代码如下: //ptr逐行访问 void ptrScanX(Mat& src ...

  4. SCC（强连通分量）

    1.定义: 在有向图G中,如果两个顶点间至少存在一条路径,称两个顶点强连通(SC---strongly connected). 有向图中的极大强连通子图,成为强连通分量(SCC---strongly ...

  5. 黑马程序员：Java编程_String

    =========== ASP.Net+Android+IOS开发..Net培训.期待与您交流!=========== 描述字符串对象的类是java.lang.String,String类是不可变(f ...

  6. E - 滑雪

    Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Status Pract ...

  7. springMVC 拦截器简单配置

    在spring 3.0甚础上,起来越多的用到了注解,从前的拦截器在配置文件中需要这样配置 <beans...> ... <bean id="measurementInter ...

  8. QString转换为char* (转)

    Qt下面,字符串都用QString,确实给开发者提供了方便,想想VC里面定义的各种变量类型,而且函数参数类型五花八门,经常需要今年新那个类型转换 Qt再使用第三方开源库时,由于库的类型基本上都是标准的 ...

  9. WPA破解原理简要——无线网络破解续

    一.破解密码的基础 关于密码的破解我再重复一次好了.密码破解就两大类方法.一是字典解密,而是暴力解密. 暴力解密就是采用穷举的方法——你密码是怎么组成的呢?无非就是数字.字母.符号,暴力解密就是采用一 ...

  10. （转）几种范数的解释 l0-Norm, l1-Norm, l2-Norm, … , l-infinity Norm

    几种范数的解释 l0-Norm, l1-Norm, l2-Norm, - , l-infinity Norm from Rorasa's blog l0-Norm, l1-Norm, l2-Norm, ...