JS编写透明度渐变、位置移动等多个函数

发布时间：2018-08-23 12:21:10 所属栏目：运营来源：站长网

导读：JS封装一个透明度渐变、尺寸变化、位置移动函数这三个函数适用于以下情况： 1、在做前端页面时，只需要简单的动画效果，不想引入整个动画类，使用本函数。 2、在写js类时，需要用到简单的动画，为了降低藕合性，使用本函数。查看演示： !DOCTYPE HTML PU

JS封装一个透明度渐变、尺寸变化、位置移动函数

这三个函数适用于以下情况：

1、在做前端页面时，只需要简单的动画效果，不想引入整个动画类，使用本函数。

2、在写js类时，需要用到简单的动画，为了降低藕合性，使用本函数。

查看演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>透明度渐变、位置移动函数 - Liehuo.net</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script> function rand(min,max){ return Math.round(min+(Math.random()*(max-min))); }; var fade = function(element, transparency, speed, callback){//透明度渐变：transparency:透明度 0(全透)-100(不透)；speed:速度1-100，默认为1 if(typeof(element)=='string')element=document.getElementById(element); if(!element.effect){ element.effect = {}; element.effect.fade=0; } clearInterval(element.effect.fade); var speed=speed||1; var start=(function(elem){ var alpha; if(navigator.userAgent.toLowerCase().indexOf('msie') != -1){ alpha=elem.currentStyle.filter.indexOf("opacity=") >= 0?(parseFloat( elem.currentStyle.filter.match(/opacity=([^)]*)/)[1] )) + '': '100'; }else{ alpha=100*elem.ownerDocument.defaultView.getComputedStyle(elem,null)['opacity']; } return alpha; })(element); if(window.console&&window.console.log)console.log('start: '+start+" end: "+transparency); element.effect.fade = setInterval(function(){ start = start < transparency ? Math.min(start + speed, transparency) : Math.max(start - speed, transparency); element.style.opacity = start / 100; element.style.filter = 'alpha(opacity=' + start + ')'; if(Math.round(start) == transparency){ element.style.opacity = transparency / 100; element.style.filter = 'alpha(opacity=' + transparency + ')'; clearInterval(element.effect.fade); if(callback)callback.call(element); }//烈-火-网页特效 www。liehuo。net }, 20); }; var move = function(element, position, speed, callback){//移动到指定位置，position:移动到指定left及top 格式{left:120, top:340}或{left:120}或{top:340}；speed:速度 1-100，默认为10 if(typeof(element)=='string')element=document.getElementById(element); if(!element.effect){ element.effect = {}; element.effect.move=0; } clearInterval(element.effect.move); var speed=speed||10; var start=(function(elem){ var posi = {left:elem.offsetLeft, top:elem.offsetTop}; while(elem = elem.offsetParent){ posi.left += elem.offsetLeft; posi.top += elem.offsetTop; }; return posi; })(element); element.style.position = 'absolute'; var style = element.style; var styleArr=[]; if(typeof(position.left)=='number')styleArr.push('left'); if(typeof(position.top)=='number')styleArr.push('top'); element.effect.move = setInterval(function(){ for(var i=0;i<styleArr.length;i++){ start[styleArr[i]] += (position[styleArr[i]] - start[styleArr[i]]) * speed/100; style[styleArr[i]] = start[styleArr[i]] + 'px'; } for(var i=0;i<styleArr.length;i++){ if(Math.round(start[styleArr[i]]) == position[styleArr[i]]){ if(i!=styleArr.length-1)continue; }else{ break; } for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = position[styleArr[i]] + 'px'; clearInterval(element.effect.move); if(callback)callback.call(element); } }, 20); }; var resize = function(element, size, speed, callback){//长宽渐变：size:要改变到的尺寸格式 {width:400, height:250}或{width:400}或{height:250}；speed:速度 1-100，默认为10 if(typeof(element)=='string')element=document.getElementById(element); if(!element.effect){ element.effect = {}; element.effect.resize=0; } clearInterval(element.effect.resize); var speed=speed||10; var start = {width:element.offsetWidth, height:element.offsetHeight}; var styleArr=[]; if(!(navigator.userAgent.toLowerCase().indexOf('msie') != -1&&document.compatMode == 'BackCompat')){ //除了ie下border-content式盒模型情况外，需要对size加以修正 var CStyle=document.defaultView?document.defaultView.getComputedStyle(element,null):element.currentStyle; if(typeof(size.width)=='number'){ styleArr.push('width'); size.width=size.width-CStyle.paddingLeft.replace(/D/g,'')-CStyle.paddingRight.replace(/D/g,''); } if(typeof(size.height)=='number'){ styleArr.push('height'); size.height=size.height-CStyle.paddingTop.replace(/D/g,'')-CStyle.paddingBottom.replace(/D/g,''); } } element.style.overflow = 'hidden'; var style = element.style; element.effect.resize = setInterval(function(){ for(var i=0;i<styleArr.length;i++){ start[styleArr[i]] += (size[styleArr[i]] - start[styleArr[i]]) * speed/100; style[styleArr[i]] = start[styleArr[i]] + 'px'; } for(var i=0;i<styleArr.length;i++){ if(Math.round(start[styleArr[i]]) == size[styleArr[i]]){ if(i!=styleArr.length-1)continue; }else{ break; } for(var i=0;i<styleArr.length;i++)style[styleArr[i]] = size[styleArr[i]] + 'px'; clearInterval(element.effect.resize); if(callback)callback.call(element); } }, 20); }; </script></head> <body> <div id="testDiv" style="position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;" onclick="alert(this.style.filter)"><div style="background-color:#369; height:100%;"></div></div> <br/> 烈火网页特效：动画测试 <input type="button" value="改变大小" onClick="resize('testDiv', {width:rand(60,600),height:rand(30,300)})" /> <input type="button" value="改变宽度" onClick="resize('testDiv', {width:rand(60,600)})" /> <input type="button" value="改变高度" onClick="resize('testDiv', {height:rand(30,300)})" /> <input type="button" value="移动位置" onClick="move('testDiv', {left:rand(40,600),top:rand(40,400)})" /> <input type="button" value="水平移动" onClick="move('testDiv', {left:rand(40,600)})" /> <input type="button" value="垂直移动" onClick="move('testDiv', {top:rand(40,400)})" /> <input type="button" value="透明度变化" onClick="fade('testDiv', rand(5,100))" /> <input type="button" value="还原" onClick="var ele=document.getElementById('testDiv');clearInterval(ele.effect.move);clearInterval(ele.effect.fade);clearInterval(ele.effect.resize);ele.style.cssText='position:absolute; right:100px; top:50px; background-color:#abc; width:100px; height:50px;padding:10px;'" /> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

三星联合开发，真全面	realme Book增强版配置
小米12系列在西欧上线	iPhone 14 Pro前瞻工