<!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. struts标签小记

    1.<s:iterator>标签的  奇偶数行使用不同样式 <s:iterator id="list" value="#request.listq&qu ...

  2. Swift实战-豆瓣电台（一）准备

    一 准备 我们现在看看我们要做一个什么样的东西 观看地址:http://v.youku.com/v_show/id_XNzI4ODY2Mjky.html 布局 通过上面这张图我们可以看出整个demo有 ...

  3. [原创]java WEB学习笔记90：Hibernate学习之路-- -HQL检索方式，分页查询，命名查询语句，投影查询，报表查询

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. nginx的基本配置和虚拟主机的配置

    在Nginx配置文件(nginx.conf)中,一个最简化的虚拟主机配置代码如下: 跟Apache -样,Nginx也可以配置多种类型的虚拟圭机:一是基于IP的虚拟主机,二是基于域名的虚拟主机,三是基 ...

  5. CCF真题之出现次数最多的数

    201312-1 问题描述 给定n个正整数,找出它们中出现次数最多的数.如果这样的数有多个,请输出其中最小的一个. 输入格式 输入的第一行只有一个正整数n(1 ≤ n ≤ 1000),表示数字的个数. ...

  6. paper 54 :图像频率的理解

    我一直在思考一个问题,图像增强以后,哪些方面的特征最为显著,思来想去,无果而终!翻看了一篇知网的paper,基于保真度(VIF)的增强图像质量评价,文章中指出无参考质量评价,可以从三个方面考虑:平均梯 ...

  7. 夺命雷公狗---linux之红帽的安装

    夺命雷公狗分享的第二套安装linux方法是RadHad的安装方法,,, 点击然后就自动重启了

  8. 夺命雷公狗---Thinkphp----7之栏目配合Model的增删改查

    我们首先来写一个查: public function lists(){ $type = M('Type')->select(); $this -> assign('type',$type) ...

  9. 利用foreach对页面控件的遍历 及三目运算符的使用

    1.利用foreach对页面控件的遍历 及三目运算符的使用 利用div将一组CheckBox放在一起用于遍历 <body> <form id="form1" ru ...

  10. Oracle读书笔记

    数据区(也叫数据扩展区)由一组连续的Oracle块所构成的Oracle存储结构,一个或多个数据块组成一个数据区,一个或多个数据区再组成一个断(Segment). 数据块是Oracle逻辑存储中的最小的 ...