<!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. [原创] Linux 中的 nohup 与 &

    目录 背景 结论放前面 & nohup nohup + & 测试 直接运行 单独使用 & 单独使用 nohup nohup + & 背景 一直没搞清楚 nohup 与 ...

  2. Python中的正斜杠/与反斜杠\

    知识点: 1. "/"左倾斜是正斜杠,"\"右倾斜是反斜杠,可以记为:除号是正斜杠 2. 对于目录分隔符,Unix和Web用正斜杠/,Windows用反斜杠\. ...

  3. next_permutation（全排列）

    废话不多说,直接上代码,谁测试,谁知道 C++: #include<bits/stdc++.h> using namespace std; typedef long long ll; in ...

  4. UUID生成工具

    public class UUIDUtils { private static SecureRandom SEEDER_STATIC = null; private static byte[] ADD ...

  5. c/c++ int long float double 表示范围

    引自https://blog.csdn.net/xuexiacm/article/details/8122267

  6. zookeeper 选举机制 和 eruake

    zookeeper简介: 在分布式环境中,多个服务之间协调一致.有提供分布式锁.服务配置.实现分布式领域CAP(consistency一致性,Availiablity高可用,patition tolr ...

  7. md5码加密（Python）

    import hashlib import hmac m = input('输入要加密内容:') md = hashlib.md5()#生成md5 hash对象 md.update(m.encode( ...

  8. Jmeter性能测试之添加思考时间

    利用定时器添加用户思考时间 JMeter如何插入思考时间,在一个真实的性能测试场景中,是需要加入思考时间,来模拟真实用户行为.本文就来介绍,如何在三个请求之间添加思考时间. 1. 在Test Plan ...

  9. 查看分析器(Analyzer)的分词效果

    1 测试代码 package com.test.lucene.helloworld; import org.apache.lucene.analysis.Analyzer; import org.ap ...

  10. jquery colsest的用法

    如果有class,就是他自己,没有就在父级去找 e=e||window.event; var target=e.srcElement?e.srcElement:e.target; var parent ...