<!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. 对ASP.NET Cookie的一些新的认识

    做用户登录,我一直用form验证的方式.有时候,为了节省时间,用户希望用户名输入框能够记住用户名,省得下次重新输入.这个时候光用form验证是不行的,因为form验证的话,用户一退出系统就失效了,所以 ...

  2. Jquery系列教程

    最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...

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

    helloos3: helloos.nas的解释在P29中 接下来课本讲了一些汇编语言的知识,便于理解这个汇编文件helloos4: 讲解在P41 helloos.nas后半部分去掉就成了ipl.as ...

  4. android 测试（转）

    个人接触android的时间也不是很长,稍微总结下在做Android测试的过程中,初次接触的同学需要些什么准备,以及需要些什么知识?下面讲到的东西可能很多人会觉得很简单,但我确实碰到过有新同学对这些点 ...

  5. bean中集合属性的配置

    在实际的开发中,有的bean中会有集合属性,如下: package com.sevenhu.domain; import java.util.List; /** * Created by hu on ...

  6. linux第8天 connect强化

    今天没有系统学习什么新知识,就是把以前学到的知识复习了一下,其中有几点值得注意 connect(fd, (struct sockaddr *)addr, sizeof(struct sockaddr_ ...

  7. TP隐藏入口

    我们知道,在thinkphp的案例中有一个.htaccess文件,里面配置了URL的一些重写规则,如: <IfModule mod_rewrite.c>  RewriteEngine on ...

  8. scala2.10.x case classes cannot have more than 22 parameters

    问题 这个错误出现在case class参数超出22个的时候. case classes cannot have more than 22 parameters 在scala 2.11.x版本以下时c ...

  9. DataFrame使用mysql数据

    错误提示:  Exception in thread "main" java.sql.SQLException: No suitable driver found for jdbc ...

  10. 夺命雷公狗ThinkPHP项目之----企业网站17之网站配置页的添加

    为了网站可以智能一点,所以我们开始来写一个网站配置的功能.. 所以我来写他的数据表: 先来完成他的添加功能,页面效果如下所示: lists.html代码如下所示: <!doctype html& ...