基于原生javascript的淡入淡出函数封装(兼容IE)
2019独角兽企业重金招聘Python工程师标准>>>
在开发的过程中,我们要做淡入淡出效果的话,我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用,而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。
构建框架,基本没难度。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>透明度函数的封装</title><style type="text/css">#box{width: 200px;height: 200px;background: red;margin: 50px auto;opacity: .3;filter: alpha(opacity:30);}</style></head><body><div id="box"></div><script src="toumingdu.js" type="text/javascript" charset="utf-8"></script></body>
</html>
编写javascript部分,主要难点是changeOpacity()函数。
window.onload = function (){var box = document.getElementById('box');box.onmouseover = function (){changeOpacity(this,100);}box.onmouseout = function (){changeOpacity(this,30);}
}
/*** * @param {Object} box 要变化透明度的元素* @param {Object} target 透明度的目标值(100为最高)*/
function changeOpacity(box,target){var opa;var speed;if(box.currentStyle){//判断浏览器类型,此类型为IE浏览器,即使IE不支持opacity属性,但是仍然可以获取值opa = box.currentStyle['opacity']*100;}else{//其他浏览器opa = getComputedStyle(box,false)['opacity']*100;}//透明度每次变化的值(步长),根据目标值和当前值的差来决定步长的正负target-opa>=0?speed=1:speed=-1;clearInterval(box.timer);box.timer = setInterval(function (){//目标值和当前值差值的绝对值大于等于步长的绝对值,设置透明度为当前值加步长if(Math.abs(target-opa)>=Math.abs(speed)){box.style.opacity=(opa+speed)/100;box.style.filter='alpha(opacity:'+(opa+speed)+')';}//目标值和当前值差值的绝对值小于步长的绝对值,剩余的距离一步到位,//设置透明度直接为目标值,同时清除定时器else{box.style.opacity=target/100;box.style.filter='alpha(opacity:'+target+')';clearInterval(box.timer);}//直接对透明度参数进行加步长的运算,避免每次都要获取当前透明度opa=opa+speed;},30);
}
这个透明度函数的原理在大体上是跟运动函数相同的。总结为三步:
1、获取当前值,根据目标值和当前值确定步长;
2、变化的过程,每次变化一个值(渐变动画和透明度其步长为不同的值,而匀速动画和透明度步长为定值);
3、判断是否达到目标值,达到则清除定时器,结束。
所以如果原理弄不清楚可以看一下另一篇文章javascript匀速动画和缓冲动画。
而在理解原理的情况下最大的难点应该是当前透明度的获取了(赋值比较简单)。获取透明度的值我们要考虑两种情况:
1、IE,虽然在在IE下不支持opacity属性,但是我们是可以通过box.currentStyle['opacity']获取到它的值的,同时我们在写入的时候也会将给opacity的值写入css中,尽管IE不会因为opacity值的改变而变化透明度。
2、其他浏览器,其他浏览器是支持opacity属性,所以我们操作相对简单了许多,写入和读取都针对opacity即可。
接下来细讲在IE浏览器中的操作:
首先我们的css文件中有两个属性值在我们的操作中是有用的 opacity: .3; filter: alpha(opacity:30); 显然我们很难获取filter属性中的opacity值(我不会!),但是如果我们使用currentStyle来获取opacity是比较简单的。所以我进行了测试发现,尽管IE不支持这个属性,但是这个属性值的读取和写入时完全没问题的,所以,问题就迎刃而解了!我们通过opacity可以读取当前透明度,然后通过filter改变透明度,同时,我们改变opacity的值(不仅是为了兼容其他浏览器,同时我们写入以后IE浏览器中在下次移入的时候还可以获取当前的透明度,否则的话获取的是初始的opacity值)。那么下面不就和动画那个问题一样了?
转载于:https://my.oschina.net/u/2966158/blog/760540
基于原生javascript的淡入淡出函数封装(兼容IE)相关推荐
- 用原生JavaScript实现淡入淡出轮播图
html代码 <div id="banner"><ul><li><img src="images/1.jpg"> ...
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- 基于原生JavaScript实现的消消乐小游戏
前言 一直对小游戏挺感兴趣的,也尝试着做过一些小游戏,实现游戏是一个不错的提高代码基础水平的方式,因此这次挑战了一个较为困难的小游戏:消消乐. 如果仅仅是从消除方面来制作一个静态的消消乐(只有消除和补 ...
- 基于原生JavaScript的经典坦克大战游戏开发设计
主要含有以下功能: 1.玩家采用等级机制,共5级: 2.补充装备有子弹.金星.炸弹.导弹.手枪.战舰,分值各不相同: 3.打掉障碍可加分: 4.用鼠标控制子弹射击,左键为单发射击.右键为双发射击,屏蔽 ...
- 基于原生javascript的ajax实现
function getXMLHttpRequest(){ if(window.ActiveXObject){//用户是ie浏览器 http_request=new ActiveXObject ...
- 基于原生Javascript的Carousel设计及实现
概要 本文主要介绍一个无缝轮播图的基本设计原理和实现方式,该轮播图不依赖任何第三方插件或组件库,可以在常用的Chrome或Edge浏览器上正常运行. 基本功能 基本功能目标包括: 轮播图可以自动播放 ...
- 原生javascript图片惰性延迟加载插件lazyload–兼容PC端手机端
为什么需要页面图片惰性延迟加载? 当页面内图片达到一定的数量,页面的加载速度就越来越差. 我们并不需要把所有图片一次性加载完,而且,用户也不会一次性把所有图片看完. 所以,我们需要做的就是按需加载,只 ...
- 100个常用的原生JavaScript函数
1.原生JavaScript实现字符串长度截取 复制代码代码如下: function cutstr(str, len) { var temp; var icount = 0; ...
- [译] 原生 JavaScript 值得学习吗?答案是肯定的
原文地址:Is Vanilla JavaScript worth learning? Absolutely. 原文作者:David Kopal 译文出自:掘金翻译计划 本文永久链接:github.co ...
- mysql插入ㄖ_原生JavaScript代码100个实例
1.原生JavaScript实现字符串长度截取 function cutstr(str, len) { var temp; var icount = 0; var patrn = /[^\x00-\x ...
最新文章
- Stuart Russell:有益AI三原则,需满足人类偏好
- log4j.xml如何配置
- Linux Kernel TCP/IP Stack — L3 Layer — 路由器子系统
- 详解DPoS共识算法
- Mac本如何运营php框架,1、Mac系统下搭建thinkPHP框架环境
- php实现数字滚动效果,vue如何实现数字滚动增加效果?代码示例
- JAVA中运用数组的四种排序方法
- PE 文件格式 详解 一
- new函数的底层实现
- [悟] 因上努力,果上随缘(转)
- c语言非素数因子,C语言作业:判断一个数是不是素数,如果不是,输出它的素数因子。...
- python os模块安装方法_Python模块——os模块详解
- 学习哪一款EDA软件画PCB电路板比较好?AD、PADS与Allegro的比较
- 如何辨别苹果20W PD快充充电头真伪
- Docker硬盘空间使用分析与清理
- 初学计算机网络(三):使用Cisco Packet Tracer仿真
- 2020年区块链行业十大趋势
- pandas 插入空列_Pandas在DF创建期间添加额外的空列(Pandas add additional empty columns during DF creation)...
- 用计算机怎么打出X,电脑键盘x号怎么打出来
- Microsoft Dynamics 365 (on-premises) Update 2.12