<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>Document</title>

</head>

<style>

         div{width:200px;height: 200px;margin: 20px;float: left;

         background-color: red;filter:alpha(opacity:30);opacity: 0.3;}

</style>

<body>

            <div></div>

            <div></div>

            <div></div>

            <div></div>        

</body>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

    window.onload=function(){

        var oDiv=document.getElementsByTagName('div');

        for(var i=0;i<oDiv.length;i++){

            oDiv[i].alpha=30;

            oDiv[i].onmouseover=function(){

                startMove(this,100);

            };

                oDiv[i].onmouseout=function(){

                startMove(this,30);

            };

        }

    };

        function startMove(obj,iTarget){

            clearInterval(obj.timer);

            obj.timer=setInterval(function(){

                var speed=(iTarget-obj.alpha)/6;

                speed=speed>0?Math.ceil(speed):Math.floor(speed);

                if(obj.alpha==iTarget){

                    clearInterval(obj.timer);

                }else{

                    obj.alpha+=speed;

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

                    obj.style.opacity=obj.alpha/100;

                }

            },30);

        }

</script>

</html>

js多物体运动之淡入淡出效果的更多相关文章

  1. js笔记----（运动）淡入淡出

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果

    最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...

  3. 淡入淡出效果的js原生实现

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

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

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

  5. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  6. 基于jquery实现的文字淡入淡出效果

    这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  7. 实现Bootstrap Carousel Fade Transition 淡入淡出效果

    html代码: <div id="carousel" class="carousel slide carousel-fade" data-ride=&qu ...

  8. 【jQuery】使用JQ来编写面板的淡入淡出效果

    本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...

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

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

随机推荐

  1. (Review cs231n) Gradient Vectorized

    注意: 1.每次更新,都要进行一次完整的forward和backward,想要进行更新,需要梯度,所以你需要前馈样本,马上反向求导,得到梯度,然后根据求得的梯度进行权值微调,完成权值更新. 2.前馈得 ...

  2. Step2：SQL Server 复制事务发布

    一.背景 在复制的运用场景中,事务发布是使用最为广泛的,我遇到这样一个场景:在Task数据库中有Basic与Group两个表,需要提供这两个表的部分字段给其它程序读取放入缓存,程序需要比较及时的获取到 ...

  3. （2018干货系列十一）最新iOS学习路线整合

    怎么学iOS iOS是由苹果公司开发的移动操作系统,以xcode为主要开发工具,具有简单易用的界面.令人惊叹的功能,以及超强的稳定性,已经成为iPhone.iPad 和iPod touch 的强大基础 ...

  4. Android几种解析XML方式的比较

    https://blog.csdn.net/isee361820238/article/details/52371342 一.使用SAX解析XML SAX(Simple API for XML) 使用 ...

  5. 把你的Centos设置成代理ip服务器

    前言:最近在公司做爬虫相关的工作,做过数据抓取的都知道,写程序抓取数据的过程并不像平常我们用浏览器打开网页那么简单!大多数的网站为了自己站点的性能和数据安全都设置了各种反爬策略.最常见的就是添加验证码 ...

  6. Windows下用cmd命令实例讲解yii2.0 的控制台定时任务

    Yii中的资源是和Web页面相关的文件,可为CSS文件,JavaScript文件,图片或视频等,资源放在Web可访问的目录下,直接被Web服务器调用. 有时候有些功能需要做到计划任务中去,因此就需要y ...

  7. python使用super()调用父类的方法

    如果要在子类中引用父类的方法,但是又需要添加一些子类所特有的内容,可通过类名.方法()和super()来调用父类的方法,再个性化子类的对应函数. 直接使用类名.方法()来调用时,还是需要传入self为 ...

  8. Mybatis打印不出SQL日志

    要是mybatis项目打印出日志,只需要在log4j的配置文件中加上下面一段即可 log4j.logger.com.ibatis=debug log4j.logger.com.ibatis.commo ...

  9. 02: djangorestframework使用

    1.1 djangorestframework登录.认证和权限 1.认证与权限相关模块 # -*- coding: utf-8 -*- from django.utils import six fro ...

  10. python识别图片生成字符模式

    此python文件来自D7哥, 放在这里备份. 用法 python3 PIL\&argparse.py 1.jpg -o test.txt --width 300 --height 300 p ...