（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;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...
随机推荐
- jmeter 发送http请求，并把获取到的请求的订单信息保存到文件中
有一个任务,需要频繁发送订单请求,并分析订单请求中有没有存在重复订单号,思路是用jmeter 发送http请求,使用正则表达式获取到订单号,并把订单号和线程号作为参数提供给java请求,在java请求 ...
- laravel 如何引入自己的函数或类库
例如在app下建一个Common文件夹 在Common下建一个function.php 放入公共函数 例如: function test(){ echo 'this is a test'; } 在项目 ...
- 如何进行SVN数据迁移并保存版本号数据
如何从一台服务器192.168.8.2迁移到另一台服务器192.168.8.30进行SVN数据迁移并保存版本号数据 工具/原料 SVN 方法/步骤 1 打开远程服务,连接192.168.8.2 ...
- 8个非常实用的PHP安全函数，你知道几个？
原文:Useful functions to provide secure PHP application 译文:实用的PHP安全函数 译者:dwqs 安全是编程很重要的一个方面.在不论什么一种编程语 ...
- android 开发 ------- 接口文档 规范
1 接口书写的格式: 1 用例图 2 流程图 3 详细的接口: 3.1请求的方式: 包含: server地址 le.gxjinan.com/open/user.php?ac=login ...
- posix多线程--条件变量
条件变量是用来通知共享数据状态信息的. 1.条件变量初始化两种方式:(1)静态初始化pthread_cond_t cond = PTHREAD_COND_INITIALIZER;代码示例如下: #in ...
- CPAN镜像使用帮助
https://lug.ustc.edu.cn/wiki/mirrors/help/cpan ************************************************** 使用 ...
- uC/OS-III 概要
本章主要对 uC/OS-III 实时操作系统做一些概要介绍,使读者对 uC/OS-III 有个整体的浅 认识,为后面的章节的详细讲解做一个铺垫. 下图是 uC/OS-III 系统从底层到上层的文件结构 ...
- 1326: The contest（并查集+分组背包）
http://acm.csu.edu.cn/OnlineJudge/problem.php?id=1326 殷犇有很多队员.他们都认为自己是最强的,于是,一场比赛开始了~ 于是安叔主办了一场比赛,比赛 ...
- Clipboard获取内容C#
一.获取文本 textBox1.Text = Clipboard.GetData("Text").ToString(); 二.获取图像 pictureBo ...