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 相关文章推荐
Javascript结合css实现网页换肤功能
Nov 02 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
JavaScript自动设置IFrame高度的小例子
Jun 08 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
Javascript之String对象详解
Jun 08 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
Nov 17 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
详解JavaScript 新语法之Class 的私有属性与私有方法
Apr 23 Javascript
详解json串反转义(消除反斜杠)
Aug 12 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
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
js中function()使用方法
2013/12/24 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
2015/10/15 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
2017/03/30 Javascript
详解基于webpack和vue.js搭建开发环境
2017/04/05 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
基于VUE实现的九宫格抽奖功能
2018/09/30 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
2019/11/26 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python用户管理系统
2018/03/13 Python
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
python__new__内置静态方法使用解析
2020/01/07 Python
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
毕业证丢失证明
2014/01/15 职场文书
公司授权委托书样本
2014/09/15 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
JS前端使用canvas实现扩展物体类和事件派发
2022/08/05 Javascript