首页
微信
安卓
接口
移动
前端
专题
文档库
工具
网址
§
ITPOW
>>
文档
>>
JavaScript
>>
控件
ITPOW控件-Animation
作者:vkvi 来源:ITPOW
(原创)
日期:2008-5-18
ITPOW控件-进度条高级应用(1)
ITPOW控件-进度条高级应用(2)
ITPOW控件-进度条高级应用(3)
ITPOW控件-标签控件
ITPOW控件-零选列表框
ITPOW控件-树形菜单
ITPOW控件-级联菜单
ITPOW控件-布告菜单
ITPOW控件-布告菜单 应用技巧
ITPOW控件-列表框
ITPOW控件-页面菜单指示器
ITPOW控件-页面菜单指示器 v2.0
ITPOW控件-页面内容查找
ITPOW控件-DatePicker v1.2
ITPOW控件-图片预览器
ITPOW控件-TypeExhibition v2.0
ITPOW控件-LinkList v1.0 alpha
ITPOW控件-LinkLoader v1.0
ITPOW控件-下拉列表框
ITPOW控件-Animation
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Animation</title> <style type="text/css"> body{background-color:blue;} </style> </head> <body> <div id="msg" style="position:absolute;width:300px;height:200px;background-color:#CCCCCC;">中华人民共和国</div> <script type="text/javascript" language="javascript"> //当前对象的名称,字符串类型。 //要使用该效果的 HTML 标签 id 字符串。 function CAnimation(objStr, targetStr) { this.objStr = objStr; this.target = document.getElementById(targetStr); this.target.style.position = "absolute"; //使用 clip 必须是 absolute this.coordinateX = 0; this.coordinateY = 0; this.minClipTop = 0; //显示区域最小时上方的数值,>= maxClipTop this.minClipRight = 0; //显示区域最小时右方的数值 this.minClipBottom = 0; //显示区域最小时下方的数值 this.minClipLeft = 0; //显示区域最小时左方的数值,>= maxClipLeft this.maxClipTop = 0; //显示区域最大时上方的数值,<= minClipTop this.maxClipRight = 0; //显示区域最大时右方的数值 this.maxClipBottom = 0; //显示区域最大时下方的数值 this.maxClipLeft = 0; //显示区域最大时左方的数值,<= minClipLeft this.curClipTop = 0; //当前显示区域上方的数值 this.curClipRight = 0; //当前显示区域右方的数值 this.curClipBottom = 0; //当前显示区域下方的数值 this.curClipLeft = 0; //当前显示区域左方的数值 this.direction = "toMax"; //扩大或缩小,可选值有:toMax、toMin,分别代表扩大和缩小,默认是toMax,大小写有别 this.times = 100; //经过多少次变换,完成扩大或缩小,值越大,表现越细腻,但为了避免每次 this.delay = 1; //每次变换的延时,单位毫秒,值越小,表现越细腻 this.SetPos = CAnimation_SetPos; this.SetMinClipValue = CAnimation_SetMinClipValue; this.SetMaxClipValue = CAnimation_SetMaxClipValue; this.SetDirection = CAnimation_SetDirection; this.SetSpeed = CAnimation_SetSpeed; this.Ini = CAnimation_Ini; this.Animation = CAnimation_Animation; } //设置 animation 左上角的位置 function CAnimation_SetPos(x, y) { this.coordinateX = x; this.coordinateY = y; this.target.style.left = x + "px"; this.target.style.top = y + "px"; } //设置最小显示区域,以 animation 左上角为基点 function CAnimation_SetMinClipValue(top, right, bottom, left) { this.minClipTop = top; this.minClipRight = right; this.minClipBottom = bottom; this.minClipLeft = left; } //设置最大显示区域,以 animation 左上角为基点 function CAnimation_SetMaxClipValue(top, right, bottom, left) { this.maxClipTop = top; this.maxClipRight = right; this.maxClipBottom = bottom; this.maxClipLeft = left; } //设置方向,表示扩大还是缩小,可选值有:toMax、toMin,分别代表扩大和缩小,默认是toMax,大小写有别 function CAnimation_SetDirection(direction) { this.direction = direction; } //设置速度 function CAnimation_SetSpeed(times, delay) { this.times = times; this.delay = delay; } //初始化,用户不需要调用,由于程序自动调用 function CAnimation_Ini() { if (this.direction != "toMin") { //放大 this.curClipTop = this.minClipTop; this.curClipRight = this.minClipRight; this.curClipBottom = this.minClipBottom; this.curClipLeft = this.minClipLeft; } else { //缩小 this.curClipTop = this.maxClipTop; this.curClipRight = this.maxClipRight; this.curClipBottom = this.maxClipBottom; this.curClipLeft = this.maxClipLeft; } this.target.style.clip = "rect(" + this.curClipTop + "px " + this.curClipRight + "px " + this.curClipBottom + "px " + this.curClipLeft + "px)"; //为了兼容 IE7,不能用逗号分隔 rect 的参数 } //效果开始入口函数 //一个隐含参数,表示已经进行的步进次数,默认是0,如果 <=0,则表示第一次进行步进,会自动调用 Ini() 函数。 function CAnimation_Animation() { var stepIndex = (arguments.length > 0) ? arguments[0] : 0; if (stepIndex <= 0) { //初始化 this.Ini(); } var topOK = false; var rightOK = false; var bottomOK = false; var leftOK = false; //minClipTop >= maxClipTop //minClipLeft >= maxClipLeft if (this.direction != "toMin") { //放大 this.curClipTop = this.minClipTop + Math.round((stepIndex+1) * (this.maxClipTop - this.minClipTop) / this.times); if (this.curClipTop <= this.maxClipTop) { this.curClipTop = this.maxClipTop; topOK = true; } this.curClipRight = this.minClipRight + Math.round((stepIndex+1) * (this.maxClipRight - this.minClipRight) / this.times); if (this.curClipRight >= this.maxClipRight) { this.curClipRight = this.maxClipRight; rightOK = true; } this.curClipBottom = this.minClipBottom + Math.round((stepIndex+1) * (this.maxClipBottom - this.minClipBottom) / this.times); if (this.curClipBottom >= this.maxClipBottom) { this.curClipBottom = this.maxClipBottom; bottomOK = true; } this.curClipLeft = this.minClipLeft + Math.round((stepIndex+1) * (this.maxClipLeft - this.minClipLeft) / this.times); if (this.curClipLeft <= this.maxClipLeft) { this.curClipLeft = this.maxClipLeft; leftOK = true; } } else { //缩小 this.curClipTop = this.maxClipTop - Math.round((stepIndex+1) * (this.maxClipTop - this.minClipTop) / this.times); if (this.curClipTop >= this.minClipTop) { this.curClipTop = this.minClipTop; topOK = true; } this.curClipRight = this.maxClipRight - Math.round((stepIndex+1) * (this.maxClipRight - this.minClipRight) / this.times); if (this.curClipRight <= this.minClipRight) { this.curClipRight = this.minClipRight; rightOK = true; } this.curClipBottom = this.maxClipBottom - Math.round((stepIndex+1) * (this.maxClipBottom - this.minClipBottom) / this.times); if (this.curClipBottom <= this.minClipBottom) { this.curClipBottom = this.minClipBottom; bottomOK = true; } this.curClipLeft = this.maxClipLeft - Math.round((stepIndex+1) * (this.maxClipLeft - this.minClipLeft) / this.times); if (this.curClipLeft >= this.minClipLeft) { this.curClipLeft = this.minClipLeft; leftOK = true; } } this.target.style.clip = "rect(" + this.curClipTop + "px " + this.curClipRight + "px " + this.curClipBottom + "px " + this.curClipLeft + "px)"; //为了兼容 IE7,不能用逗号分隔 rect 的参数 if (topOK && rightOK && bottomOK && leftOK) { //显示完毕,退出 return; } setTimeout(this.objStr + ".Animation(" + (++stepIndex) + ")", this.delay); } var a = new CAnimation("a", "msg"); a.SetPos(0, 50); a.SetMinClipValue(100, 150, 100, 150); a.SetMaxClipValue(0, 300, 200, 0); a.SetDirection("toMin"); a.SetSpeed(50, 5); a.Animation(); </script> <input type="button" value="缩小" onclick="javascript:a.SetDirection('toMin');a.Animation();" /> <input type="button" value="放大" onclick="javascript:a.SetDirection('toMax');a.Animation();" /> </body> </html>
[Ctrl+A 全部选择 提示:您可先修改部分代码,再按运行]
这是一个很有用的控件,把它应用在自定义的弹出对话框、提示框中,有特殊的效果。
ITPOW控件-进度条高级应用(1)
ITPOW控件-进度条高级应用(2)
ITPOW控件-进度条高级应用(3)
ITPOW控件-标签控件
ITPOW控件-零选列表框
ITPOW控件-树形菜单
ITPOW控件-级联菜单
ITPOW控件-布告菜单
ITPOW控件-布告菜单 应用技巧
ITPOW控件-列表框
ITPOW控件-页面菜单指示器
ITPOW控件-页面菜单指示器 v2.0
ITPOW控件-页面内容查找
ITPOW控件-DatePicker v1.2
ITPOW控件-图片预览器
ITPOW控件-TypeExhibition v2.0
ITPOW控件-LinkList v1.0 alpha
ITPOW控件-LinkLoader v1.0
ITPOW控件-下拉列表框
ITPOW控件-Animation
相关文章
创建于2005年
渝ICP备05010272号-1
电邮:
cftea@126.com
即将跳转...