<!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. Git从远程仓库里拉取一条本地不存在的分支方法

    Git从远程仓库里拉取一条本地不存在的分支方法 从远程仓库里拉取一条本地不存在的分支时,进入到对应目录先执行git fetch然后再执行git checkout -b 本地分支名 origin/远程分 ...

  2. 监控MySQL主从脚本

    示例一: cat check_mysql_health #!/bin/sh slave_is=($(mysql -S /tmp/mysql3307.sock -uroot -e "show ...

  3. The Little Prince-12/01

    The Little Prince-12/01 The people have no imagination. They repeat whatever one says to them… On my ...

  4. MySQL 如何创建索引？怎么优化？

    索引类似大学图书馆建书目索引,可以提高数据检索的效率,降低数据库的IO成本.MySQL在300万条记录左右性能开始逐渐下降,虽然官方文档说500~800w记录,所以大数据量建立索引是非常有必要的.My ...

  5. 对gulp的理解和使用（一）

    说的gulp,到底是什么?用来做什么的? 以前并没有想过这个问题,拿到公司的项目脚手架就开始做事情了.现在专门来总结一下. gulp干什么的呢? gulp是node中的一种代码构建工具,还有就是项目自 ...

  6. git学习总结 - 纯命令

    全局安装git: npm intall git -g 查看git版本: git --version 进入目录,初始化git: 若在目录中使用上一个,不在目录中使用下一个. //已有目录: git in ...

  7. OL6.3 设置本地yum源

    仅在 Oracle Linux Server release 6.3 上测试 PS:Oracle Linux Server release 6.3仅用于测试,不能用于商业用途 [root@oracle ...

  8. php脚本#!/usr/bin/env php写法的好处

    脚本语言的第一行,目的就是指出,你想要你的这个文件中的代码用什么可执行程序去运行它.比如php脚本的第一行可以写成如下几种格式#!/usr/bin/php#!/usr/bin/env php#!/us ...

  9. 禁止单个IP或ip段访问

    //IP禁止判断接口,返回true则为找到 function checkIp($ip, $ipbanned) { $ipbannedFlag = false; if (!empty($ipbanned ...

  10. v-bind属性的绑定

    v-bind:属性绑定: 当我们并没有使用v-bind使用的时候,突破不能显示出来,会提示错误,提示我们使用v-bind: 当我们使用v-bind时图片就可以显示: v-bind的简写是冒号: 使用v ...