（38）JS运动之淡入淡出
基本思路：使用样式filter。可是要区分IE浏览器和chrom、firefox的不同，详细也是用定时器来实现。
<!DOCTYPE HTML>
<!-- -->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
width:200px;
height:200px;
background:red;
filter:alpha(opacity:30);opacity:0.3;
} </style> <script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
oDiv.onmouseover=function ()
{
startMove(100);
};
oDiv.onmouseout=function ()
{
startMove(30);
}; };
var alpha=30;//透明度变量，由于样式那里初始是30
var timer=null;
function startMove(iTarget){
var oDiv=document.getElementById('div1'); clearInterval(timer);
timer=setInterval(function (){ var speed=0;
if(alpha<iTarget)
{
speed=1;
}
else{
speed=-1;
}
if(alpha==iTarget)
{
clearInterval(timer);
}
else
{
alpha+=speed;
oDiv.style.filter='alpha(opacity:'+alpha+')';//IE的透明度
oDiv.style.opacity=alpha/100;//谷歌、火狐浏览器。满的值是1，不是100。因此除以100
} },30) }
</script>
</head>
<body> <div id="div1"></div> </body>
</html>
效果图：
（38）JS运动之淡入淡出的更多相关文章
- js原生实现淡入淡出
转自http://kb.cnblogs.com/page/90854/ 参数说明: fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, ...
- js多物体运动之淡入淡出效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- js笔记----（运动）淡入淡出
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- js实现多个图片淡入淡出，框架
单个淡入淡出已经写过,可以看看上几遍的博文 <style> *{ margin:0; padding:0; } div{ height:100px; width:100px; backgr ...
- js 淡入淡出的图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 图片轮播(淡入淡出)--JS原生和jQuery实现
图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...
- 针对淡入淡出的定时轮播效果js
如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...
- js淡入淡出
示例: js淡入淡出 原理:更改css不透明数值 知识点: css不透明 filter:alpha(opacity:30); opacity:0.3;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...
随机推荐
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- 字符编码：ASCII,Unicode,UTF-8
1.ASCII码美国制定的一套字符编码,对英语字符和二进制位之间的关系,做了统一规定.ASCII码一共规定了128个字符(包括32个不能打印出来的控制符号)的编码,占用一个字节,字节的最前面1位统一为 ...
- feignclient设置hystrix参数
序 feign默认集成了hystrix,那么问题来了,如何像hystrix command那样设置每个方法的hystrix属性呢. 实例 @FeignClient("product" ...
- PLSQL Developer新手使用教程（图文教程）
PLSQL Developer是Oracle数据库开发工具,很牛也很好用,PLSQL Developer功能很强大,可以做为集成调试器,有SQL窗口,命令窗口,对象浏览器和性能优化等功能,下面简单的介 ...
- RTX——第16章 消息邮箱
以下内容转载自安富莱电子: http://forum.armfly.com/forum.php 前面几个章节主要给大家讲解了任务间的同步和资源共享机制,本章节为大家讲解任务间的通信机制消息邮箱,RTX ...
- vs2010程序运行出错 link : fatal error lnk1123: 转换到 coff 期间失败: 文件无效或损坏
vs2010程序运行出错 link : fatal error lnk1123: 转换到 coff 期间失败: 文件无效或损坏 2014-03-27 11:34杜_柏 | 浏览 36144 次 请问这 ...
- 阿里云ECS，WampServer无法访问外网
情况: 使用阿里云ECS服务器.服务端打开WampServer后,在服务端能通过127.0.0.1和localhost访问到WampServer的首页. 阿里云已经给了外网IP,不需要路由器再做端口映 ...
- 【Unity】使用Git管理项目及其.gitignore写法
完整的进行Unity 3D源码用Git管理的流程: 1 新建文件夹(路径要求非空) 2 新建U3D项目 3 添加.gitignore文件 获取已有的U3D项目 修改Unity 3D编辑器: Enabl ...
- C语言 · 核桃的数量
历届试题 核桃的数量 时间限制:1.0s 内存限制:256.0MB 锦囊1 最小公倍数. 锦囊2 答案是a, b, c的最小公倍数. 问题描述 小张是软件项目经理,他带领3个 ...
- posix进程间通信
************************************************************************************************** p ...