<!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. 20165215 2017-2018-2 《Java程序设计》第八周学习总结

    20165215 2017-2018-2 <Java程序设计>第八周学习总结 教材学习内容总结 进程与线程 进程是程序的一次动态执行过程,它对应了从代码加载.执行至执行完毕的一个完整过程. ...

  2. Python词云分析

    import jieba from matplotlib import pyplot as plt from wordcloud import WordCloud from PIL import Im ...

  3. The Little Prince-12/12

    The Little Prince-12/12 双十二,大家有没有买买买呢?宝宝双十一之后就吃土了,到现在,叶子都长出来了!!! 当你真的喜欢一个人的时候 就会想很多 会很容易办蠢事 说傻话 小王子要 ...

  4. Java笔记 #03# HtmlUnit爬虫

    存档留用 (= 存档留着备用) 爬的是一个开放的自动回复机器人 API 网站 http://i.itpk.cn/. 结构 大致如下: 我做的事情就是[输入文字,点击按钮,爬取内容],如上图所示. pa ...

  5. java.lang.IllegalStateException: Failed to check the status of the service

    java.lang.IllegalStateException: Failed to check the status of the service com.pinyougou.sellergoods ...

  6. gcahce事物不够，借助binlog追上

    gcahce事物不够,借助binlog追上 宕机节点以单机集群启动,既自己作为一个集群启动,不过UUID要和旧的集群保持一致: 修复grastate.dat 文件的方式这里略,直接通过wsrep_re ...

  7. listen()函数中backlog参数分析

    实例分析1 将服务器端的listen函数backlog设置为2,用20个客户端与服务器建立连接,查看连接的建立情况. 服务器代码: #include <stdio.h> #include& ...

  8. nginx动静态分离以及配置https（安全组强行切换以及导致的问题解决）

    公司原来的网络采用http/https同时支持的方式,http并不会强制自动跳转到https,最近要求强制切换,导致了一系列问题.趁今天测试完成了,整理如下: 1.要求HTTP自动跳转到HTTPS: ...

  9. golang Format string by key.

    example: $ go get github.com/hoisie/mustache package main import ( "github.com/hoisie/mustache& ...

  10. Idea 破解教程 （2018.11-29最新版）

    一.下载安装idea,这里不做赘述.官网-https://www.jetbrains.com/idea/ 二.安装完idea后,需要激活使用.这里需要先下载个工具包 ,下载网址http://idea. ...