<!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. android sdk 更新用的HOSTS

    74.125.113.121 developer.android.com203.208.46.146 www.google.com 203.208.46.146 dl.google.com 203.2 ...

  2. jquery甘特图免费下载

    Silverlight Gantt甘特图是一款非常丰富,可定制,轻量级和高性能的控件. 项目甘特图: 可视化层次的任务列表. 可移动和拖拽调整条形图 可视化时间编辑器 编辑任务依赖关系 调整任务进度条 ...

  3. Day6 google Geocoding API

    在看机器学习实战中K-means一章,练习中需要调用Yahoo PlaceFinder API 为地点添加经纬度,语言是python.申请到了appid但调用好像还要收费,要填写银行卡号才能用,没管那 ...

  4. 黑马程序员——【Java高新技术】——反射机制

    ---------- android培训.java培训.期待与您交流! ---------- 一.概述 1.Java反射机制:是指“在运行状态中”,对于任意一个类,都能够知道这个类中的所有属性和方法: ...

  5. oop、try_except、单例模式

    本节大纲: 面向对象特性:封装.继承.多态.一:多态:python本身是多态,他的参数可以多种类型.可以是字符串.数字.列表等.当传入参数的时候,python可以判断参数的数据类型.而在java C# ...

  6. web安全之http协议

    http协议 全称是超文本传输协议,是web的核心传输机制,也是服务端和客户端之间交换url的首选协议. url url全称是统一资源定器(统一资源标识符) 顾名思义 每一条格式正确且规范,但url都 ...

  7. POJ 1837 DP

    一开始看到这个题 第一反应:暴搜! 看看数据范围 ...放弃了 然后就在各种憋状态转移方程. 各种不会 还是看了Discuss里面说的才有点儿思路 直接放状态转移方程: f[i][ j+ w[i]*c ...

  8. Word 2013发布博客配置步骤

    .打开Word 2013,点击"共享"››"博客":   .在打开的窗口中点击"管理帐户":   .然后点击"新建": ...

  9. ✡ leetcode 163. Missing Ranges 找出缺失范围 --------- java

    Given a sorted integer array where the range of elements are in the inclusive range [lower, upper], ...

  10. passing argument 3 of ‘wtk_hlv_rec_init’ discards ‘const’ qualifier from pointer target type

    -Werror,编译出现如下错误: src/wtk/exam/wtk_ndx.c:154:6: error: passing argument 3 of ‘wtk_hlv_rec_init’ disc ...