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

先创建一个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 就该这么学 CH05 用户的身份和文件权限

    1 用户权限与能力 超级用户root拥有最高的系统所有权,能够管理系统的各项功能,如添加.删除用户:启动或关闭服务进程:开启或禁用硬件设备等. 用户身份分类: 系统管理员root :UID = 0; ...

  2. js文件获取自身的URL路径

    我们做框架开发的时候,经常需要js文件获取的到自身的路径,在网上查了些资料,总结 了两种方式 浏览器支持docment.currentScript.src 直接用这个获取,不用支持的情况 try{ n ...

  3. linux - 用户配置文件

    用户配文件: 1用户信息文件 /etc/passwd   2 影子文件 /etc/shadow  3  组信息文件 /etc/group 4 组密码文件 /etc/gshadow 1 用户信息文件 / ...

  4. MySQL“慢SQL”定位

    MySQL"慢SQL"定位 数据库调优我个人觉得必须要明白两件事 1.定位问题(你得知道问题出在哪里,要不然从哪里调优呢) 2.解决问题(这个没有基本的方法来处理,因为不同的问题处 ...

  5. 如何在ASP.NET Core Web API中使用Mini Profiler

    原文如何在ASP.NET Core Web API中使用Mini Profiler 由Anuraj发表于2019年11月25日星期一阅读时间:1分钟 ASPNETCoreMiniProfiler 这篇 ...

  6. laravel hash密码生成和密码验证

    在laravel中 登录表单中的密码是用hash来生成的. 在生成密码需要用到 laravel框架中的方法(都是laravel封装好了的) bcrypt($password)方法,直接将获取到的pas ...

  7. [Codeforces] Alex and a Rhombus

    A. Alex and a Rhombus time limit per test 1 second memory limit per test 256 megabytes input standar ...

  8. C#读写设置修改调整UVC摄像头画面-倾斜

    有时,我们需要在C#代码中对摄像头的倾斜进行读和写,并立即生效.如何实现呢? 建立基于SharpCamera的项目 首先,请根据之前的一篇博文 点击这里 中的说明,建立基于SharpCamera的摄像 ...

  9. win10企业版|激|活|码

    使用下面的激活码升级成企业版 NPPR9-FWDCX-D2C8J-H872K-2YT43 激活后,如果右下角出现未激活的白色字体用cmd命令,管理员窗口运行下面的命令 win10企业版用户请依次输入: ...

  10. HDOJ 6664 Andy and Maze

    HDOJ题目页面传送门 给定一个无向带权图\(G=(V,E),|V|=n,|E|=m\),求边权之和最大的有\(s\)个节点的链的边权之和,即求\(\max\limits_{\forall i\in[ ...