网站首页
|
新闻
|
软件
|
Vista
|
硬件DIY
|
设计
|
欣赏
|
网络
|
病毒
|
开发
|
数据库
|
考试
|
英语
|
听力
|
范文
|
作文
|
管理
|
营销
|
专题
|
视频教程
|
网站地图
开发教室
程序设计
|
Delphi
|
Java
|
C++
|
VB
|
.NET
|
Css
|
Js
|
PHP
|
ASP
|
MySQL
|
数据库
|
WEB开发
|
网页特效
|
视频
首页
>
开发教室
>
网页特效
>
图形特效
> 正文
开发教室
特殊的（破碎式）图片显示效果
2007-03-08 源自:
IT粉丝网
网友评论
0
条
进入视频教程
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>网页<a href='http://www.itfensi.com/exploit/web/' target='_blank' class='infotextkey'>特效</a>|itfensi.com/Js|--- 特殊的图片显示效果</title></head><body onload=changeimage()><STYLE>.spanstyle { LEFT: -5000px; POSITION: absolute}</STYLE><SCRIPT><!-- Beginning of JavaScript - // 修改图像的高度、宽度和地址var imgwidth=200var imgheight=110var imgurl=new Array()imgurl[0]="images/PHOT046.JPG"imgurl[1]="images/c0407.jpg"imgurl[2]="images/A.gif"// Do not edit this block.var imgpreload=new Array()for (i=0;i<=imgurl.length-1;i++) { imgpreload[i]=new Image() imgpreload[i].src=imgurl[i]}// Final horizontal position of the image: distance to the left margin of the windowvar x_finalpos=300// Final vertical position of the image: distance to the top margin of the windowvar y_finalpos=110// Number of sliced cells (the higher this value the slower the script)var x_slices=8// Number of sliced rows (the higher this value the slower the script)var y_slices=3// Speed of the reassembling effect. More means slower.var pause=10// The width and heigth of the zone where the debris of the images are spread (pixels)var screenwidth=800var screenheight=500// Do not change the variables belowvar x_step=new Array()var y_step=new Array()var x_randompos=0var y_randompos=0var i_loop=0var max_loop=20var i_image=0var width_slice=Math.floor(imgwidth/x_slices)var height_slice=Math.floor(imgheight/y_slices)var cliptop=0var clipbottom=height_slicevar clipleft=0var clipright=width_slicevar spancounter=0function initiate() { cliptop=0 clipbottom=height_slice clipleft=0 clipright=width_slice i_loop=0 spancounter=0 if (document.all) { for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisspan=eval("document.all.span"+spancounter+".style") x_randompos=Math.ceil(screenwidth*Math.random()) y_randompos=Math.ceil(screenheight*Math.random()) thisspan.posLeft=x_randompos thisspan.posTop=y_randompos thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")" clipleft+=width_slice clipright+=width_slice spancounter++ } clipleft=0 clipright=width_slice cliptop+=height_slice clipbottom+=height_slice } } explode_IE()}function changeimage() { spancounter=0 for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisspan=eval("document.all.span"+spancounter+".style") thisspan.posLeft=-5000 thisspan.posTop=-5000 spancounter++ } } spancounter=0 if (i_image>imgurl.length-1) {i_image=0} for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisinnerspan=eval("span"+spancounter) thisinnerspan.innerHTML="<img src='"+imgurl[i_image]+"'>" spancounter++ } } i_image++ initiate()}function explode_IE() { spancounter=0 if (i_loop<=max_loop-1) { for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { var thisspan=eval("document.all.span"+spancounter+".style") x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop) y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop) thisspan.posLeft+=x_step[spancounter] thisspan.posTop+=y_step[spancounter] spancounter++ } } i_loop++ var timer=setTimeout("explode_IE()",pause) } else { spancounter=0 clearTimeout(timer) var timer=setTimeout("changeimage()",2000) }}// - End of JavaScript - --></SCRIPT><SCRIPT><!-- Beginning of JavaScript -if (document.all) { for (i=0;i<=y_slices-1;i++) { for (ii=0;ii<=x_slices-1;ii++) { document.write("<span id='span"+spancounter+"' class='spanstyle'></span>") spancounter++ } } spancounter=0}// - End of JavaScript - --></SCRIPT></body></html>
提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。
上一篇：
可以控制旋转的图像
下一篇：
左侧上下移动的图片
内容评论
文章纠错
发送朋友
收藏本文
复制本文链接(URL)发送给朋友：
相关内容
鼠标经过时链接文字的特殊显示
2007-03-08
显示特殊节日脚本
2007-03-08
用C++ Builder对图像进行特殊效果处理
2007-02-12
OpenGL编程轻松入门之特殊效果操作
2007-02-12
利用VC实现图像的特殊显示效果
2007-02-12
HTML教程-HTML特殊字符显示(Character Entities)
2007-02-12
第七节 插入水平线、时间和特殊字符
2007-02-12
CSS产生的特殊效果
2007-02-12
使用C#返回系统特殊路径
2007-02-12
评论
点击查看
通行证
密码
匿名发表
开发频道推荐
PHPnow轻松打造专业PHP服务器环境
轻松建立自己的网站 动易系统帮你完成
jsp环境下FCKeditor编辑器的应用
php教程：php设计模式介绍之单条模式
开发热点文章
撞壁自动变换的图片效果
跟随屏幕移动的图片
左右移动的图片
全屏游动的图片，可以飘到浏览器外边哦
虚幻显示的图片
图片翻滚导航
特殊的（颜色块）图片显示效果
图片模糊显现
图片渐隐效果
对鼠标过敏的图片
编程开发视频
电脑维修视频
Visual Studio Team System面面观系列课程
Visual Studio .NET C#视频教程
2008 Powerpcb 5.0视频教程
PRTOEL99 SE在线视频教合集
UG4.0编程视频教程
Visual Studio NET 2008 开发特性视频教程
C语言视频教程(曾怡)
数据库基础讲座
数据结构课程-电子科技大学版
Delphi经典编程视频教程
HTTP基本操作实例教程
JPS基本操作实例教程
DOS基本命令视频教程
windows组策略使用视频
路由设置教程
微软mcse认证视频教程
Exchange Server 2007系列课程
windows2003从入门到精通系列
Windows原理 视频教程
计算机组成原理视频
ccna认证教程
网络安全视频教程 上海交大
freebsd视频教程
架设流媒体服务器
关于iT粉丝
/
大事记
/
广告服务
/
联系我们
/
网站地图
/
友情链接
/
用户注册
/
版权声明
/
加入我们
itFensi.com All Rights Reserved 版权所有·IT粉丝网
© 2006 - 2008
