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获取textarea中的光标位置
May 06 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
JavaScript中的Promise使用详解
Jun 24 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
轻松实现jquery手风琴效果
Jan 14 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 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 array 的加法操作代码
2010/07/24 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
php实现过滤字符串中的中文和数字实例
2015/07/29 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
在网页中控制wmplayer播放器
2006/07/01 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
对Vue beforeRouteEnter 的next执行时机详解
2018/08/25 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
[01:57]2016完美“圣”典风云人物:国士无双专访
2016/12/04 DOTA
Python使用爬虫猜密码
2016/02/19 Python
100行python代码实现跳一跳辅助程序
2018/01/15 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
python的pytest框架之命令行参数详解(下)
2019/06/27 Python
Python @property装饰器原理解析
2020/01/22 Python
浅析python标准库中的glob
2020/03/13 Python
Html5踩坑记之mandMobile使用小记
2020/04/02 HTML / CSS
SQL面试题
2013/12/09 面试题
幼儿教师自我鉴定
2013/11/02 职场文书
单位消防安全制度
2014/01/12 职场文书
员工辞职信范文
2015/03/02 职场文书
教师党员自我评价2015
2015/03/04 职场文书
学校推普周活动总结
2015/05/07 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
goland设置颜色和字体的操作
2021/05/05 Golang
Linux7.6二进制安装Mysql8.0.27详细操作步骤
2021/11/27 MySQL
Go语言 详解net的tcp服务
2022/04/14 Golang