<!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. Orchard学习系列-----如何运行的

    感慨:当接触到微软这套程序时,代码实在是太好了,好的几乎都读不懂.很久之前就对这个套开源程序特别感兴趣,但读不明白也让人郁闷. 背景(Orchard官网): 可组装系统的CMS系统,OrChard在运 ...

  2. 《30天自制操作系统》10_day_学习笔记

    harib07a: 整理内存管理函数:memman_alloc和memman_free能够以最小1字节进行内存管理,但时间久了后,容易产生外部碎片:为此,笔者编写了一些以0x1000字节为单位进行内存 ...

  3. JS练习题 显示登入者相关好友

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

  4. (转)json+flexgrid+jbox组合运用页面刷新<jsp>

    插件效果 1.JSP页面 1 <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  5. iis access denied, you do not have permission.

    this kind of problems are usually caused by some IIS configuration issues, like application pool set ...

  6. editPlus修改默认的文件编码

  7. 存储区更新、插入或删除语句影响到了意外的行数(0)。实体在加载后可能被修改或删除。刷新 ObjectStateManager 项。

    在用asp.net MVC3 的MusicStore时候 Edit某个数据项时提示下面的错误: 存储区更新.插入或删除语句影响到了意外的行数(0).实体在加载后可能被修改或删除.刷新 ObjectSt ...

  8. Jqueryの锋利的jquery练习

    $(function(){ $("div.SubCategoryBox li:gt(7):not(:last)").hide(); $("div.SubCategoryB ...

  9. 夺命雷公狗mongodb之----mongodb---2---常用命令和技巧

    查看有那些数据库: show dbs 切换到那个库: use  库名 use local use还有一个作用就是可以“创建一个数据库” use test 删除数据库: db.dropDatabase( ...

  10. Unable to find the wrapper "https"错误的解决办法

    PHP.ini默认配置下,用file_get_contents读取https的链接,就会如下错误:Warning: fopen() [function.fopen]: Unable to find t ...