基本思路：使用样式filter。可是要区分IE浏览器和chrom、firefox的不同，详细也是用定时器来实现。

  1. <!DOCTYPE HTML>
  2. <!--
  3.  
  4. -->
  5. <html>
  6. <head>
  7. <meta charset="utf-8">
  8. <title></title>
  9. <style>
  10. #div1{
  11. 	width:200px;
  12. 	height:200px;
  13. 	background:red;
  14. 	filter:alpha(opacity:30);opacity:0.3;
  15. }
  16.  
  17. </style>
  18.  
  19. <script>
  20. window.onload=function ()
  21. {
  22. 	var oDiv=document.getElementById('div1');
  23. 	oDiv.onmouseover=function ()
  24. 	{
  25. 		startMove(100);
  26. 	};
  27. 	oDiv.onmouseout=function ()
  28. 	{
  29. 		startMove(30);
  30. 	};
  31.  
  32. };
  33. var alpha=30;//透明度变量，由于样式那里初始是30
  34. var timer=null;
  35. function startMove(iTarget){
  36. 	var oDiv=document.getElementById('div1');	
  37.  
  38. 	clearInterval(timer);
  39. 	timer=setInterval(function (){
  40.  
  41. 	var speed=0;
  42. 	if(alpha<iTarget)
  43. 	{
  44. 		speed=1;
  45. 	}
  46. 	else{
  47. 		speed=-1;
  48. 	}
  49. 	if(alpha==iTarget)
  50. 	{
  51. 		clearInterval(timer);
  52. 	}
  53. 	else
  54. 	{
  55. 		alpha+=speed;
  56. 		oDiv.style.filter='alpha(opacity:'+alpha+')';//IE的透明度
  57. 		oDiv.style.opacity=alpha/100;//谷歌、火狐浏览器。满的值是1，不是100。因此除以100
  58. 	}
  59.  
  60. 	},30)
  61.  
  62. }
  63. </script>
  64. </head>
  65. <body>
  66.  
  67.    <div id="div1"></div>
  68.  
  69. </body>
  70. </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. Mysql 操作命令 详解

    目的:1. 掌握mysql的安装,建库.建表.表的三种基本操作.查询.多表查询.数据库的备份与恢复2. MYSQL 服务器的简单维护3. mysql+apache+php的环境搭建 一.如何安装mys ...

  2. GIS（一）——在js版搜索地图上加入Marker标记

    因为我们做的是有关于旅游方面的项目,所以涉及到了地图功能.我接到的当中一个任务就是,在地图上显示指定的几个景点,并在地图上加上标记. 我们项目用的是搜狗地图.使用的是js版本号.大家有兴趣的话,能够參 ...

  3. 基于jQuery+ashx+.net实现三级栏目联动操作

    父级ID可以为空以两个编号为一级 可以添加到第四级 table 字段有ID. name .parentNode. childNode等基本属性  selecet  parentNode  ,len(c ...

  4. ny10 skilng

    skiing 时间限制:3000 ms  |  内存限制:65535 KB 难度:5 描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当你滑 ...

  5. Build IKAnalyzer With Solr 5.1.0

    中文分詞裡IKAnalyzer和結巴是大家比較常用的分詞器, 不過IKAnalyzer已經很久沒有更新了, IKAnalyzer中文分词器V2012使用手册也跟IK Analyer 2012-FF H ...

  6. static使用实例

    public class LocationActivity extends Activity { //一个Activity传值到service public static String workid ...

  7. TOMCA源码分析——处理请求分析（上）

    在<TOMCAT源码分析——请求原理分析(上)>一文中已经介绍了关于Tomcat7.0处理请求前作的初始化和准备工作,请读者在阅读本文前确保掌握<TOMCAT源码分析——请求原理分析 ...

  8. 接收与发送邮件(XE10.2+WIN764)

    千万不要用QQ邮箱测试,我试了半天,没整明白. 一.设置信息 POP3接收邮件POP3服务器:exchange.grandsoft.com.cn端口:110账号:zhujq-a@glodon.com密 ...

  9. java web 应用中包，接口的设计

    采用标准的架构:描述从低层到高层首先是系统分析,找出你需要什么功能,然后按照下面的步骤执行: 数据库层:数据库层就是SQL语句.数据库.表.视图.触发器等等的创建和管理.这一层和JAVA无关,但是却是 ...

  10. protobuf--数据序列化及反序列化

    ProtoBuf是一种灵活高效的独立于语言平台的结构化数据表示方法,可用于表示通信协议和数据存储等各方面,与XML相比,ProtoBuF更小更快更简单.你可以用定义自己ProtoBuf的数据结构,用P ...