<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 150px;
height: 150px;
background: red;
margin: 5px;
float: left;
filter: alpha(opacity:30);
opacity: 0.3;
}
</style>
<script>
window.onload = function(){
var divs = document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
//添加属性
divs[i].timer = null;
divs[i].alpha = 30;
divs[i].onmouseover = function(){
startmoveDiv(this,100);
};
divs[i].onmouseout = function(){
startmoveDiv(this,30);
};
}
};

function startmoveDiv(obj,target){
//清除之前的定时器（保证同一时间一个物体上只存在一个定时器，不然几个定时器累加，速度会变得很快）
clearInterval(obj.timer);

obj.timer = setInterval(function(){
//获得变化的速度
var speed = (target - obj.alpha)/70;
//将速度取整
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.alpha == target){
clearInterval(obj.timer);
}else{
obj.alpha += speed;
//一下是兼容性的体现，支持几种浏览器
obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
obj.style.opacity = obj.alpha/100;
}
},30);
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

Javascript 多物体淡入淡出（透明度变化）的更多相关文章

  1. javascript多物体运动案例：多物体淡入淡出

    javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...

  2. iTween基础之CameraFade(摄像机淡入淡出)

    一.基础介绍:二.基础属性 原文地址: http://blog.csdn.net/dingkun520wy/article/details/50896420 一.基础介绍 CameraTexture: ...

  3. js渐隐渐现透明度变化淡入淡出轮播图

    js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...

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

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

  5. javascript淡入淡出效果的实现思路

    这个思路是最近写XScroll.js类的时候想明白的.平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了.不过经过分析,我觉得其实只需要一半就行了如题,只有思路,没有代码. 这个思 ...

  6. javascript 图片淡入淡出效果 实例源代码

    代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...

  7. JavaScript实现淡入淡出

    <!DOCTYPE html> <html> <head> <title>css动画</title> </head> <b ...

  8. 练习：javascript淡入淡出半透明效果

    划过无透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. day40—JavaScript多物体运动框架

    转行学开发,代码100天——2018-04-25 今天继续学习JavaScript的运动实现——多物体运动框架的介绍及其应用. 首先来看一个简单的例子.如下图,要使图中3个红色盒子实现鼠标移入变宽,移 ...

随机推荐

  1. json "key" 注意

    json 的key只能是字符串 必须使用 双引号

  2. html5兼容问题

    1.html5对于ie9一下的版本不支持,所以我们可以添加(你可以下载至本地): <!--[if lt IE 9]> <script src="http://cdn.sta ...

  3. pip安装本地文件

    I do a lot of development without an internet connection1, so being able to install packages into a ...

  4. ListView-电影列表

    import React, { Component } from 'react';import { Platform, StyleSheet, Text, View, ListView } from ...

  5. MyEclipse 汉化后切换回英文（中英文切换）

    没事玩玩MyEclipse,按网上的办法把它汉化了!搞了些教程看,教程用的都是英文,还是把MyEclipse也切换回原来的英文得了! 方法:1.复制MyEclipse的快捷方式:2.右键快捷方式-&g ...

  6. centos的基本命令03(du 查看文件详情，echo清空文件内容)

    1:查看/etc/passwd的内容并打印出行号 强制退出vim编辑器  :q! 这个连续两个小符号, 他代表的是『结束的输入字符』的意思.这样当空行输入eof字符,输入自动结束,不用ctrl+D c ...

  7. React第一篇： 搭建React + nodejs + express框架

    前提: 需要安装Node.js (>6)版本 1.cmd进到本地某个目录, 逐行输入以下指令(以下括号为注释) npm install -g create-react-app   (全局安装cr ...

  8. C语言编译器和IDE的选择

    什么是编译器: CPU只认识几百个二进制形式的指令,C语言对CPU而言简直就是天书.C语言是用固定的词汇与格式组织起来,简单直观,程序员容易识别和理解. 这时候就需要一个工具,将C语言代码转换成CPU ...

  9. 【Python】批量检测百度权重

    挖洞过程中收集了站点后,我一般习惯查看站点的百度权重值,为了方便,写了一个简单的脚本, 至于结果如何显示,看个人需求吧,我这里只是简单的列一下,脚本如下: #coding:utf-8 import r ...

  10. storm（3）-本机模式-helloworld

    pom.xml <dependency> <groupId>org.apache.storm</groupId> <artifactId>storm-c ...