这一章我将讲述一些如何将透明度的变化也封装到调用函数中，对于前面几节课的介绍，已经将基本的属性封装到函数中了，宽，长等属性。关于透明度的变化还是有一点区别的，这一章我将封装透明度

先创建一个div

<!DOCTYPE html>

<html>

<head>

<title>js动画事件</title>

<link href="move.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="move.js"></script>

</head>

<body>

<div id="div1">

</div>

</body>

</html>

给这个div设置一些属性值(注意奥，这里面的透明度的设置)

#div1{

    width:200px;

    height:200px;

    background-color:red;

    opacity:0.3;//火狐浏览器支持的透明度的设置

    filter:alpha(opacity:30);//IE浏览器支持的方式

}

实现透明度的封装

var timer;

window.onload=function(){

	var div=document.getElementById("div1");

	div.onmouseover=function(){

		startMove(this,"opacity",100);

	}

	div.onmouseout=function(){

		startMove(this,"opacity",30);

	}

}

function startMove(obj,attr,target){

	clearInterval(timer);

	timer=setInterval(function(){

		var icur;

		if(attr=="opacity"){

		 icur=Math.round(parseFloat(getStyle(obj,attr))*100);//关键一步在这里，我们设置透明度属性时，getStyle获得的是0~1之间的数，所以要parseFloat一下，然后在乘以100转化到0~100之间，最后要四舍五入一下。

		}else{

			icur=parseInt(getStyle(obj,attr))

		}

		var speed=(target-icur)/8;

		 speed=speed>0? Math.ceil(speed):Math.floor(speed);

		if(icur==target){

			clearInterval(timer);

		}else{

			if(attr="opacity"){

				obj.style.opacity=(icur+speed)/100;

				obj.style.filter="alpha(opacity"+(icur+speed)+")";//还有这里，对于透明度来说，后面是没有"px"的，所以要判断一下。

			}

				obj.style[attr]=parseInt(getStyle(obj,attr))+speed+"px";

		}

	},50)

}

 function getStyle(obj,attr){

	 if(obj.currentStyle){

		 return obj.currentStyle[attr];

	 }else if(getComputedStyle){

		 return getComputedStyle(obj,false)[attr];

	 }

 }

　　

js动画--封装透明度的更多相关文章

  1. js动画实现透明度动画

    在本次实例中,由于一般主流的浏览器对于透明度opacity最大值为1,但是在IE6最大值是100,此次例子是按主流浏览器的透明度来算的,所以定义的是小数,也可以定义为整数为单位,在运算的时候遇到主流的 ...

  2. 第一百四十二节，JavaScript，封装库--运动动画和透明度动画

    JavaScript,封装库--运动动画和透明度动画 /** yi_dong_tou_ming()方法,说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x ...

  3. js动画--透明度变化

    对于设置元素的透明度的变化.主要思想也是通过一个定时器来控制的. 此外对于透明度有一点要说明一下,就是在IE中我们在css中设置透明度的方式filter:alpha(opacity:value)其中v ...

  4. 使用jquery封装的动画脚本（无动画、css3动画、js动画）

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

  5. 显示层封装及实现与优化（无动画+css3动画+js动画）

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画

    主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...

  7. 原生js动画效果（源码解析）

    在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...

  8. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  9. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

随机推荐

  1. c# 自定义按钮，渐变颜色（含中心向四周渐变，单方向渐变）

    废话不多言,直接代码: public class RoundButton : Button { bool clickBool = false; //1.设置圆形 //2.设置渐变色 //3.设置too ...

  2. jenkins更新为国内源

    系统管理->插件管理->高级->升级站点->URL https://jenkins-zh.gitee.io/update-center-mirror/tsinghua/upda ...

  3. 监听浏览器tab选项卡选中事件，点击浏览器tab标签页回调事件，浏览器tab切换监听事件

    js事件注册代码: <script> document.addEventListener('visibilitychange',function(){ //浏览器tab切换监听事件 if( ...

  4. c++篇 vc++2010设置和c#一样的代码段,vs2010 两下tab设置

    设置vs2010 tab敲两下出 for 片段,因为vs2010的代码片段是在番茄助手里设置的...代码片段管理器中不能设置c++ 所以我只能安装一个番茄助手了... 然后就是修改番茄助手内的[提示] ...

  5. Jumpserver 5.2版本安装与部署

    组件说明 Jumpserver 为管理后台, 管理员可以通过 Web 页面进行资产管理.用户管理.资产授权等操作, 用户可以通过 Web 页面进行资产登录, 文件管理等操作 koko 为 SSH Se ...

  6. html5滚动页面简单写法

    html5滚动页面简单写法纵向滚动比较简单 直接在外面加个高度 然后overflow-y: auto; 横向比较复杂了外面写两层 最外面一层写个宽度 overflow-x: auto;第二层 写wid ...

  7. Elasticsearch 7.1.1 安装 pinyin 分词器插件

    1.安装maven 安装插件前,需要用 maven 进行编译生成插件包,第一步先安装 maven yum install -y maven mvn -version Apache Maven (Red ...

  8. AKKA事件机制

    AKKA Event Bus 事件机制就用于当前运行环境,与集群环境不同,详细见AKKA 集群中的发布与订阅Distributed Publish Subscribe in Cluster 简单实现示 ...

  9. Java 8 ArrayList 详解

    GitHub Page: http://blog.cloudli.top/posts/Java-ArrayList/ ArrayList 继承于 AbstractList ,实现了 List.Rand ...

  10. 转载 VUE+WebPack环境搭建 https://segmentfault.com/a/1190000010960666

    一.vue有两种使用方式: 1.下载vue.js <script src="vue.js"></script> 2.使用npm npm install vu ...