（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;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...
随机推荐
- 使用 docker 搭建 openvpn，创建、删除用户证书
我自己的配置,服务器:ubuntu16.04 + docker 17.12.0-ce:客户端:win10 + openvpn2.4.5 1 在dockerhub上搜索 openvpn,我是用的是 进去 ...
- js检查页面上有无重复id的代码分享
用js代码检查一个页面上是否用重复的id. 方法一: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ...
- Animator根运动清除刚体速率问题测试
在根运动打开时,施加AddForce,速率在后面几帧被清0了: 没有打开根运动AddForce的情况: unity论坛看了下,似乎有人遇到这个问题,而且无解.只能受力状态下关闭根运动 Q:Im wor ...
- [svc]kill pkill killall管理进程
进程讲解 操作配置 http://www.centoscn.com/CentOS/help/2013/0809/1218.html 终止一个进程或终止一个正在运行的程序,一般是通过 kill .kil ...
- 每日英语：Robots To Revolutionize China
A new worker's revolution is rising in China and it doesn't involve humans. With soaring wages and a ...
- vim 学习日志（6）：分屏 sp，vsp,分屏移动
Vim的分屏功能 本篇文章主要教你如何使用 Vim 分屏功能. 分屏启动Vim 使用大写的O参数来垂直分屏. vim -On file1 file2 ... 使用小写的o参数来水平分屏. vim -o ...
- Django实现任意文件上传（最简单的方法）
利用Django实现文件上传并且保存到指定路径下,其实并不困难,完全不需要用到django的forms,也不需要django的models,就可以实现,下面开始实现. 第一步:在模板文件中,创建一个f ...
- vue2.0的ajax
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- python操作excel之 模块 xlrd
xlrd是专门用来在python中读取微软execel的模块,可以自己直接下载安装,也可以通过包管理器安装. 官方资料: 下载地址:http://pypi.python.org/pypi/xlrd 官 ...
- ios NSString format 保留小数点 float double
self.orderCost.text = [NSStringstringWithFormat:@"%.1f元",self.order.cost.floatValue]; %.1f ...