域名注册
|
虚拟主机
|
数据库
|
设为主页
|
加入收藏
|
天诚搜索
|
RSS
网站套餐
Package
基础特惠型网站
企业标准型网站
企业大户型网站
商务政务型网站
功能单项报价表
最新推荐
Recommended
4年网络创业经历
Dreamweaver表格经验谈
61.183.41.123数据重新上传通…
局域网arp病毒
用途相似的标签
CSS网页标准制作关于网页表单…
中国互联网13年大事记
ECSHOP 显示指定分类下的文章…
您现在的位置:
天诚世纪
>>
技术中心
>>
网页特效
>>
图形特效
>> 正文
撞壁自动变换的图片效果
作者:
天诚世纪
更新时间:2009-7-22 19:07:14
来源:
天诚世纪
以下是HTML网页特效代码,点击运行按钮可查看效果:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>网页特效|tc-21.com|---撞壁自动变换的图片效果</title> </head> <body onLoad="setValues()"> <SCRIPT> var x,y var marginbottom var marginleft=0 var margintop=0 var marginright // 速度,越小越快 var tempo=60 // 单位时间内水平移动的距离 var stepx=20 // 单位时间内上下移动的距离 var stepy=20 var timer // 图象的路径 img0 = new Image(); img0.src = "/images/test001.jpg"; img1 = new Image(); img1.src = "/images/sc000.gif"; img2 = new Image(); img2.src = "/images/index_logo.gif"; img3 = new Image(); img3.src = "/images/TC_idc1.gif"; // 延迟两秒开始运动 function setValues() { var firsttimer= setTimeout("setValues2()",100)} function setValues2() { if (document.all) { marginbottom = document.body.clientHeight-50 marginright = document.body.clientWidth-50 document.all.ball.style.posLeft=randommaker(marginright-30)+30 document.all.ball.style.posTop=10 moveball() } if (document.layers) { marginbottom = window.innerHeight-10 marginright = window.innerWidth-10 document.ball.left=randommaker(marginright-30)+30 document.ball.top=10 moveball() } } function randommaker(range) { rand=Math.floor(range*Math.random()) return rand } function moveball() { checkposition() chooseimage() if (document.all) { document.all.ball.style.posLeft+=stepx document.all.ball.style.posTop+=stepy timer=setTimeout("moveball()",tempo) } if (document.layers) { document.ball.left+=stepx document.ball.top+=stepy timer=setTimeout("moveball()",tempo) } } function checkposition() { if (document.all) { if (document.all.ball.style.posLeft>=marginright) { stepx=stepx*-1 document.all.ball.style.posLeft-=10 } if (document.all.ball.style.posLeft<=marginleft) { stepx=stepx*-1 document.all.ball.style.posLeft+=10 } if (document.all.ball.style.posTop>=marginbottom) { stepy=stepy*-1 document.all.ball.style.posTop-=10 } if (document.all.ball.style.posTop<=margintop) { stepy=stepy*-1 document.all.ball.style.posTop+=10 } } if (document.layers) { if (document.ball.left>=marginright) { stepx=stepx*-1 document.ball.left-=10 } if (document.ball.left<=marginleft) { stepx=stepx*-1 document.ball.left+=10 } if (document.ball.top>=marginbottom) { stepy=stepy*-1 document.ball.top-=10 } if (document.ball.top<=margintop) { stepy=stepy*-1 document.ball.top+=10 } } } function chooseimage() { if (document.all) { if (stepx <= 0 && stepy <=0) {ballimage.src="/images/test001.jpg"} if (stepx >= 0 && stepy <=0) {ballimage.src="/images/sc000.gif"} if (stepx <= 0 && stepy >=0) {ballimage.src="/images/index_logo.gif"} if (stepx >= 0 && stepy >=0) {ballimage.src="/images/TC_idc1.gif"} } if (document.layers) { if (stepx <= 0 && stepy <=0) {document.ball.document.ballimage.src="/images/test001.jpg"} if (stepx >= 0 && stepy <=0) {document.ball.document.ballimage.src="/images/sc000.gif"} if (stepx <= 0 && stepy >=0) {document.ball.document.ballimage.src="/images/index_logo.gif"} if (stepx >= 0 && stepy >=0) {document.ball.document.ballimage.src="/images/TC_idc1.gif"}}} </SCRIPT> <DIV id=ball style="POSITION: absolute; TOP: -50px"><IMG border=0 name=ballimage src="images/love.gif"></DIV> </body> </html> <a href="/ITCenter/effect/">.</a>
[提示:可先修改代码再按运行]
本文链接:http://www.tc-21.com/ITCenter/200907/20090722190714.html
上一篇文章:
页面外显示指定的图片
下一篇文章:
可控制的逐渐放大缩小图片
更多关于
图形特效
的新闻
相关文章
js显示隐藏层
JS对WMP的操作
每次刷新后随机显示图片的效果
简单的图片放大展示效果
横向不间断的连续滚动图片/文字广告
仿拍拍paipai.com首页产品图片随机轮显切换效果
用鼠标滚轮滚动控制图片显示的大小
超酷超绚精美图片展示效果代码(六)
::::::
网页模板
|
建站指导
|
视频教程
|
图片中心
|
在线咨询
|
网站运营
|
网站推广
|
图片素材
::::::
CopyRight 2007 All Rights Reserved 天诚世纪 版权所有
鄂ICP备12000046号
联系电话:18995527083 18995527081 QQ:448163207 32301667 Email:my_tc@126.com
::::::搜索关键字:
武汉网站制作
|
武汉做网站
|
武汉网站建设
|
武汉网页制作
|
天诚世纪
|
武汉网页制作公司
|
网页模板
|::::::