（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;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...
随机推荐
- Apache优化：修改最大并发连接数（转）
Apache是一个跨平台的web服务器,由于其简单高效.稳定安全的特性,被广泛应用于计算机技术的各个领域.现在,Apache凭借其庞大的用户数,已成为用户数排名第一的web服务器. 尽 管如此,在实际 ...
- [na]那些OVER的封装(pppoe/ppp/ipsec)
什么over什么,如pppoe, ppp的封装都在over对象之后,入下图: PPPOE Ipsec
- 服务器swap
交换区(swap)是存在于高速存储设 备上的一块区域,是虚拟内存系统重要的组成部分.通过交换区,我们不再局限于有限的物理内存空间,理论上可以无限地扩大虚拟内存系统,从而运行更多的程 序,进行更多的业务 ...
- zabbix监控某个普通端口
linux下端口和服务是对应的. 先创建一个模板:configureation-->templates然后点create templates按钮: 如果没有组可以新建个组:app 查看新建的te ...
- ny2 括号配对问题
括号配对问题 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 现在,有一行括号序列,请你检查这行括号是否配对. 输入 第一行输入一个数N(0<N<=1 ...
- iOS自定义组与组之间的距离以及视图
iOS自定义组与组之间的距离以及视图 //头视图高度 - (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(N ...
- dwz 取不到 form中的值
在使用dwz的时候,出现的一个问题, <li style=" width:160px;"> <label style=" width:60px;&quo ...
- 字符设备驱动笔记——poll机制分析（七）
poll机制分析 所有的系统调用,基于都可以在它的名字前加上“sys_”前缀,这就是它在内核中对应的函数.比如系统调用open.read.write.poll,与之对应的内核函数为:sys_open. ...
- ClouderaManager之CDH-LZO配置
CDH-LZO配置 下载和CDH版本对应的hadoop-lzo版本 如下: 下载地址:http://archive.cloudera.com/gplextras5/parcels/ 需要下载如下三个文 ...
- LeetCode: Intersection of Two Linked Lists 解题报告
Intersection of Two Linked Lists Write a program to find the node at which the intersection of two s ...