<!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. C语言修炼－第2天

    从昨天被打击到下定决心以来,还是觉得学习代码是能让自己真正觉得充实的事情.其实潜意识里一直是这样的不是吗?从开始选择工科就没有后悔过,更不应该现在就放弃,其实自己的缺点本来就是不够扎实,给自己150天 ...

  2. 新策略构思 dual thrust

    根据dual truest的策略,因为是针对日线级别的.同理我们可以根据60分钟级别开发出一套策略,等有时间写在下面

  3. Makefile 开发环境全能管家

    变量的应用: CC=gcc RM=rm EXE=main.exe OBJS=目标 伪目标的应用: .PHONY:clean 自动变量的应用: $@:表示一个规则的目标 $^:表示的是规则中的所有的先决 ...

  4. 相同vlan之间的相互访问

  5. C++ Primer : 第十三章 : 拷贝控制之对象移动

    右值引用 所谓的右值引用就是必须将引用绑定到右值的引用,我们通过&&来绑定到右值而不是&, 右值引用只能绑定到即将销毁的对象.右值引用也是引用,因此右值引用也只不过是对象的别名 ...

  6. 【Flask】Flask快速玩框架

    最近比较忙 快速玩Flask框架,为微博做些准备 part 1 python程序 from flask importFlask, render_template, session, redirect, ...

  7. 数迹学——Asp.Net MVC4入门指南（3）：添加一个视图

    方法返回值  ActionResult(方法执行后的结果) 例子1 public ActionResult methordName() { return "string"; } 例 ...

  8. Pycharm 使用配置

    配置一下Pycharm吧,不然用着头疼 常用设置: 1. pycharm默认是自动保存的,习惯自己按ctrl + s 的可以进行如下设置: 1). file -> Setting -> G ...

  9. 转--Eclipse中ctrl+shift+r与ctrl+shift+t的区别

    Eclipse中ctrl+shift+r与ctrl+shift+t的区别 标签: 快捷键工作区文件搜索打开资源文件 2016-09-13 15:44 292人阅读 评论(0) 收藏 举报  分类: e ...

  10. C string.h 常用函数

    参考:http://womendu.iteye.com/blog/1218155 http://blog.csdn.net/zccst/article/details/4294565 还有一些,忘记了 ...