<!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. Linux基础命令---tracepath追踪路由信息

    tracepath tracepath指令可以追踪数据到达目标主机的路由信息,同时还能够发现MTU值.它跟踪路径到目的地,沿着这条路径发现MTU.它使用UDP端口或一些随机端口.它类似于Tracero ...

  2. ActiveMQ任意文件写入漏洞（版本在5.12.X前CVE-2016-3088）

    ActiveMQ任意文件写入漏洞(版本在5.12.X前CVE-2016-3088) 查看docker的activemq版本命令:$ docker ps | grep activemq927860512 ...

  3. 委托、匿名函数到lambda表达式

    在C#2.0之前就有委托了,在2.0之后又引入了匿名方法,C#3.0之后,又引入了Lambda表达式,他们三者之间的顺序是:委托->匿名表达式->Lambda表达式,微软的一步步升级,带给 ...

  4. Caddy – 方便够用的 HTTPS server 新手教程

    最近发现了一个 golang 开发的 HTTP server,叫做 Caddy,它配置起来十分简便,甚至可以 28 秒配置好一个支持 http2 的 server ,而且对各种 http 新特性都支持 ...

  5. java之定时任务

    package com.financial.server.util; import java.text.SimpleDateFormat; import java.util.Date; import ...

  6. Centos7 安装 apache + php7.0 环境

    安装apache rpm -qa|grep httpd   查看是否安装 yum install httpd  安装 service httpd start  启动服务 测试是否 启动       I ...

  7. Baidu WebFE(FEX)团队开发 的 文件上传插件 WebUploader

    1.webUploader官网下载地址:http://fex.baidu.com/webuploader/ 直接下载代码,运行examples目录文件即可 2.webUploader上传demo:ht ...

  8. java中线程的停止以及LockSupport工具类

    看jstack输出的时候,可以发现很多状态都是TIMED_WAITING(parking),如下所示: "http-bio-8080-exec-16" #70 daemon pri ...

  9. 第五章 CSS常用属性笔记

    1. span标签 突显,强调局部文字的作用. 2.字体样式 font-size: 字体大小 font-style:normal,italic(倾斜) font-weight:normal,bold( ...

  10. docker 实践

    https://doc.yonyoucloud.com/doc/docker_practice/etcd/etcdctl.html 启动http restful API docker批量映射端口 怎么 ...