图片打碎后拼合

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>


</head>
<body οnlοad="changeimage()"; >
  <form id="form1" runat="server">

    <style>
.spanstyle {
 LEFT: -5000px; POSITION: absolute
}
</style>
<script>
 
var imgwidth=200

var imgheight=110

var imgurl=new Array()
imgurl[0]="images/a7.gif"
imgurl[1]="images/a11.gif"
imgurl[2]="images/4.gif"

var imgpreload=new Array()
for (i=0;i<=imgurl.length-1;i++) {
 imgpreload[i]=new Image()
 imgpreload[i].src=imgurl[i]
}

var x_finalpos=300

var y_finalpos=110

var x_slices=8

var y_slices=3

var pause=10

var screenwidth=800
var screenheight=500

var x_step=new Array()
var y_step=new Array()
var x_randompos=0
var y_randompos=0
var i_loop=0
var max_loop=20
var i_image=0
var width_slice=Math.floor(imgwidth/x_slices)
var height_slice=Math.floor(imgheight/y_slices)
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0

function 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)
 }
}


</script>
<script>
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
}
</script>
         

    </form>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
智慧校园整体解决方案是响应国家教育信息化政策,结教育改革和技术创新的产物。该方案以物联网、大数据、人工智能和移动互联技术为基础,旨在打造一个安全、高效、互动且环保的教育环境。方案强调从数字化校园向智慧校园的转变,通过自动数据采集、智能分析和按需服务,实现校园业务的智能化管理。 方案的总体设计原则包括应用至上、分层设计和互联互通,确保系统能够满足不同用户角色的需求,并实现数据和资源的整与共享。框架设计涵盖了校园安全、管理、教学、环境等多个方面,构建了一个全面的校园应用生态系统。这包括智慧安全系统、校园身份识别、智能排课及选课系统、智慧学习系统、精品录播教室方案等,以支持个性化学习和教学评估。 建设内容突出了智慧安全和智慧管理的重要性。智慧安全管理通过分布式录播系统和紧急预案一键启动功能,增强校园安全预警和事件响应能力。智慧管理系统则利用物联网技术,实现人员和设备的智能管理,提高校园运营效率。 智慧教学部分,方案提供了智慧学习系统和精品录播教室方案,支持专业级学习硬件和智能化网络管理,促进个性化学习和教学资源的高效利用。同时,教学质量评估中心和资源应用平台的建设,旨在提升教学评估的科学性和教育资源的共享性。 智慧环境建设则侧重于基于物联网的设备管理,通过智慧教室管理系统实现教室环境的智能控制和能效管理,打造绿色、节能的校园环境。电子班牌和校园信息发布系统的建设,将作为智慧校园的核心和入口,提供教务、一卡通、图书馆等系统的集成信息。 总体而言,智慧校园整体解决方案通过集成先进技术,不仅提升了校园的信息化水平,而且优化了教学和管理流程,为学生、教师和家长提供了更加便捷、个性化的教育体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值