域名注册
|
虚拟主机
|
数据库
|
设为主页
|
加入收藏
|
天诚搜索
|
RSS
网站套餐
Package
基础特惠型网站
企业标准型网站
企业大户型网站
商务政务型网站
功能单项报价表
最新推荐
Recommended
4年网络创业经历
Dreamweaver表格经验谈
61.183.41.123数据重新上传通…
局域网arp病毒
用途相似的标签
CSS网页标准制作关于网页表单…
中国互联网13年大事记
ECSHOP 显示指定分类下的文章…
您现在的位置:
天诚世纪
>>
技术中心
>>
网页特效
>>
图形特效
>> 正文
可以控制旋转的图像
作者:
天诚世纪
更新时间:2009-7-22 20:07:41
来源:
天诚世纪
以下是HTML网页特效代码,点击运行按钮可查看效果:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效|tc-21.com|---可以控制旋转的图像</title> </head> <body> <script type="text/javascript"> function Path() { this.concat = int_concat; this.add = int_add; this.rotate = int_rot; function int_concat(p) { return new PathList(new Array(this, p)); } function int_add(p) { return new PathAdd(this, p); } function int_rot(xc,yc,v) { return new RotatePath(this, xc, yc, v); } } // The following object is used for the concat function PathList(inPathList) { // All path objects must have these 5 methods this.x = 0; // Retrieves the current x value this.y = 0; this.step = int_step; // Move to next step this.reset = int_reset; // Resets the current position // The rest may vary from different path objects this.pathList = inPathList; this.currentPath = 0; function int_step() { if (this.currentPath >= this.pathList.length) return false; if (this.pathList[this.currentPath].step()) { this.x = this.pathList[this.currentPath].x; this.y = this.pathList[this.currentPath].y; } else { this.currentPath++; if (this.currentPath >= this.pathList.length) return false; this.x = this.pathList[this.currentPath].x; this.y = this.pathList[this.currentPath].y; } return true; } function int_reset() { this.currentPath = 0; for (var i=0; i<this.pathList.length; i++) this.pathList[i].reset(); this.x = this.pathList[this.currentPath].x; this.y = this.pathList[this.currentPath].y; } } // The following object is used for adding two paths function PathAdd(p1,p2) { // All path objects must have these 5 methods this.x = 0; // Retrieves the current x value this.y = 0; this.step = int_step; // Move to next step this.reset = int_reset; // Resets the current position // The rest may vary from different path objects this._p1 = p1; this._p2 = p2; function int_step() { var c1 = this._p1.step(); var c2 = this._p2.step(); this.x = this._p1.x + this._p2.x; this.y = this._p1.y + this._p2.y; return (c1 || c2); } function int_reset() { this._p1.reset(); this._p2.reset(); this.x = this._p1.x + this._p2.x; this.y = this._p1.y + this._p1.y; } } function RotatePath(p,xc,yc,v) { this.x = 0; // Retrieves the current x value this.y = 0; this.step = int_step; // Move to next step this.reset = int_reset; // Resets the current position // The rest may vary from different path objects this._p = p; this._xc = xc; this._yc = yc; this._v = v; function int_step() { var c = this._p.step(); var pol = toPol(this._p.x - this._xc, this._p.y - this._yc); var rec = toRec(pol.r, pol.v + toRad(this._v)); this.x = rec.x + this._xc; this.y = rec.y + this._yc; return c; } function int_reset() { this._p.reset(); var pol = toPol(this._p.x - this._xc, this._p.y - this._yc); var rec = toRec(pol.r, pol.v + toRad(this._v)); this.x = rec.x - this._xc; this.y = rec.y - this._yc; } function toPol(x,y) { var o = new Object(); o.r = Math.sqrt(x*x + y*y); if (x == 0) o.v = Math.PI / 2; else o.v = Math.atan(y/x); if (x < 0) o.v = o.v + Math.PI; return o; } function toRec(r,v) { var o = new Object(); o.x = r * Math.cos(v); o.y = r * Math.sin(v); return o; } function toRad(deg) { return deg*Math.PI/180; } } PathAdd.prototype = new Path; PathList.prototype = new Path; RotatePath.prototype = new Path; </script> <script type="text/javascript"> function CirclePath(x, y, _xr, _yr, fromV, toV, n) { // All path objects must have these 5 methods this.x = 0; // Retrieves the current x value this.y = 0; this.step = int_step; // Move to next step this.reset = int_reset; // The rest may vary from different path objects this.steps = n; // NN work around. NN can't handle local variables!!! this.stepsLeft = n; this.xp = x; this.yp = y; this.v = -toRad(fromV); this.startV = this.v; this.endV = -toRad(toV); this.xr = _xr; this.yr = _yr; this.x = getX(this.xp,this.xr,this.v); this.y = getY(this.yp,this.yr,this.v); function toRad(deg) { return deg*Math.PI/180; } function getX(xp, xr, v) { // alert("xp: " + xp + "\nxr: " + xr + "\nv: " + v); return xp + xr*Math.cos(v); } function getY(yp, yr, v) { return yp + yr*Math.sin(v); } // Initate steps if (this.steps > 0) this.deltaV = (this.endV - this.startV)/n; // work around netscape bug. Netscape couldn't handle this else { // as a local variable this.deltaV = 0; this.x = getX(this.xp,this.xr,this.endV); this.y = getY(this.yp,this.yr,this.endV); } function int_step() { if (this.stepsLeft > 0) { this.v += this.deltaV; this.x = getX(this.xp,this.xr,this.v); this.y = getY(this.yp,this.yr,this.v); this.stepsLeft--; return true; } return false; } function int_reset() { if (this.steps < 1) { this.x = getX(this.xp,this.xr,this.endV); this.y = getY(this.yp,this.yr,this.endV); } else { this.v = this.startV; this.x = getX(this.xp,this.xr,this.v); this.y = getY(this.yp,this.yr,this.v); this.stepsLeft = this.steps; } } } CirclePath.prototype = new Path; </script> <script type="text/javascript"> function StraightPath(fromX, fromY, toX, toY, n) { // All path objects must have these 5 methods this.x = fromX; // Retrieves the current x value this.y = fromY; this.step = int_step; // Move to next step // Returns true if the step was succesfull // Returns false when the path has been done this.reset = int_reset; // The rest may vary from different path objects this.startX = fromX; this.startY = fromY; this.endX = toX; this.endY = toY; // Initiate steps this.steps = n; this.totalSteps = n; if (this.totalSteps < 1) { // No Amimation! this.x = this.endX; this.y = this.endY; this.deltaX = 0; // NN work around this.deltaY = 0; } else { this.deltaX = (this.endX - this.startX) / this.totalSteps; this.deltaY = (this.endY - this.startY) / this.totalSteps; } function int_step() { if (this.steps >= 0) { this.steps--; this.x += this.deltaX; this.y += this.deltaY; } return (this.steps >= 0 ); } function int_reset() { if (this.totalSteps < 1) { this.steps = 0; this.x = this.endX; this.y = this.endY; } else { this.steps = this.totalSteps; this.x = this.startX; this.y = this.startY; } } } StraightPath.prototype = new Path; </script> <script type="text/javascript"> var animIndex = 0; var animArray = new Array(); function Animator(id, p, period) { this.play = int_play; this.pause = int_pause; this.stop = int_stop; this.onanimationdone; this.elstyle = null; this.path = p; this.msec = period; this.id = id; this.index = animIndex; animArray[this.index] = this; this.thisString = "animArray[" + this.index + "]"; animIndex++; function int_play() { if (this.elstyle == null) { // this.elstyle = (document.all != null) ? document.all[this.id].style : document.layers[this.id]; if (document.all) // IE4 this.elstyle = document.all[this.id].style; else if (document.getElementById) // NGLayout this.elstyle = document.getElementById(this.id).style; else if (document.layers) // nn4.x this.elstyle = document.layers[this.id] else return; } if (this.path.step()) { this.elstyle.left = this.path.x; this.elstyle.top = this.path.y; animArray[this.index].timer = setTimeout(this.thisString + ".play()", this.msec); } else if (this.onanimationdone != null) { if (typeof(this.onanimationdone) == "string") eval(this.onanimationdone); else if (typeof(this.onanimationdone) == "function") this.onanimationdone(); } } function int_pause() { clearTimeout(animArray[this.index].timer); } function int_stop() { clearTimeout(animArray[this.index].timer); this.path.reset(); } } </script> <INPUT onclick=a.play() type=button value=开始> <INPUT onclick=a.pause() type=button value=暂停> <INPUT onclick=a.stop() type=button value=停止> <DIV id=dot style="HEIGHT: 100px; LEFT: 100px; POSITION: absolute; TOP: 150px; WIDTH: 100px"><IMG alt="" border=0 height=86 src="/images/TC_idc.gif" width=226></DIV> <SCRIPT type=text/javascript> <!-- p1 = new StraightPath(150,50,250,50,12); p2 = new CirclePath(250,150,100,100,90,-90,30); p3 = new StraightPath(250,250,150,250,12); p4 = new CirclePath(150,150,100,100,270,90,30); p = p1.concat(p2).concat(p3).concat(p4); p = p.rotate(150,50,45).add(new StraightPath(100,100,100,100,1)); a = new Animator("dot", p, 50); a.onanimationdone = new Function("alert('一遍已经转完,请先按停止键再开始.')"); //--> </SCRIPT> </body> </html> <a href="/ITCenter/effect/">.</a>
[提示:可先修改代码再按运行]
本文链接:http://www.tc-21.com/ITCenter/200907/20090722200741.html
上一篇文章:
CSS滤镜实现的各种效果
下一篇文章:
明暗变化的二张图片
更多关于
图形特效
的新闻
相关文章
js显示隐藏层
JS对WMP的操作
每次刷新后随机显示图片的效果
简单的图片放大展示效果
横向不间断的连续滚动图片/文字广告
仿拍拍paipai.com首页产品图片随机轮显切换效果
用鼠标滚轮滚动控制图片显示的大小
超酷超绚精美图片展示效果代码(六)
::::::
网页模板
|
建站指导
|
视频教程
|
图片中心
|
在线咨询
|
网站运营
|
网站推广
|
图片素材
::::::
CopyRight 2007 All Rights Reserved 天诚世纪 版权所有
鄂ICP备12000046号
联系电话:18995527083 18995527081 QQ:448163207 32301667 Email:my_tc@126.com
::::::搜索关键字:
武汉网站制作
|
武汉做网站
|
武汉网站建设
|
武汉网页制作
|
天诚世纪
|
武汉网页制作公司
|
网页模板
|::::::