<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

img{

    margin-left: 200px;

    opacity: 0.3;

    alpha(opacity = 30);

    }

</style>

<script>

    window.onload = function ()

    {

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

        var timer = null;

        oimg.onmouseover = function ()

        {

            touming(this,100,10)

        }

        oimg.onmouseout = function ()

        {

            touming(this,30,-10);

        }

        function touming(obj,target,speed)

        {

            clearInterval(timer);

            timer = setInterval(function ()

                {

                    var icur = Math.round(css(obj,'opacity')*100);

                    if(icur == target)

                    {

                        clearInterval(timer);

                    }

                    else

                    {

                        obj.style.opacity = (icur + speed)/100;

                        obj.style.filter = 'alpha(opacity= '( + icur + speed ) + ')';

                    }

                },30);

        }

        function css(obj,attr)

        {

            if(obj.currentStyle)

                return obj.currentStyle[attr];

            else

                return getComputedStyle(obj,false)[attr];

        }

    }

</script>

</head>

<body>

<img id="img1" src="img/1.jpg" alt="图片">

</body>

</html>

js运动 淡入淡出的更多相关文章

  1. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  2. js+jq 淡入淡出轮播（点击+定时+鼠标进入移出事件）

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

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

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

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

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

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

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

  6. js 淡入淡出的图片

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

  7. js淡入淡出

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

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

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

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

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

随机推荐

  1. SGU 385 Highlander（期望）

    题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=385 题意: 思路: double f[N][N][N],g[N][N],A[N][ ...

  2. 一、Oracle分析函数入门

    分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计值. 分析函数和聚合函数的不同 ...

  3. CSS中position:fixed的用法

    我们都知道CSS中定位属性position的值,除了默认的值外,还有absolute,relative和fixed.我平时比较常用absolute和relative,而position:fixed却没 ...

  4. android利用数字证书对程序签名

     签名的必要性 1.  防止你已安装的应用被恶意的第三方覆盖或替换掉. 2.  开发者的身份标识,签名可以防止抵赖等事件的发生. 开发Android的人这么多,完全有可能大家都把类名,包名起成了一个同 ...

  5. hdu1051（LIS | Dilworth定理）

    这题根据的Dilworth定理,链的最小个数=反链的最大长度 , 然后就是排序LIS了 链-反链-Dilworth定理 hdu1051 #include <iostream> #inclu ...

  6. HDU 2159 FATE【二维完全背包】

    题意:xhd玩游戏,还需要n个经验值升级,还留有m的忍耐度,但是他最多打s只怪,给出k个怪的经验值a[i],以及消耗的忍耐度b[i],问xhd能不能升级-- 因为有两个限定,忍耐度,和最多打s只怪(即 ...

  7. UVALive 3989 Ladies' Choice（稳定婚姻问题：稳定匹配、合作博弈）

    题意:男女各n人,进行婚配,对于每个人来说,所有异性都存在优先次序,即最喜欢某人,其次喜欢某人...输出一个稳定婚配方案.所谓稳定,就是指未结婚的一对异性,彼此喜欢对方的程度都胜过自己的另一半,那么这 ...

  8. 信息熵 Information Theory

    信息论(Information Theory)是概率论与数理统计的一个分枝.用于信息处理.信息熵.通信系统.数据传输.率失真理论.密码学.信噪比.数据压缩和相关课题.本文主要罗列一些基于熵的概念及其意 ...

  9. MAC OSX 下安装Cscope

    续前文,搞定CTAGS之后,需要被搞定的是cscope,依旧是上网拖一把,具体过程如下   #1 下载cscope最新版本 http://cscope.sourceforge.net/#downloa ...

  10. liunx的目录结构

    linux目录结构的最顶端是/目录 我们一般都称为root目录. linux有四种文件类型,分别是普通文件,目录文件,连接文件,特殊文件,可以用file来识别. 普通文件:文本文件 二进制文件 图像文 ...