网站地图
首页
php教程
asp.net教程
手机开发
css教程
网页制作
办公数码
jsp教程
asp教程
ps教程
当前位置:
编程学习网
>>
网页制作
>
js教程
> >
【json】js 缓冲效果代码
【json】js 缓冲效果代码
发布时间:2018-03-28
【www.gdgbn.com--js教程】
提示:您可以先修改部分代码再运行
<script type="text/javascript"> var getCoords = function(el){ var box = el.getBoundingClientRect(), doc = el.ownerDocument, body = doc.body, html = doc.documentElement, clientTop = html.clientTop || body.clientTop || 0, clientLeft = html.clientLeft || body.clientLeft || 0, top = box.top + (self.pageYOffset || html.scrollTop || body.scrollTop ) - clientTop, left = box.left + (self.pageXOffset || html.scrollLeft || body.scrollLeft) - clientLeft return { "top": top, "left": left }; }; var getStyle = function(el, style){ if(!+"v1"){ style = style.replace(/-(w)/g, function(all, letter){ return letter.toUpperCase(); }); var value = el.currentStyle[style]; (value == "auto")&&(value = "0px" ); return value; }else{ return document.defaultView.getComputedStyle(el, null).getPropertyValue(style) } } var tween = { easeInQuad: function(pos){ return Math.pow(pos, 2); }, easeOutQuad: function(pos){ return -(Math.pow((pos-1), 2) -1); }, easeInOutQuad: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,2); return -0.5 * ((pos-=2)*pos - 2); }, easeInCubic: function(pos){ return Math.pow(pos, 3); }, easeOutCubic: function(pos){ return (Math.pow((pos-1), 3) +1); }, easeInOutCubic: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3); return 0.5 * (Math.pow((pos-2),3) + 2); }, easeInQuart: function(pos){ return Math.pow(pos, 4); }, easeOutQuart: function(pos){ return -(Math.pow((pos-1), 4) -1) }, easeInOutQuart: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4); return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); }, easeInQuint: function(pos){ return Math.pow(pos, 5); }, easeOutQuint: function(pos){ return (Math.pow((pos-1), 5) +1); }, easeInOutQuint: function(pos){ if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,5); return 0.5 * (Math.pow((pos-2),5) + 2); }, easeInSine: function(pos){ return -Math.cos(pos * (Math.PI/2)) + 1; }, easeOutSine: function(pos){ return Math.sin(pos * (Math.PI/2)); }, easeInOutSine: function(pos){ return (-.5 * (Math.cos(Math.PI*pos) -1)); }, easeInExpo: function(pos){ return (pos==0) ? 0 : Math.pow(2, 10 * (pos - 1)); }, easeOutExpo: function(pos){ return (pos==1) ? 1 : -Math.pow(2, -10 * pos) + 1; }, easeInOutExpo: function(pos){ if(pos==0) return 0; if(pos==1) return 1; if((pos/=0.5) < 1) return 0.5 * Math.pow(2,10 * (pos-1)); return 0.5 * (-Math.pow(2, -10 * --pos) + 2); }, easeInCirc: function(pos){ return -(Math.sqrt(1 - (pos*pos)) - 1); }, easeOutCirc: function(pos){ return Math.sqrt(1 - Math.pow((pos-1), 2)) }, easeInOutCirc: function(pos){ if((pos/=0.5) < 1) return -0.5 * (Math.sqrt(1 - pos*pos) - 1); return 0.5 * (Math.sqrt(1 - (pos-=2)*pos) + 1); }, easeOutBounce: function(pos){ if ((pos) < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return (7.5625*(pos-=(1.5/2.75))*pos + .75); } else if (pos < (2.5/2.75)) { return (7.5625*(pos-=(2.25/2.75))*pos + .9375); } else { return (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }, easeInBack: function(pos){ var s = 1.70158; return (pos)*pos*((s+1)*pos - s); }, easeOutBack: function(pos){ var s = 1.70158; return (pos=pos-1)*pos*((s+1)*pos + s) + 1; }, easeInOutBack: function(pos){ var s = 1.70158; if((pos/=0.5) < 1) return 0.5*(pos*pos*(((s*=(1.525))+1)*pos -s)); return 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos +s) +2); }, elastic: function(pos) { return -1 * Math.pow(4,-8*pos) * Math.sin((pos*6-1)*(2*Math.PI)/2) + 1; }, swingFromTo: function(pos) { var s = 1.70158; return ((pos/=0.5) < 1) ? 0.5*(pos*pos*(((s*=(1.525))+1)*pos - s)) : 0.5*((pos-=2)*pos*(((s*=(1.525))+1)*pos + s) + 2); }, swingFrom: function(pos) { var s = 1.70158; return pos*pos*((s+1)*pos - s); }, swingTo: function(pos) { var s = 1.70158; return (pos-=1)*pos*((s+1)*pos + s) + 1; }, bounce: function(pos) { if (pos < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return (7.5625*(pos-=(1.5/2.75))*pos + .75); } else if (pos < (2.5/2.75)) { return (7.5625*(pos-=(2.25/2.75))*pos + .9375); } else { return (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }, bouncePast: function(pos) { if (pos < (1/2.75)) { return (7.5625*pos*pos); } else if (pos < (2/2.75)) { return 2 - (7.5625*(pos-=(1.5/2.75))*pos + .75); } else if (pos < (2.5/2.75)) { return 2 - (7.5625*(pos-=(2.25/2.75))*pos + .9375); } else { return 2 - (7.5625*(pos-=(2.625/2.75))*pos + .984375); } }, easeFromTo: function(pos) { if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4); return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2); }, easeFrom: function(pos) { return Math.pow(pos,4); }, easeTo: function(pos) { return Math.pow(pos,0.25); }, linear: function(pos) { return pos }, sinusoidal: function(pos) { return (-Math.cos(pos*Math.PI)/2) + 0.5; }, reverse: function(pos) { return 1 - pos; }, mirror: function(pos, transition) { transition = transition || tween.sinusoidal; if(pos<0.5) return transition(pos*2); else return transition(1-(pos-0.5)*2); }, flicker: function(pos) { var pos = pos + (Math.random()-0.5)/5; return tween.sinusoidal(pos < 0 ? 0 : pos > 1 ? 1 : pos); }, wobble: function(pos) { return (-Math.cos(pos*Math.PI*(9*pos))/2) + 0.5; }, pulse: function(pos, pulses) { return (-Math.cos((pos*((pulses||5)-.5)*2)*Math.PI)/2) + .5; }, blink: function(pos, blinks) { return Math.round(pos*(blinks||5)) % 2; }, spring: function(pos) { return 1 - (Math.cos(pos * 4.5 * Math.PI) * Math.exp(-pos * 6)); }, none: function(pos){ return 0 }, full: function(pos){ return 1 } } var _ = function(id){ return document.getElementById(id); } var transition = function(el){ el.style.position = "absolute"; var options = arguments[1] || {}, begin = options.begin,//开始位置 change = options.change,//变化量 duration = options.duration || 500,//缓动效果持续时间 field = options.field,//必须指定,基本上对top,left,width,height这个属性进行设置 ftp = options.ftp || 50, onEnd = options.onEnd || function(){}, ease = options.ease,//要使用的缓动公式 end = begin + change,//结束位置 startTime = new Date().getTime();//开始执行的时间 (function(){ setTimeout(function(){ var newTime = new Date().getTime(),//当前帧开始的时间 timestamp = newTime - startTime,//逝去时间 delta = ease(timestamp / duration); el.style[field] = Math.ceil(begin + delta * change) + "px" if(duration <= timestamp){ el.style[field] = end + "px"; onEnd(); }else{ setTimeout(arguments.callee,1000/ftp); } },1000/ftp) })() } if (typeof Array.prototype["max"] == "undefined") { Array.prototype.map = function(fn, thisObj) { var scope = thisObj || window; var a = []; for ( var i=0, j=this.length; i < j; ++i ) { a.push(fn.call(scope, this[i], i, this)); } return a; }; Array.prototype.max = function(){ return Math.max.apply({},this) } Array.prototype.min = function(){ return Math.min.apply({},this) } } var range = function(start,end){ var _range = [] for(var i = start,l=end-start;i
ling); } </script>
缓动BY司徒正美
请点击下表的格子
提示:您可以先修改部分代码再运行
本文来源:
http://www.gdgbn.com/wangyezhizuo/22257/
上一篇:
json_js 倒计时变速加数效果代码
下一篇:
[json]js mouseover和mouseout实例
相关推荐
鼠标图片大全_图片特效-鼠标滑过图片放大效果
phpstudy|php cookie setcookie使用实例
mysql下载_mysql 海量数据库的查询优化及分页算法方案
【php数组操作符】php数组操作实例教程
【javascript学习指南】javascript 漂亮实用的万年历代码
location.reload()|location.reload 与 location.replace 区别
mysql入门教程|mysql入门教程-MYSQL语句
json_js 倒计时变速加数效果代码
phpstudy_php 目录递归函数-列出所文件与目录
[php定时任务]php定时自动生成html静态页面
网友关注
[导航菜单横向左右滑动]导航菜单-左则多层树形下拉菜单
怎么让google收录网站|怎么让google收录你的新站
css滑动门代码|CSS滑动门技术教程
[select 默认选中]select multi 选择框操作类
[带关闭按钮js弹出对话框]带关闭按钮js弹出层代码
ie6下png图片透明解决方法_ie6下png图片透明解决方案
新网站如何做好推广_新网站如何优化
免费1g100m|免费1g/100g/php/cgi/mysql/ftp/domain学习空间
【单选框和复选框的区别】点击单选框切换效果
【php删除数组指定元素】php删除数组重复值代码
热门标签
json格式化
json在线格式化
js格式化
js刷新当前页面
jsp
js保留两位小数
最新js教程
js教程
js遍历对象_js中查找对象代码
js教程
javascript学习指南_java 自动装箱拆箱实现方法
js教程
eclipse连接mysql数据库_java连接db2数据代码
js教程
flash player|flash js Fusioncharts 参数详解与参考
js教程
json_js ajax XMLHttpRequest与jq $.ajax
js教程
【js利用cookie】js利用cookies与正则设置字体高亮显示
js教程
asp.net core_asp.net DataGridTree 下拉树 实现方法
js教程
[jsp注册页面代码]JSP页面编码问题分析
js教程
[hibernate和mybatis的区别]Hibernate 中get()和load()与Hibernate简介
js教程
判断textarea中是否有回车符|判断textarea中是否有回车符方法
js教程热门文章
js教程
[json]js mouseover和mouseout实例
js教程
[json]js div图片不撑开div
js教程
【json】js getElementById 实例教程
js教程
phpstudy|php session页面间传递变量的问题
js教程
json_js 设置文章字体大小代码
js教程
json_js 鼠标划过变化背景色代码
js教程
【json】js 同时提交数据给二个页面
js教程
js只能输入数字_js限制只能输入ip文本框代码
js教程
json_js 控制表格隔行换色代码
js教程
json_js 轻松实现图片的阴影效果
声明:本网站尊重并保护知识产权,根据《信息网络传播权保护条例》,如果我们转载的作品侵犯了您的权利,请在一个月内通知我们,我们会及时删除。
Copyright©2006-2019 编程学习网 www.gdgbn.com 版权所有