<!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. Chrome-headless 模式，没有UI界面的自动化UI测试

    如果在本机执行UI自动化脚本,打开的浏览器总是会不同程度的影响你做别的事情,那么我们可以采用 无界面运行我们的UI自动化,这种模式下运行脚本并不会真正地打开浏览器,整个过程都是在后台执行的.爽歪歪. ...

  2. 比较 GET 与 POST

    post比get安全 get请求方法向url添加数据  全部用POST不是十分合理,最好先把请求按功能和场景分下类, 对数据请求频繁,数据不敏感且数据量在普通浏览器最小限定的2k范围内,这样的情况使用 ...

  3. Linux安装python3.6.3

    一: (1)wget https://www.python.org/ftp/python/3.6.3/Python-3.6.3.tgz 下载安装包 (可以到网站下载,然后上传到Linux) (2)ta ...

  4. django notes 一：开篇

    公司 web 框架用的是 django, 以前没用过,打算这两周好好看看. 边学习边整理一下笔记,加深理解. 好像谁说过初学者更适合写入门级的教程,我觉得有一定道理. 高手写的教程有一定深度,不会写入 ...

  5. linux mint 18.1 安装nvidia显卡驱动

    原文地址 http://www.gamersonlinux.com/forum/threads/updating-nvidia-drivers-mint.1746/ 主要步骤很简答 就是将ppa仓库地 ...

  6. 使用kerl安装erlang遇到的问题及解决办法-bak

    1 需要安装相关包 -dev autoconf 2 出现下面错误 * documentation : * xsltproc is missing. * fop is missing. * xmllin ...

  7. twitter storm常用命令

    1.提交Topologies命令格式:storm jar [jar路径] [拓扑包名.拓扑类名][stormIP地址][storm端口][拓扑名称][参数]eg:storm jar /home/sto ...

  8. WPF的窗体设置WindowStyle=none时，如何移动窗体

    1. 在WPF中当将主窗体的WindowStyle设置为none时,使用鼠标移动不了窗体 2. 解决方法: 2.1. 在Windows的Load方法中增加一下代码: private void Wind ...

  9. Windows加密服务架构

    Windows加密是安全体系的重要基础和组成部分.现代CPU的保护模式是系统安全的硬件基石,基于CPU硬件的特权分级,Windows让自身的关键系统代码运行在高处理器特权级的内核模式,各种应用程序则运 ...

  10. npm 配置

    设置代理 $ npm config set proxy http://server:port $ npm config set https-proxy https://server:port 如果代理 ...