<!DOCTYPE html>

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

<head>

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

    <title></title>

    <style>

        #img1 { height:300px; width:300px; margin:30px auto; filter:alpha(opacity=); opacity:0.3; }

    </style>

    <script type="text/javascript">

        window.onload = function () {

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

            oImg.onmouseover = function () {

                StarMove();

            }

            oImg.onmouseout = function () {

                StarMove();

            }

        }

        var timer = null;

        var alpha = ;

        function StarMove(iTarget)

        {

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

            var iSpeed = ;

            if (alpha < iTarget) {

                iSpeed = ;

            }

            else {

                iSpeed = -;

            }

            clearInterval(timer);

            timer = setInterval(function () {

                alpha += iSpeed;

                if (alpha == iTarget) {

                    clearInterval(timer);

                }

                else {

                    oImg.style.filter = "alpha(opacity=" + alpha + ")";

                    oImg.style.opacity = alpha / ;

                }

            }, );

        }

    </script>

</head>

<body>

    <img id="img1" src="data:images/02.jpg" alt="" />

</body>

</html>

js笔记----（运动）淡入淡出的更多相关文章

  1. js原生实现淡入淡出

         转自http://kb.cnblogs.com/page/90854/ 参数说明: fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, ...

  2. js运动 淡入淡出

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. js笔记----(运动)分享 隐藏/显示

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

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

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

  5. js 淡入淡出的图片

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

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

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

  7. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  8. js淡入淡出

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

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

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

  10. [js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)

    javascript中,如何让一个元素(比如div)运动起来呢? 设置基本的样式,一定要让div有定位( 当然用margin的变化也可以让元素产生运动效果 ); <style> div { ...

随机推荐

  1. 【推荐】使用Jquery+EasyUI进行框架项目开发案例讲解之一---员工管理源码分享

    使用Jquery+EasyUI 进行框架项目开发案例讲解之一 员工管理源码分享   在开始讲解之前,我们先来看一下什么是Jquery EasyUI?jQuery EasyUI是一组基于jQuery的U ...

  2. apache allow和deny

    转自 http://www.cnblogs.com/top5/archive/2009/09/22/1571709.html 影响最终判断结果的只有两点: 1. order语句中allow.deny的 ...

  3. Java基础之创建窗口——颜色和光标（TryWindow4)

    控制台程序. java.awt包中把SystemColor类定义为Color类的子类.SystemColor类封装了本机操作系统用于显示各种组件的标准颜色.如果要比较SystemColor值和Colo ...

  4. 用 CSS 做轮播图

    对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...

  5. python入门到精通[一]:搭建开发环境

    摘要:Python认识,及在windows和linux上安装环境,测试是否安装成功. 1.写在前面 参加工作也有5年多了,一直在做.net开发,近一年有做NodeJS开发.从一开始的不习惯,到逐步适应 ...

  6. 转：python socket编程详细介绍

    Python 提供了两个基本的 socket 模块. 第一个是 Socket,它提供了标准的 BSD Sockets API. 第二个是 SocketServer, 它提供了服务器中心类,可以简化网络 ...

  7. Java基础(56):Java---Assertion的试用（华为OJ里的Java题目的用例检测就是用的断言）

    一.assertion的意义和用法 J2SE 1.4在语言上提供了一个新特性,就是assertion功能,它是该版本在Java语言方面最大的革新. 从理论上来说,通过 assertion方式可以证明程 ...

  8. Android 沉浸式状态栏

    1,传统的手机状态栏是呈现出黑色或者白色条状的,有的和手机主界面有很明显的区别.这样就在一定程度上牺牲了视觉宽度,界面面积变小.看一下QQ的应用 2,实现起来也挺简单的,来一起看一下吧 MainAct ...

  9. 杭电 1595 find the safest road

    find the safest road Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  10. Union与union all区别

    Union因为要进行重复值扫描,所以效率低.如果合并没有刻意要删除重复行,那么就使用Union All  两个要联合的SQL语句 字段个数必须一样,而且字段类型要“相容”(一致): 如果我们需要将两个 ...