javascript实现的图片切割多块效果实例


Posted in Javascript onMay 07, 2015

本文实例讲述了javascript实现的图片切割多块效果。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.line{
  display:none;
  z-index:1;
  left:0;
  top:0;
  position:absolute;
}
#line1{
  display:block;
}
.container{
  position:relative;
  width:564px;
  height:294px;
  overflow:hidden;
}
.border{
  border:5px solid #000;
}
.corner{
  position:absolute;
  width:282px;
  height:147px;
  background:#ccc;
  overflow:hidden;
}
.leftTop,.inLeftTop{
  position:absolute;
  left:0;
  top:0;
  right:auto;
  bottom:auto;
}
.rightTop,.inRightTop{
  position:absolute;
  right:0;
  top:0;
  left:auto;
  bottom:auto;
}
.rightBottom,.inRightBottom{
  position:absolute;
  right:0;
  bottom:0;
  top:auto;
  left:auto;
}
.leftBottom,.inLeftBottom{
  position:absolute;
  left:0;
  bottom:0;
  top:auto;
  right:auto;
}
</style>
</head>
<body>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function crossLine(container,option,callback){
var lineX=$("<div style='width:2000px;height:4px;overflow:hidden;position:absolute;background:#FACC41;left:0;top:0;z-index:1'></div>");
var lineY=$("<div style='width:4px;height:2000px;overflow:hidden;position:absolute;background:#FACC41;left:0;top:0;z-index:1'></div>");
var _option={
  "display":"none",
  "targetPosX":container.width()/2-2,
  "targetPosY":container.height()/2-2,
  "time":500,
  "freq":10
};
$.extend(_option,option);
option=_option;
var targetPosX=option.targetPosX;
var targetPosY=option.targetPosY;
var time=option.time;
var freq=option.freq;
times=time/freq;
container.append(lineX).append(lineY);
//开始运动
var lxt=lineX.position().top;
var lyl=lineY.position().left;
xPerTime=targetPosX/times;
yPerTime=targetPosY/times;
var count=0;
var si=setInterval(function(){
  count++;
  if(count>=times){
    clearInterval(si);
    if(typeof(callback)=="function"){
      callback();
    }
    if(option.display=="none"){
      lineX.remove();
      lineY.remove();
    }
  }
  if(lxt+yPerTime<=targetPosY){
    lxt += yPerTime;
    lineX.css("top",lxt);
  }else{
    lxt=targetPosY;
    lineX.css("top",targetPosY);
  }
  if(lyl+xPerTime<=targetPosX){
    lyl += xPerTime;
    lineY.css("left",lyl);
  }else{
    lyl=targetPosX;
    lineY.css("left",targetPosX);
  }
},freq);
}
function picSplit(line1,line2,container,option){
//begin
line1.css("z-index",2);
/*
var targetX=282;
var targetY=147;
*/
var _option={
  "targetX":container.width()/2,
  "targetY":container.height()/2,
  "time":500,
  "freq":10
};
$.extend(_option,option);
option=_option;
var targetX=option.targetX;
var targetY=option.targetY;
var containerWidth=container.width();
var containerHeight=container.height();
/*
*复制四个,放入四个容器,置于四角,然后移动
*/
//div0-4 容器,放置于四角
var div0=$("<div></div>").css({"position":"absolute","left":0,"top":0,"right":"auto","bottom":"auto","width":targetX,"height":targetY,"z-index":"2","overflow":"hidden"}).appendTo(container);
var div1=$("<div></div>").css({"position":"absolute","left":targetX,"top":0,"right":"auto","bottom":"auto","width":containerWidth-targetX,"height":targetY,"z-index":"2","overflow":"hidden"}).appendTo(container);
var div2=$("<div></div>").css({"position":"absolute","left":targetX,"top":targetY,"right":"auto","bottom":"auto","width":targetX,"height":containerHeight-targetY,"z-index":"2","overflow":"hidden"}).appendTo(container);
var div3=$("<div></div>").css({"position":"absolute","left":0,"top":targetY,"right":"auto","bottom":"auto","width":targetX,"height":containerHeight-targetY,"z-index":"2","overflow":"hidden"}).appendTo(container);
//tempL0-4复制出来的层
var tempL0=line1.clone().css({"position":"absolute","left":0,"top":0,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div0);
var tempL1=line1.clone().css({"position":"absolute","left":-targetX,"top":0,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div1);
var tempL2=line1.clone().css({"position":"absolute","left":-targetX,"top":-targetY,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div2);
var tempL3=line1.clone().css({"position":"absolute","left":0,"top":-targetY,"right":"auto","bottom":"auto","z-index":"2"}).appendTo(div3);
line1.css("display","none");
line2.css("display","block");
//开始运动
var time=option.time;
var freq=option.freq;
var times=time/freq;
var count=0;
var xLeftPerTime=3;
var xRightPerTime=3;
var yTopPerTime=3;
var yBottomPerTime=3;
var l0=div0.position().left;
var t0=div0.position().top;
var l1=div1.position().left;
var t1=div1.position().top;
var l2=div2.position().left;
var t2=div2.position().top;
var l3=div3.position().left;
var t3=div3.position().top;
var si=setInterval(function(){
  count++;
  if(count>=times){
    clearInterval(si);
    div0.remove();
    div1.remove();
    div2.remove();
    div3.remove();
  }
  l0=l0-xLeftPerTime;
  t0=t0-yTopPerTime;
  l1=l1+xRightPerTime;
  t1=t1-yTopPerTime;
  l2=l2+xRightPerTime;
  t2=t2+yBottomPerTime;
  l3=l3-xLeftPerTime;
  t3=t3+yBottomPerTime;
  div0.css("left",(l0-xLeftPerTime)+"px");
  div0.css("top",(t0-yTopPerTime)+"px");
  div1.css("left",(l1+xRightPerTime)+"px");
  div1.css("top",(t1-yTopPerTime)+"px");
  div2.css("left",(l2+xRightPerTime)+"px");
  div2.css("top",(t2+yBottomPerTime)+"px");
  div3.css("left",(l3-xLeftPerTime)+"px");
  div3.css("top",(t3+yBottomPerTime)+"px");
},freq);
}
</script>
<div class="container" id="container">
<div class="line" id="line1"><img src="http://static.house.sina.com.cn/apileju/cms/110819/1820432103.jpg" alt="" /></div>
<div class="line" id="line2"><img src="http://static.house.sina.com.cn/apileju/cms/110819/1110183294.jpg" alt="" /></div>
</div>
<input type="button" value="GO" onclick="javascript:go()" />
<script type="text/javascript">
var line1=$("#line1");
var line2=$("#line2");
line1.css("display","block");
var container=$("#container");
function go(){
  var option={"display":"none"};
  crossLine(container,option,gopicSplit);
}
var container=$("#container");
function gopicSplit(){
  picSplit(line1,line2,container);
}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
AngularJS初始化过程分析(引导程序)
Dec 06 Javascript
jQuery中[attribute^=value]选择器用法实例
Dec 31 Javascript
jQuery+PHP实现动态数字展示特效
Mar 14 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
Aug 13 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
spring+angular实现导出excel的实现代码
Feb 27 Javascript
Bootstrap实现模态框效果
Sep 30 Javascript
浅谈vue权限管理实现及流程
Apr 23 Javascript
javascript中indexOf技术详解
May 07 #Javascript
javascript限制文本框输入值类型的方法
May 07 #Javascript
浅谈Javascript的静态属性和原型属性
May 07 #Javascript
ECMAScript5(ES5)中bind方法使用小结
May 07 #Javascript
JS中获取函数调用链所有参数的方法
May 07 #Javascript
jQuery中animate动画第二次点击事件没反应
May 07 #Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 #Javascript
You might like
php面向对象全攻略 (二) 实例化对象 使用对象成员
2009/09/30 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
JS获取复选框的值,并传递到后台的实现方法
2016/05/30 Javascript
vue.js指令v-model实现方法
2016/12/05 Javascript
详解vue2路由vue-router配置(懒加载)
2017/04/08 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
使用vue-cli webpack 快速搭建项目的代码
2018/11/21 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
跟老齐学Python之网站的结构
2014/10/24 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python性能提升之延迟初始化
2016/12/04 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python实现读取邮箱中的邮件功能示例【含文本及附件】
2017/08/05 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
python基础教程之while循环
2019/08/14 Python
pytorch nn.Conv2d()中的padding以及输出大小方式
2020/01/10 Python
python离线安装外部依赖包的实现
2020/02/13 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
毕业生写求职信的要点
2014/03/04 职场文书
给老师的感谢信
2015/01/20 职场文书
研讨会通知
2015/04/27 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书