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

先创建一个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. 【操作系统之六】Linux常用命令之less

    一.概念less 工具也是对文件或其它输出进行分页显示的工具,是linux正统查看文件内容的工具,功能极其强大.less 的用法比起 more .tail更加的有弹性.在 more 的时候,我们并没有 ...

  2. 内网服务器离线编译安装mysql5.7并调优

    目录 内网服务器离线编译安装mysql5.7并调优 前言 关于MySQL 一.MySQL安装篇 部署环境 前期准备工具 挂载系统ISO镜像,配置yum源 二.MySQL调优篇 1.对MySQL进行安全 ...

  3. SQLServer ---------- 安装SQLserver数据库

    1.安装SQLserver 数据2008 的地址 https://jingyan.baidu.com/article/948f592434b407d80ef5f97d.html?qq-pf-to=pc ...

  4. [转帖]聊聊Web App、Hybrid App与Native App的设计差异

    聊聊Web App.Hybrid App与Native App的设计差异 https://www.cnblogs.com/zhuiluoyu/p/6056672.html 编者按:这3类主流应用你都了 ...

  5. iphone如何安装mitmproxy的pem文件（当iphone无法使用邮箱时）

    背景描述: 我要安装mitmproxy描述文件 mitmproxy-ca-cert.pem , 说是用iphone自带的邮箱接收然后安装即可,但悲剧的邮箱坏了[提示:无法连接服务器],查了不少方法都无 ...

  6. JDK9对集合添加的优化

    JDK9对集合添加的优化 JDK9的新特性: list接口,Set接口,Map接口:里边增加了一个静态的方法of,可以给集合一次性添加多个元素 static <E> List<E&g ...

  7. Java Objective-C AOP

    Java Use an AOP library or byte-code engineering (BCEL, cglib, asm, etc) to create a sub-class on th ...

  8. Spring AOP动态代理实现，解决Spring Boot中无法正常启用JDK动态代理的问题

    Spring AOP底层的动态代理实现有两种方式:一种是JDK动态代理,另一种是CGLib动态代理. JDK动态代理 JDK 1.3版本以后提供了动态代理,允许开发者在运行期创建接口的代理实例,而且只 ...

  9. Windows 查看端口占用进程并关闭

    当我们在运行一些软件需要特定软件(如tomcat)时,有可能会碰上端口被占用的情况,这时候我们可能就需要更改端口或把占用端口的进程结束掉,因为更换端口可能会导致当前环境产生一些的问题或是需要重新配置其 ...

  10. C# yield checked,unchecked lock语句（C#学习笔记04）

    特殊语句 yield语句 yield用于终止迭代 只能使用在返回类型必须为 IEnumerable.IEnumerable<T>.IEnumerator 或 IEnumerator< ...