收藏本站帮助飘仙建站网侵权投诉
切换到宽版

 找回密码
 立即注册

QQ登录

只需一步，快速开始

飘仙建站论坛»论坛 › 源码cms建站学习交流区 › 网页制作设计交流 › 　JS效果之图片切割
返回列表 发新帖
查看: 2665|回复: 4

[教程] 　JS效果之图片切割

[复制链接]
mseed
发表于 2012-1-5 09:25:21 | 显示全部楼层 |阅读模式 来自 中国–江苏–南京

JS效果之图片切割
DEMO1(随机出现): http://cnwander.com/demo/puzzle_effect/
机器配置好的可以将图片切得更细一点 (变量xNum，yNum)
DEMO1(规则运动): http://cnwander.com/demo/puzzle_effect/index2.html
测试：IE6、IE7、FF3.014
原文：http://cnwander.com/blog/?p=13
突发奇想的效果，主要突出构思，效果还比较粗糙，好好创意一下，应该可以引申出一些比较有新意的图片切换效果。
没什么特别的东西，至于思路，有兴趣的同学自己看DEMO吧。
效果一(随机出现)：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Puzzle effect - by Wander</title>
  6. <style type="text/css">
  7. * {margin:0; padding:0}
  8. ul {list-style:none}
  9. img {border:0}
  10. body {position:relative; background:white; text-align:center; font:12px/120% Arial,simsun,sans-serif; color:white; }
  11. .imgWrap {margin:0 auto}
  12. #thumbs {position:absolute; top: 600px; left:300px; width:400px}
  13. #thumbs li {float:left; margin:0 5px; cursor:pointer}
  14. #thumbs li img {float:left}
  15. #thumbs li.current {margin:-3px 2px 0 2px; padding:1px; border:2px solid black}
  16. </style>
  17. <script type="text/javascript">
  18. //code by Wander @ cnwander.com
  19. var xNum = 2,
  20. yNum = 2,
  21. xLimit,
  22. yLimit;;
  23. var thumbs,wrap;
  24. window.onload = function() {
  25. var thumbsWrap = $("#thumbs");
  26. setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
  27. xLimit = [0,$("body").clientWidth];
  28. yLimit = [0,screen.height - 200];
  29. thumbs = $("#thumbs li");
  30. loadImg(thumbs[0].getAttribute("url"));
  31. each(thumbs,thumbEvts);
  32. }
  33. function thumbEvts() {
  34. this.onclick = thumbDown;
  35. function thumbDown(e) {
  36.   each(thumbs,function(){
  37.    this.className = "";
  38.   });
  39.   this.className = "current";
  40.   loadImg(this.getAttribute("url"));
  41. }
  42. }
  43. function loadImg(url) {
  44. var img = new Image();
  45. var left,
  46.   top = 100,
  47.   imgW,imgH;
  48. if(wrap) removeElem(wrap);
  49. wrap = addDiv($("body"),{className:"imgWrap"});
  50. img.src = url;
  51. wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
  52. if(img.width > 0) initImg();
  53. else img.onload = initImg;

  55. function initImg() {
  56.   imgW = img.width;
  57.   imgH = img.height;
  58.   left = ($("body").clientWidth - imgW)/2;
  59.   wrap.innerHTML = "";
  60.   numTimer = 0;
  61.   for(var i=0; i<xNum; i++) {
  62.    for(var j=0; j<yNum; j++)
  63.     addPiece(i,j);
  64.   }
  65. }

  67. function addPiece(x,y) {
  68.   var obj = addDiv(wrap),
  69.    w = imgW/xNum,
  70.    h = imgH/yNum,
  71.    opa = 0,
  72.    xPos = x*w,
  73.    yPos = y*h,
  74.    xStart = randowNum(xLimit[0],xLimit[1]-w),
  75.    yStart = randowNum(yLimit[0],yLimit[1]-h);   
  76.   
  77.   slideTo();
  78.   
  79.   function slideTo() {
  80.    var a = 0.2,
  81.     toScale = 1,
  82.     toX = left+xPos,
  83.     toY = top+yPos,
  84.     toOpa = 1,
  85.     timer = window.setInterval(move,20);
  86.    
  87.    numTimer++;
  88.    function move() {
  89.     xStart += (toX - xStart)*a;
  90.     yStart += (toY - yStart)*a;
  91.     opa += (toOpa - opa)*a;
  92.     if(Math.abs(toX-xStart)<=1) {
  93.      xStart = toX;
  94.      yStart = toY;
  95.      opa = toOpa;
  96.      window.clearInterval(timer);
  97.      numTimer--;
  98.      if(numTimer <= 0) {
  99.       setStyle(wrap,"paddingTop",top+"px");
  100.       wrap.innerHTML = "<img src=""+url+""/>";
  101.      }
  102.     }
  103.     obj.style.cssText = "position:absolute;left:"+xStart+"px;top: "+yStart+"px;width:"+w+"px;height:"+h+"px;background:url("+url+") no-repeat -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +"); -moz-opacity:"+ opa +"; opacity:"+ opa;
  104.    
  105.    }
  106.   }
  107.   
  108. }
  109. }
  110. function addDiv(where,attr) {
  111. var obj = document.createElement("div");
  112. if(attr)
  113. for(var key in attr) {
  114.   if(key == "className") obj.className = attr[key];
  115.   else obj.setAttribute(key,attr[key]);
  116. }
  117. where.appendChild(obj);
  118. return obj;
  119. }
  120. function removeElem(elem){
  121. var parent = elem.parentNode;
  122. if(parent){
  123.   parent.removeChild(elem);
  124. }
  125. }
  126. //遍历对象
  127. function each(obj,fuc) {
  128. for(var key in obj) {
  129.   obj[key].index = key;
  130.   fuc.call(obj[key]);  
  131. }  
  132. }
  133. function randowNum(start,end) {
  134. return Math.floor(Math.random()*(end - start)) + start;
  135. }
  136. //设置样式
  137. function setStyle() {
  138. if(arguments.length == 2 &&  typeof arguments[1] == "object") {
  139.   for(var key in arguments[1]) {
  140.    arguments[0].style[key] = arguments[1][key];
  141.   }
  142. } else if (arguments.length > 2) {
  143.   arguments[0].style[arguments[1]] = arguments[2];
  144. }
  145. }
  146. //elements finder
  147. function $(s,wrap) {
  148. var eleExpr =  /([a-zA-Z0-9]*)([#\.]?)(\w+)[^\s+]*/g,
  149.   result = [wrap || document];
  150. while(eleExpr.test(s)) {
  151.   var tag = RegExp.$1,
  152.    type = RegExp.$2,
  153.    content = RegExp.$3,
  154.    elems = [];
  155.   for(var i=0; i<result.length; i++) {
  156.    var temp;
  157.    switch(type) {
  158.     case "#":
  159.      temp = [result[i].getElementById(content)];
  160.      break;
  161.     case ".":
  162.      temp = getElemsByClassName(content,result[i],tag);
  163.      break;
  164.     default:
  165.      temp = result[i].getElementsByTagName(tag+content);
  166.    }
  167.    for(var key in temp) {
  168.     if(temp[key].nodeType == 1) elems.push(temp[key]);
  169.    }     
  170.   }
  171.   result = [];
  172.   for(var key in elems) {
  173.    if(elems[key].nodeType == 1) result.push(elems[key]);
  174.   }
  175. }
  176. return result.length == 1 ? result[0] : result;
  177. function getElemsByClassName(classname,elem,tag) {
  178.   var result = [],
  179.    tag = tag || "*",
  180.    allElems = elem.getElementsByTagName(tag) || elem.all;
  181.   for(var i=0; i<allElems.length; i++){
  182.    var list = allElems[i].className.split(" ");
  183.    for(var j=0; j<list.length; j++){
  184.     if(list[j] == classname) result.push(allElems[i]);
  185.    }      
  186.   }
  187.   return result;
  188. }
  189. }
  190. </script>
  191. </head>
  192. <body>
  193. <div style="position:absolute; right:0"><a href="http://cnwander.com/blog/?p=13">Wander's space</a></div>
  194. <ul id="thumbs">
  195. <li url="/articleimg/2009/11/7205/photo01.jpg" class="current"><img src="/articleimg/2009/11/7205/thumb01.jpg" alt=""/></li>
  196. <li url="/articleimg/2009/11/7205/photo02.jpg"><img src="/articleimg/2009/11/7205/thumb02.jpg" alt=""/></li>
  197.     <li url="/articleimg/2009/11/7205/photo03.jpg"><img src="/articleimg/2009/11/7205/thumb03.jpg" alt=""/></li>
  198. </ul>
  199. </body>
  200. </html>
复制代码

没什么特别的, 机器配置, 突发奇想, 有兴趣, 特别的

评分

参与人数 1金币 +1 收起 理由
光明使者 + 1 很给力!

查看全部评分

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复

使用道具 举报

mseed
 楼主| 发表于 2012-1-5 09:26:27 | 显示全部楼层 来自 中国–江苏–南京
效果二(规则运动)：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Puzzle effect - by Wander</title>
  6. <style type="text/css">
  7. * {margin:0; padding:0}
  8. ul {list-style:none}
  9. img {border:0}
  10. body {position:relative; background:white; text-align:center; font:12px/120% Arial,simsun,sans-serif; color:white; }
  11. .imgWrap {margin:0 auto}
  12. #thumbs {position:absolute; top: 600px; left:300px; width:400px}
  13. #thumbs li {float:left; margin:0 5px; cursor:pointer}
  14. #thumbs li img {float:left}
  15. #thumbs li.current {margin:-3px 2px 0 2px; padding:1px; border:2px solid black}
  16. </style>
  17. <script type="text/javascript">
  18. //code by Wander @ cnwander.com
  19. var xNum = 3,
  20. yNum = 3,
  21. xLimit,
  22. yLimit;;
  23. var thumbs,wrap;
  24. window.onload = function() {
  25. var thumbsWrap = $("#thumbs");
  26. setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
  27. xLimit = [0,$("body").clientWidth];
  28. yLimit = [0,screen.height - 250];
  29. thumbs = $("#thumbs li");
  30. loadImg(thumbs[0].getAttribute("url"));
  31. each(thumbs,thumbEvts);
  32. }
  33. function thumbEvts() {
  34. this.onclick = thumbDown;
  35. function thumbDown(e) {
  36.   each(thumbs,function(){
  37.    this.className = "";
  38.   });
  39.   this.className = "current";
  40.   loadImg(this.getAttribute("url"));
  41. }
  42. }
  43. function loadImg(url) {
  44. var img = new Image();
  45. var left,
  46.   top = 100,
  47.   imgW,imgH;
  48. if(wrap) removeElem(wrap);
  49. wrap = addDiv($("body"),{className:"imgWrap"});
  50. img.src = url;
  51. wrap.innerHTML = "<img src="/articleimg/2009/11/7205/loading.gif" style="margin-top:250px"/>";
  52. if(img.width > 0) initImg();
  53. else img.onload = initImg;

  55. function initImg() {
  56.   imgW = img.width;
  57.   imgH = img.height;
  58.   left = ($("body").clientWidth - imgW)/2;
  59.   wrap.innerHTML = "";
  60.   numTimer = 0;
  61.   for(var i=0; i<xNum; i++) {
  62.    for(var j=0; j<yNum; j++) {
  63.     var xStart = (xLimit[1])*i/(xNum-1) - imgW*0.5/xNum,
  64.      yStart = (yLimit[1])*j/(yNum-1) - imgH/yNum;
  65.     addPiece(xStart,yStart,i,j);
  66.    }
  67.   }
  68. }

  70. function addPiece(xStart,yStart,xEnd,yEnd) {
  71.   var obj = addDiv(wrap),
  72.    w = imgW/xNum,
  73.    h = imgH/yNum,
  74.    opa = 0,
  75.    xPos = xEnd*w,
  76.    yPos = yEnd*h;   
  77.   
  78.   slideTo();
  79.   
  80.   function slideTo() {
  81.    var a = 0.2,
  82.     toScale = 1,
  83.     toX = left+xPos,
  84.     toY = top+yPos,
  85.     toOpa = 1,
  86.     timer = window.setInterval(move,20);
  87.    
  88.    numTimer++;
  89.    function move() {
  90.     xStart += (toX - xStart)*a;
  91.     yStart += (toY - yStart)*a;
  92.     opa += (toOpa - opa)*a;
  93.     if(Math.sqrt(Math.pow(toX-xStart,2)+Math.pow(toY-yStart,2))<=1) {
  94.      xStart = toX;
  95.      yStart = toY;
  96.      opa = toOpa;
  97.      window.clearInterval(timer);
  98.      numTimer--;
  99.      if(numTimer <= 0) {
  100.       setStyle(wrap,"paddingTop",top+"px");
  101.       wrap.innerHTML = "<img src=""+url+""/>";
  102.      }
  103.     }

  105.     obj.style.cssText = "position:absolute;left:"+xStart+"px;top:
  106. "+yStart+"px;width:"+w+"px;height:"+h+"px;background:url("+url+")
  107. no-repeat -"+xPos+"px -"+yPos+"px;filter:alpha(opacity="+ opa*100 +");
  108. -moz-opacity:"+ opa +"; opacity:"+ opa;
  109.    
  110.    }
  111.   }
  112.   
  113. }
  114. }
  115. function addDiv(where,attr) {
  116. var obj = document.createElement("div");
  117. if(attr)
  118. for(var key in attr) {
  119.   if(key == "className") obj.className = attr[key];
  120.   else obj.setAttribute(key,attr[key]);
  121. }
  122. where.appendChild(obj);
  123. return obj;
  124. }
  125. function removeElem(elem){
  126. var parent = elem.parentNode;
  127. if(parent){
  128.   parent.removeChild(elem);
  129. }
  130. }
  131. //遍历对象
  132. function each(obj,fuc) {
  133. for(var key in obj) {
  134.   obj[key].index = key;
  135.   fuc.call(obj[key]);  
  136. }  
  137. }
  138. function randowNum(start,end) {
  139. return Math.floor(Math.random()*(end - start)) + start;
  140. }
  141. //设置样式
  142. function setStyle() {
  143. if(arguments.length == 2 &&  typeof arguments[1] == "object") {
  144.   for(var key in arguments[1]) {
  145.    arguments[0].style[key] = arguments[1][key];
  146.   }
  147. } else if (arguments.length > 2) {
  148.   arguments[0].style[arguments[1]] = arguments[2];
  149. }
  150. }
  151. //elements finder
  152. function $(s,wrap) {
  153. var eleExpr =  /([a-zA-Z0-9]*)([#\.]?)(\w+)[^\s+]*/g,
  154.   result = [wrap || document];
  155. while(eleExpr.test(s)) {
  156.   var tag = RegExp.$1,
  157.    type = RegExp.$2,
  158.    content = RegExp.$3,
  159.    elems = [];
  160.   for(var i=0; i<result.length; i++) {
  161.    var temp;
  162.    switch(type) {
  163.     case "#":
  164.      temp = [result[i].getElementById(content)];
  165.      break;
  166.     case ".":
  167.      temp = getElemsByClassName(content,result[i],tag);
  168.      break;
  169.     default:
  170.      temp = result[i].getElementsByTagName(tag+content);
  171.    }
  172.    for(var key in temp) {
  173.     if(temp[key].nodeType == 1) elems.push(temp[key]);
  174.    }     
  175.   }
  176.   result = [];
  177.   for(var key in elems) {
  178.    if(elems[key].nodeType == 1) result.push(elems[key]);
  179.   }
  180. }
  181. return result.length == 1 ? result[0] : result;
  182. function getElemsByClassName(classname,elem,tag) {
  183.   var result = [],
  184.    tag = tag || "*",
  185.    allElems = elem.getElementsByTagName(tag) || elem.all;
  186.   for(var i=0; i<allElems.length; i++){
  187.    var list = allElems[i].className.split(" ");
  188.    for(var j=0; j<list.length; j++){
  189.     if(list[j] == classname) result.push(allElems[i]);
  190.    }      
  191.   }
  192.   return result;
  193. }
  194. }
  195. </script>
  196. </head>
  197. <body>
  198. <div
  199. style="position:absolute; right:0"><a
  200. href="http://cnwander.com/blog/?p=13">Wander's
  201. space</a></div>
  202. <ul id="thumbs">
  203. <li
  204. url="/articleimg/2009/11/7205/photo01.jpg" class="current"><img
  205. src="/articleimg/2009/11/7205/thumb01.jpg" alt=""/></li>
  206. <li url="/articleimg/2009/11/7205/photo02.jpg"><img src="/articleimg/2009/11/7205/thumb02.jpg" alt=""/></li>

  208.     <li url="/articleimg/2009/11/7205/photo03.jpg"><img
  209. src="/articleimg/2009/11/7205/thumb03.jpg" alt=""/></li>
  210. </ul>
  211. </body>
  212. </html>
复制代码

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复 支持 反对

使用道具 举报

光明使者
发表于 2013-3-20 14:07:32 | 显示全部楼层 来自 中国–广东–湛江
为何总是复制别人的呢?楼主

点评

mseed
不复制别人搞不定啊~嘿嘿  详情 回复 发表于 2013-3-20 14:09

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复 支持 反对

使用道具 举报

mseed
 楼主| 发表于 2013-3-20 14:09:46 | 显示全部楼层 来自 中国–江苏–南京
光明使者 发表于 2013-3-20 14:07
为何总是复制别人的呢?楼主

不复制别人搞不定啊~嘿嘿

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复 支持 反对

使用道具 举报

光明使者
发表于 2013-3-20 14:10:54 | 显示全部楼层 来自 中国–广东–湛江
mseed 发表于 2013-3-20 14:09
不复制别人搞不定啊~嘿嘿

呵呵~~~~连别人的连接也一起了

发帖求助前要善用【论坛搜索】功能，那里可能会有你要找的答案；

如何回报帮助你解决问题的坛友，好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分，做一个热心并受欢迎的人！
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-12-22 20:10 , Processed in 0.082337 second(s), 21 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表