div逐步变化

￡神魔★判官ぃ 2022-08-06 04:21 162阅读 0赞

div的逐步变化，实际上就是同时改变高度,宽度,left,top,同时运用到缓动的算法，没什么好说的

<script> var isIE = (document.all) ? true : false; function $(Id)\{return document.getElementById(Id)\}; var CurrentStyle = function(element)\{return element.currentStyle || document.defaultView.getComputedStyle(element, null);\}; var extend = function() \{ var args = arguments; if(!args\[1\])args = \[this,args\[0\]\]; for(var property in args\[1\])args\[0\]\[property\] = args\[1\]\[property\]; return args\[0\]; \}; var Class = function(properties)\{ var \_class = function()\{return (arguments\[0\] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;\}; \_class.prototype = properties; return \_class; \}; var Tween = \{ Quintic:\{ easeOut: function(t,b,c,d)\{ return c\*((t=t/d-1)\*t\*t\*t\*t + 1) + b; \} \} \} var FadeStruct = function(options)\{ //this.run = false;//是否渐变 this.start = 0;//开始值 //this.end = 0;//结束值 this.target = 0;//当前值 extend(this, options || \{\}); \} var Fade = new Class(\{ options:\{ Opacity: \{\}, //透明渐变参数 Height : \{\}, //高度渐变参数 Width : \{\}, //宽度渐变参数 Top : \{\}, //Top渐变参数 Left : \{\}, //Left渐变参数 step : 80, //执行多少次到达目标位置 time : 2, //多少时间执行一次 num : 0, //记录执行了多少次了 show : true //图片一开始是展开的 \}, initialize:function(elm)\{ this.elm = elm; this.timer = null; this.finish = true; this.fun = function()\{\}; this.original = \[parseInt(CurrentStyle(this.elm).width),parseInt(CurrentStyle(this.elm).height),parseInt(CurrentStyle(this.elm).left),parseInt(CurrentStyle(this.elm).top)\]; // 记录刚开始时,elm的长 宽 left 和 top this.Height = new FadeStruct(); this.Width = new FadeStruct(); this.Top = new FadeStruct(); this.Left = new FadeStruct(); this.Alpha = new FadeStruct(); this.Opacity= new FadeStruct() /// extend(this.Height,this.options.Height); extend(this.Width,this.options.Width); extend(this.Left,this.options.Left); extend(this.Top,this.options.Top); extend(this.Opacity,this.options.Opacity); extend(this.Alpha,this.options.Alpha); this.step = this.options.step; this.time = this.options.time; this.num = this.options.num; this.show = this.options.show; /// this.fun = function()\{this.SetHeight();this.SetWidth();this.SetLeft();this.SetTop();this.SetBorder(),this.SetAlpha()\} \}, Start:function()\{ clearTimeout(this.timer); this.num =0 this.show = !this.show; this.Run(); \}, Run:function()\{ var self = this; this.num++; this.fun(); if(this.num>this.step) \{clearTimeout(this.timer);return;\} else \{ this.timer = setTimeout(function()\{self.Run()\},this.time)\} \}, SetHeight:function()\{ this.elm.style.height = this.MotoTo(this.num,this.Height.start,this.Height.target,this.step)+'px'; \}, SetWidth:function()\{ this.elm.style.width = this.MotoTo(this.num,this.Width.start,this.Width.target,this.step)+'px'; \}, SetLeft:function()\{ this.elm.style.left = this.MotoTo(this.num,this.Left.start,this.Left.target,this.step)+'px'; \}, SetTop:function()\{ this.elm.style.top = this.MotoTo(this.num,this.Top.start,this.Top.target,this.step)+'px'; \}, SetBorder:function()\{ this.elm.style.borderWidth = (!this.show)? parseInt(10\*(1-this.num/this.step)) + 'px':(this.num/this.step)\*10+'px'; \}, SetAlpha :function()\{ var img = this.elm.getElementsByTagName('img')\[0\]; if(isIE) \{img.style.filter = "alpha(opacity:" + this.MotoTo(this.num,this.Alpha.start,this.Alpha.target,this.step)+ ")"\} else \{img.style.opacity = parseInt(this.MotoTo(this.num,this.Alpha.start,this.Alpha.target,this.step))/100\} \}, MotoTo:function(t,b,c,d)\{ return Math.round(Tween.Quintic.easeOut(t,b,c,d)); \} \}) </script> <body style="margin:0px; padding:0px;"> <div id='ss' style="height:500px; width:333px; border:10px solid \#999999; position:absolute; left:50px; top:50px; overflow:hidden"> <img id='sss' src='http://img1.gtimg.com/ent/pics/19202/19202401.jpg' height="500" width="333px;" style="filter:alpha(opacity:100); opacity:1"> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> <div id='ssss'></div> <script> var ss =new Fade($('ss')) document.onmousedown =function(event)\{ var e = event || window.event; if(ss.show) \{ ss.Width.start = parseInt(CurrentStyle(ss.elm).width); ss.Width.target = -ss.Width.start; ss.Height.start = parseInt(CurrentStyle(ss.elm).height); ss.Height.target = -ss.Height.start; ss.Left.start = parseInt(CurrentStyle(ss.elm).left); ss.Left.target = e.clientX - ss.Left.start; ss.Top.start = parseInt(CurrentStyle(ss.elm).top); ss.Top.target = e.clientY - ss.Top.start; if(isIE) \{ ss.Alpha.start = ss.elm.getElementsByTagName('img')\[0\].filters.alpha.opacity; ss.Alpha.target = -ss.Alpha.start;\} else \{ ss.Alpha.start = parseInt(CurrentStyle(ss.elm.getElementsByTagName('img')\[0\]).opacity)\*100; ss.Alpha.target = (-ss.Alpha.start)\*100;\} \} else \{ ss.Width.start = parseInt(CurrentStyle(ss.elm).width); ss.Width.target = ss.original\[0\] - ss.Width.start; ss.Height.start = parseInt(CurrentStyle(ss.elm).height); ss.Height.target = ss.original\[1\] - ss.Height.start; ss.Left.start = parseInt(CurrentStyle(ss.elm).left); ss.Left.target = ss.original\[2\] - ss.Left.start; ss.Top.start = parseInt(CurrentStyle(ss.elm).top); ss.Top.target = ss.original\[3\] - ss.Top.start; if(isIE) \{ ss.Alpha.start = ss.elm.getElementsByTagName('img')\[0\].filters.alpha.opacity; ss.Alpha.target = 100-ss.Alpha.start;\} else \{ ss.Alpha.start = parseInt(CurrentStyle(ss.elm.getElementsByTagName('img')\[0\]).opacity)\*100; ss.Alpha.target = 100-ss.Alpha.start;\} \} ss.Start(); \} </script> </body>

<script type="text/javascript"> </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，162人围观）

还没有评论，来说两句吧...

相关阅读

相关 js监听div元素的宽高变化

[js监听div元素的宽高变化][js_div] [javascript][] 发布于 2019-06-27 ![4b9cb6f12946ae5fdc7efddb5c

待我称王封你为后i/ 2023年10月11日 15:14/ 0 赞/ 70 阅读

相关监测div大小变化_JavaScript监听一个DOM元素大小变化

1.需求场景开发过程中经常遇到的一个问题就是如何监听一个 div 的size变化。比如我用canvas绘制了一个chart，当canvas的size发生变化的时候，需要

谁借莪１个温暖的怀抱￠/ 2023年01月01日 06:52/ 0 赞/ 733 阅读

相关 div实现拖拽效果，宽度发生变化

最近项目中，需要写个能够拖拽的div，从网上找了相关的代码，为了方便以后使用，记下。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML

比眉伴天荒/ 2022年08月20日 09:27/ 0 赞/ 229 阅读

相关 div逐步变化

div的逐步变化，实际上就是同时改变高度,宽度,left,top,同时运用到缓动的算法，没什么好说的 <script> var isIE = (docume

￡神魔★判官ぃ/ 2022年08月06日 04:21/ 0 赞/ 163 阅读

相关 COM逐步教程

来源： [http://www.fx114.net/qa-152-147110.aspx][http_www.fx114.net_qa-152-147110.asp

雨点打透心脏的1/2处/ 2022年06月14日 04:58/ 0 赞/ 125 阅读

相关用浮动代替定位解决动态变化的div内容，一个div浮在两个div上面

先看效果图：内容少的时候： ![Center][] 内容多的时候： ![Center 1][] 这是设计稿上的需求，有三个div，本来我用的是

﹏ヽ暗。殇╰゛Y/ 2022年06月10日 03:52/ 0 赞/ 205 阅读

相关 jquery 监听div大小变化函数|div resize事件

[http://www.itshij.com/divresize][http_www.itshij.com_divresize] 今天，小编给大家整理的是监听div大小

谁借莪１个温暖的怀抱￠/ 2022年06月07日 05:36/ 0 赞/ 1033 阅读

相关 div背景的图片不能跟随大小变化的问题

div背景的图片不能跟随大小变化的问题记录下自己在工作中遇到的问题：背景：要在项目首页的中加入一个背景图片，然后这次用的是DIV，在DIV中加入背景图片，然后在bo

今天药忘吃喽~/ 2022年01月23日 10:15/ 0 赞/ 279 阅读

相关 div宽度随屏幕大小变化

　　题目：　　一个页面上两个div左右铺满整个浏览器，　　要保证左边的div一直为100px，右边的div跟随浏览器大小变化，　　比如浏览器为500，右边div为4

矫情吗；*/ 2022年01月07日 11:49/ 0 赞/ 644 阅读

相关 css div的宽度随内部元素的宽度的变化而变化

div是块级元素,如果不设置他的明确的宽度,那他就等于父元素的宽度,如果要让其它随着子元素的变化而变化,需要改变他的属性,给他加上这个css属性即可display:inline

桃扇骨/ 2021年09月25日 16:58/ 0 赞/ 584 阅读