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

先创建一个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. websocket通信1009错误，

    问题说明: springboot继承 WebSocketConfigurer实现websocket通信服务,服务器端报错,"The decoded text message was too ...

  2. linux的arp表满导致同网段无法ping通

    由于历史原因,有一个网段子网设置非常大10.0.0.0/21,8个C地址段为一个子网. linux内核默认arp表大小为1024,导致一台监控机器arp表溢出,同时导致日志输出速率超出限制,无法输出日 ...

  3. Python 的文件保存路径

    1.保存在当前代码同级的目录下: 2.保存在代码文件夹外面一层的新文件夹(data文件夹与代码文件夹同级)里: 3.保存在下一级的子文件夹里

  4. nginx mysqlnd驱动引擎提升mysql性能

    nginx mysqlnd驱动引擎提升mysql性能 前期要安装 mysql mysqli pdo_mysql libiconv 1 先去PHP官网下个 php-5.6.29.tar.gz wget ...

  5. thinkPHP5如何使用rabbitmq

    thinkPHP5如何使用rabbitmq? 安装好 tp5 的 rabbitmq 扩展后,在项目根目录文件添加文件 rabbitmq.php 引导启动 rabbitmq. <?php defi ...

  6. 使用ADB安装apk安装包

    1.手机通过USB线连接到电脑,并打开开发者选项和USB调试,允许本机进行调试. 2.打开cmd命令行输入:adb devices 查看当前连接的设备列表. 3.安装apk包命令: adb -s [d ...

  7. 解决www.coursera.org可以登录但无法播放视频

  8. 命令(Command)模式

    命令模式又称为行动(Action)模式或者交易(Transaction)模式. 命令模式把一个请求或者操作封装到一个对象中.命令模式允许系统使用不同的请求把客户端参数化,对请求排队或者记录请求日志,可 ...

  9. 【华为云实战开发】10.经典的C++项目怎么在云端开发？【华为云技术分享】

    1 概述 1.1 文章目的 本文主要想为研发C++项目的企业或个人提供上云指导,通过本文中的示例项目 “音频解析器”,为开发者提供包括项目管理,代码托管,代码检查,编译构建,测试管理的操作指导,覆盖软 ...

  10. golang ---Learn Concurrency

    https://github.com/golang/go/wiki/LearnConcurrency 实例1: package main import ( "fmt" " ...