<!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. oracle触发器书写方法

    CREATE SEQUENCE 序列名[INCREMENT BY n] --每次加几[START WITH n] --序列从几开始[{MAXVALUE/ MINVALUE n|NOMAXVALUE}] ...

  2. C++Builder组件

    1.TOpenDialog: Title属性:用于获取或设置对话框标题,如果么偶有给该属性赋值,则系统将使用默认值标题:“打开” .InitialDir属性:用于获取或设置文件对话框显示的初始目录.如 ...

  3. 0330 复利程序c语言版转java版 会逐渐更进版

    import java.util.Scanner; public class compounding { public static void main(String[] args) { menu() ...

  4. [原创]java WEB学习笔记45：自定义HttpFilter类，理解多个Filter 代码的执行顺序，Filterdemo：禁用浏览器缓存的Filter，字符编码的Filter，检查用户是否登陆过的Filter

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...

  5. linux第9天 UDP

    今天学了一点UDP知识,还是IP协议.都不是重点,重点是socket服务器框架 不过还是把今天学的东西,先罗列出来,将来复习的时候方便 q  UDP报文可能会丢失.重复 q  UDP报文可能会乱序 q ...

  6. ASP.NET状态管理策略

    如果要想把信息存储在客户端那可以选择视图状态.控件状态.隐藏字段.cookie.和查询字符串. 1.web窗体页提供viewstate属性作为内置结构,在同一页的多个请求间自动保留值.他作为页面的隐藏 ...

  7. cactive信号

    AXI中C-channel的cactive信号并不仅仅应用在CSYSREQ,CSYSACK交互中. CSYSREQ和CSYSACK信号都在低电平表示lower power的请求和应答有效. cacti ...

  8. ThinkPHP讲解（一）框架基础

    ThinkPHP框架知识点过于杂乱,接下来将以问题的形势讲解tp(ThinkPHP的简写) 1.tp框架是什么,为什么使用是它? 一堆代码的集合,里边有变量.函数.类.常量,里边也有许多设计模式MVC ...

  9. 什么是商业智能BI和实施BI的解决方案【转】

    商业智能,或BI,是一种统称,泛指用于对一个企业的原始数据进行分析的各种各样的软件系统.商业智能(BI)是由若干相关的活动组成的领域,包括数据挖掘,在线分析处理,查询和报表. 企业用商业智能(BI)来 ...

  10. scrapy学习记录

    scrapy是一个用来爬取一个或多个网站的数据,提取数据的应用框架.下载过程非常复杂,而且会遇到各种问题.所以写个博客来记录下. 安装好python2.7之后,就可以开始.安装scrapy前还需要安装 ...