<!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. js 的常用方法和对象

    每日分享: 加油!你一定可以!你是最牛逼的!!!-------------------------------------------------------------------------- - ...

  2. POJ_3268 Silver Cow Party 【最短路】

    一.题面 POJ3268 二.分析 该题的意思就是给定了一个由每个节点代表农场的有向图,选定一个农场X办party,其余农场的都要去,每个农场的cow都走最短路,走的时间最久的cow耗时多少. 了解题 ...

  3. Vue项目中用的Jquery.js和easing.js做的抛物线

    如果项目中还用到自有的$ <script> jQuery.noConflict();</script> //星星掉落movePathNew(args) { let self = ...

  4. 4KM

    ip addr add 10.9.8.100/24 broadcast + dev eth0 /etc/sysconfig/network-scripts/ifcfg-eth0 ifdown eth0 ...

  5. acl权限使用

    1.acl的设置技巧 *setfacl 用法: setfactl [-bkRd] [{-m|-x} acl参数] 目标文件名 -m:设置后续的acl参数给文件使用,不可与-x合用 -x:删除后续的ac ...

  6. 转载 python文件复制的方法

    Python复制文件的9种方法 51Testing软件测试网 17-11-1614:13 以下是演示"如何在Python中复制文件"的九种方法. 1.shutil copyfile ...

  7. linux vi文本编辑器三种模式切换及常用操作

    初学者刚进入vi不要乱点键盘,vi的三种模式和各种命令很容易弄混@@ vi编辑器是Unix系统最初的编辑器.它使用控制台图形模式来模拟文本编辑窗口,允许查看文件中的行.在文件中移动.插入.编辑和替换文 ...

  8. DBA 需要掌握的知识框架及工作内容

    知识框架 1.  数据库的工作原理以及体系结构 2.  数据库管理(管理数据库和数据库对象) 3.  数据库备份和恢复 4.  数据库故障处理 5.  数据库补丁安装及升级 6.  数据库性能 工作内 ...

  9. java实现猴子选大王问题（约瑟夫问题）

    题目:m只猴子围成一圈报数,报n的猴子自动离开,然后下一位重新从1开始报数,一直循环,最后剩下的那个猴子就是猴大王,写出程序求出最后是大王的那只猴子最初的位置. package learn; impo ...

  10. LeetCode 100.相同的树（C++）

    给定两个二叉树,编写一个函数来检验它们是否相同. 如果两个树在结构上相同,并且节点具有相同的值,则认为它们是相同的. 示例 1: 输入: 1 1 / \ / \ 2 3 2 3 [1,2,3], [1 ...