<!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. HttpURLConnection发送和接受返回值

    URL url = new URL(sb.toString());//请求的地址 HttpURLConnection connection = (HttpURLConnection) url.open ...

  2. 网页版电子表格控件tmlxSpreadsheet免费下载地址

    tmlxSpreadsheet 是一个由JavaScript 和 PHP 写成的电子表格控件(包含WP插件, Joomla插件等等).. 程序员可以容易的添加一个类似Excel功能的,可编辑的表格功能 ...

  3. 使用Timer类的两个实例 动态时钟

    package chapter16; import javax.swing.*; import chapter15.StillClock; import java.awt.event.*; publi ...

  4. 图数据库(graph database)资料收集和解析 - daily

    Motivation 图数据库中的高科技和高安全性中引用了一个关于图数据库(graph database)的应用前景的乐观估计: 预计到2017年,图数据库产业在数据库市场的份额将从2个百分点增长到2 ...

  5. mm/memory

    /* *  linux/mm/memory.c * *  Copyright (C) 1991, 1992  Linus Torvalds */ /* * demand-loading started ...

  6. QSqlTableModel 使用方法（转）

    Qt QSqlTableModel 使用心得 连接数据库 执行sql查询,条件显示,排序 获取记录数,列数以及记录内容,字段内容 新增,修改,删除,恢复 其它 1---------------连接数据 ...

  7. CSS 知识点

    1:display:block:比较常用于<a><span>这两个标签——因为这两个标签非块元素,如果不用display:block定义一下,因为a标签没有结构,就是没有宽高, ...

  8. Unity Shader——Writing Surface Shaders(3)——Surface Shader Lighting Examples

    Surface Shader 光照例子 这里有一些自定义光照模型和Surface Shaders的例子.通常的Surface Shader例子在这里. 由于延迟光照在某些自定义的逐材质光照模型中表现得 ...

  9. Maven学习3-使用Maven构建项目

    转自:http://www.cnblogs.com/xdp-gacl/p/4240930.html maven作为一个高度自动化构建工具,本身提供了构建项目的功能,下面就来体验一下使用maven构建项 ...

  10. post 与 get 在转码的区别

    前端输入中文的时候,后端post通过 String text = getRequest().getParameter("text");可以正常拿到中文, 但是通过get的时候就会出 ...