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

先创建一个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. Leetcode 219. 存在重复元素 II

    说明: 首先,这是一道Easy题,我天!但是题意理解还是很多坑~ 题目描述: 给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nums [j] ...

  2. Hbase（一）了解Hbase与Phoenix

    前言 HBase是一个分布式的.面向列的开源数据库,该技术来源于 Fay Chang 所撰写的Google论文“Bigtable:一个结构化数据的分布式存储系统”.就像Bigtable利用了Googl ...

  3. FROM_UNIXTIME（）时间戳转换函数

    前几天,工作用到了将时间戳转化成具体的时间(年月日 时:分:秒),出了一点问题,先看一下下面的sql语句: select *,FROM_UNIXTIME(created_at,'%Y-%m-%d %H ...

  4. [原创]K8Cscan4.0之Base64/HEX密码批量加密解密插件以及源码

    前言 今天抽空更新了Cscan,新增对C#编译的EXE动态调用,新增对PowerShell脚本动态调用(无论是否安装PowerShell) 增加一个字符串列表str.txt,用于存放任意字符串,比如帐 ...

  5. Linux shell脚本单例模式实现

    一.说明 关于单例模式,最开始的是一些小工具,运行起来后再点击运行时会提示已经运行了一个实例,觉得挺有意思但也没有很在意. 前段时间看了前领导的一段代码不太懂是做什么用的,同事查了下资料说是为了实现单 ...

  6. Elasticsearch常见用法-分布式集群

    集群内部工作方式 Elasticsearch用于构建高可用和可扩展的系统.扩展的方式可以是购买更好的服务器(纵向扩展(vertical scale or scaling up))或者购买更多的服务器( ...

  7. 总结：WPF中MultiBinding多值绑定的方法

    原文:总结:WPF中MultiBinding多值绑定的方法 一.Xaml中绑定代码: <TextBlock  Grid.Row="5" Grid.Column="3 ...

  8. XAML加载的四种方式

    XAML加载与编译可以分为四种: 仅使用代码进行WPF程序的生成 使用代码和未编译的标记 使用代码和编译过的BAML 1.只是用代码进行窗体的生成:优点是可以随意定制应用程序,缺点是没有可视化编辑窗口 ...

  9. 解决WPF下popup不随着window一起移动的问题

    /// <summary> /// Popup帮助类,解决Popup设置StayOpen="True"时,移动窗体或者改变窗体大小时,Popup不随窗体移动的问题 // ...

  10. Ubuntu 18.04 RTX2080(ti) + tensorflow-gpu + cuda9.0 + gcc5 兼容性问题解决

    0.下载display driver.cuda和cudnn RTX2080 Display Driver cuda cudnn 1. 禁止系统默认的显卡驱动 打开系统黑名单 sudo gedit /e ...