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 相关文章推荐
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
jQuery的text()方法用法分析
Dec 20 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
canvas知识总结
Jan 25 Javascript
利用HBuilder打包前端开发webapp为apk的方法
Nov 13 Javascript
Vue表单demo v-model双向绑定问题
Jun 29 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 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 smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
百度地图API应用之获取用户的具体位置
2014/06/10 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
Angular5.1新功能分享
2017/12/21 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
Python中解析JSON并同时进行自定义编码处理实例
2015/02/08 Python
Python判断Abundant Number的方法
2015/06/15 Python
python正则中最短匹配实现代码
2018/01/16 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
Android笔试题总结
2014/11/29 面试题
医学院学生求职简历的自我评价
2013/10/24 职场文书
乡镇庆八一活动方案
2014/02/02 职场文书
旷课检讨书3000字
2014/02/04 职场文书
四年级科学教学反思
2014/02/10 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
同居协议书范本
2014/04/23 职场文书
学校工作推荐信范文
2014/07/11 职场文书
法人委托书
2014/07/31 职场文书
无房产证房屋转让协议书合同样本
2014/10/18 职场文书
2015年社区居委会工作总结
2015/05/18 职场文书
金榜题名主持词
2015/07/02 职场文书
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python