基本思路：使用样式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运动之淡入淡出的更多相关文章

  1. js原生实现淡入淡出

         转自http://kb.cnblogs.com/page/90854/ 参数说明: fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, ...

  2. js多物体运动之淡入淡出效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  3. js笔记----（运动）淡入淡出

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)

    淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...

  5. js实现多个图片淡入淡出，框架

    单个淡入淡出已经写过,可以看看上几遍的博文 <style> *{ margin:0; padding:0; } div{ height:100px; width:100px; backgr ...

  6. js 淡入淡出的图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  8. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  9. js淡入淡出

    示例: js淡入淡出 原理:更改css不透明数值 知识点: css不透明 filter:alpha(opacity:30); opacity:0.3;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...

随机推荐

  1. .NET设计模式（4）：建造者模式（Builder Pattern）（转载）

    概述 在 软件系统中,有时候面临着“一个复杂对象”的创建工作,其通常由各个部分的子对象用一定的算法构成:由于需求的变化,这个复杂对象的各个部分经常面临着剧 烈的变化,但是将它们组合在一起的算法确相对稳 ...

  2. 如何用 LaTeX 撰写博士学位论文?

    如何用 LaTeX 撰写博士学位论文? 序 一直觉得有必要写这样一篇文章,因为学位论文从格式上说更像一本书,与文章 的排版不同,不仅多出目录等文章没有的部分,而且一般要设置页眉页脚方便阅 读查找.学校 ...

  3. DOA——MUSIC算法

    一.均匀圆阵(UCA, Uniform Circular Array)的MUSIC算法 假设一个半径为R的M元均匀圆阵的所有阵元均位于坐标系X-Y平面内,第k-1个阵元坐标为,第i个窄带信号波长为,来 ...

  4. unity Transform.TransformPoint

    正如unity api文档所说: Transforms position from local space to world space. 即Transform.TransformPoint是将局部坐 ...

  5. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  6. 完美解决 IOS系统safari5.0 浏览器页面布局iframe滚动栏失效问题

    在iframe外层包一层div,加入例如以下样式: style="-webkit-overflow-scrolling:touch;overflow:auto;" 代码例如以下: ...

  7. 【Linux】 无密码SCP在Crontab中失效的解决办法

    一.缘由: 之前由于服务器只能密钥登陆,并限制root账户登陆,故用SSH打通了所有服务器,实现了公钥转发scp免输密码等,极大方便了服务器的管理. 最近有个需求,是做数据的异地备份.最简单的用scp ...

  8. Installation error: INSTALL_FAILED_INSUFFICIENT_STORAGE 解决方法

    最近在做真机测试的时候,经常出现Installation error: INSTAL L_FAILED_INSUFFICIENT_STORAGE这个问题,导致apk没法安装到是手机上,在eclipse ...

  9. ny16 矩形嵌套

    矩形嵌套 时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 有n个矩形,每个矩形可以用a,b来描述,表示长和宽.矩形X(a,b)可以嵌套在矩形Y(c,d)中当且仅当a< ...

  10. solr进阶九：solr对数字和单个字符的搜索

    solr中配有分词器,但分词器里面有大写转换为小写的过滤器时,数字就会被过滤.比如123中国ABC.123就会被过滤掉了,所以才查1|12|123都会失败. <Solr 数字字符不能搜索的一个问 ...