基本思路：使用样式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. win10环境配置react

    1 react 需要nodejs所以需要安装nodejs环境,到nodejs官网下载 现在默认会安装nodejs 和 npm包 和 配置环境 2 检查是否安装成功,在命令行中输入 显示成功则正确 3 ...

  2. Linux下安装配置Redis

    一 下载并安装 (1)下载: [root@localhost src]# wget http://download.redis.io/releases/redis-3.2.5.tar.gz (2)安装 ...

  3. rsync + inotify-tools实现文件的实时同步

    文章摘自:http://lxw66.blog.51cto.com/5547576/1331048 rsync 帮助文档:http://man.linuxde.net/rsync 最近有个想法就是部署一 ...

  4. Solr4：查询参数fq的用法（对结果进行过滤；两组关键词组合查询）

    Solr查询参数文档可以参考: http://wiki.apache.org/solr/CommonQueryParameters#head-6522ef80f22d0e50d2f12ec487758 ...

  5. &lt;二&gt;读&lt;&lt;大话设计模式&gt;&gt;之策略模式

    又和大家见面了.可以坚持写出第二篇文章真不错,好好加油. <<大话设计模式>>解说策略模式是以商场收银软件程序开头的,那么问题来了.哪家商场收银软件强,开玩笑了. 读过上篇文章 ...

  6. 【Android】12.1 Intent基本概念

    分类:C#.Android.VS2015: 创建日期:2016-02-23 一.简介 Intent:意图,含义就是你想利用它调用哪个组件实现相关的功能,比如调用相机组件实现拍照.调用Contact组件 ...

  7. PHP5.5四种序列化性能对照

    json_encode,serialize,igbinary,msgpack四种序列化方式,在之前已经有过相关的測试,PHP5.5这方面的測试临时没有,这次測试基于PHP5.5,而且測试用例,http ...

  8. Hibernate中HQLwhere用法和单独取出几列数据的读取方法

    String hql = "select thedate,thehour,node,query_num from Cdns cdns where thehour = " +&quo ...

  9. java多线程13 ： 死锁

    前言 死锁单独写一篇文章是因为这是一个很严重的.必须要引起重视的问题.这不是夸大死锁的风险,尽管锁被持有的时间通常很短,但是作为商业产品的应用程序每天可能要执行数十亿次获取锁->释放锁的操作,只 ...

  10. 被linux线程基础折磨的点滴——还是没得到完美的答案，但至少得到了所需

    #include<sys/types.h> #include<unistd.h> #include<stdio.h> #include<stdlib.h> ...