<!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基础命令---IP路由操作

    ip ip指令可以显示或操作路由.网路设备,设置路由策略和通道. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora.   1.语法     ...

  2. GUI常用对话框3

    %进度条 %waitbar h=waitbar(,'实例'); get(h); %获得进度条的子对象 get(get(h,'Children')) ha=get(h,'Children'); %获得坐 ...

  3. Codeforces 268B - Buttons

    Manao is trying to open a rather challenging lock. The lock has n buttons on it and to open it, you ...

  4. win10 校园宽带连接不上的解决办法（错误720、“以太网”没有有效的ip设置）

    遇到的问题如下图所示: 插上宽带后,查看以太网状态显示如下: 创建新连接宽带(PPPoE)(R)后,连接失败,错误为720,显示如下: 以太网网络诊断后,结果显示“以太网”没有有效的Ip设置,如下图所 ...

  5. hive 中简单的udf函数编写

    .注册函数,使用using jar方式在hdfs上引用udf库. $hive.注销函数,只需要删除mysql的hive数据记录即可. delete from func_ru ; delete from ...

  6. ubunta apt install error

    ubuntu系统: 用apt-get命令安装一些软件包时,总报错:E:could not get lock /var/lib/dpkg/lock -open等 出现这个问题的原因可能是有另外一个程序正 ...

  7. Java基础再复习(继承、多态、方法内部类**、HashMap用法**、参数传递**)

    ###继承: package com.shiyan; public class Animal { public int legNum; //动物四肢的数量 //类方法 public void bark ...

  8. mybatis之关联映射

    ###mybatis使用之一对一关联映射 1)分析并画ER图.(特别是一对一.一对多.多对多的情况) 2)启动终端数据库,并建库建表,在表中插入值和字段,并查看结果.(后期把navicat用上) 3) ...

  9. The logback manual #01# Introduction

    依赖包如下pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...

  10. php 一个文件搞定支付宝支付，微信支付

    博客:https://me.csdn.net/jason19905 支付宝支付:https://github.com/dedemao/alipay 微信支付:https://github.com/de ...