论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > Javascript教程
Tag:验证,特效,入门,实例,验证,表单,特效,正则表达式,跑马灯,document,函数,代码,getElementByID,菜单,图片,视频教程

图片切割技巧

文章类别：Javascript | 发表日期:2010-2-2 14:05:13

突发奇想的效果，主要突出构思，效果还比较粗糙，好好创意一下，应该可以引申出一些比较有新意的图片切换效果。
效果一(随机出现)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Puzzle effect - by Wander</title>
<style type="text/css">
* {margin:0; padding:0}
ul {list-style:none}
img {border:0}
body {position:relative; background:white; text-align:center; font:12px/120% Arial,simsun,sans-serif; color:white; }
.imgWrap {margin:0 auto}
#thumbs {position:absolute; top: 600px; left:300px; width:400px}
#thumbs li {float:left; margin:0 5px; cursor:pointer}
#thumbs li img {float:left}
#thumbs li.current {margin:-3px 2px 0 2px; padding:1px; border:2px solid black}
</style>
<script type="text/javascript">
//code by Wander @ cnwander.com
var xNum = 2,
 yNum = 2,
 xLimit,
 yLimit;;
var thumbs,wrap;
window.onload = function() {
 var thumbsWrap = $("#thumbs");
 setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
 xLimit = [0,$("body").clientWidth];
 yLimit = [0,screen.height - 200];
 thumbs = $("#thumbs li");
 loadImg(thumbs[0].getAttribute("url")); 
 each(thumbs,thumbEvts);
}
function thumbEvts() {
 this.onclick = thumbDown;
 function thumbDown(e) {
  each(thumbs,function(){
   this.className = "";
  });
  this.className = "current";
  loadImg(this.getAttribute("url"));
 } 
}
function loadImg(url) {
 var img = new Image();
 var left,
  top = 100,
  imgW,imgH;
 if(wrap) removeElem(wrap);
 wrap = addDiv($("body"),{className:"imgWrap"});
 img.src = url;
 wrap.innerHTML = "<img src="http://cnwander.com/demo/slideshow/images/loading.gif" style=\"margin-top:250px\"/>";
 if(img.width > 0) initImg();
 else img.onload = initImg;
 
 function initImg() {
  imgW = img.width;
  imgH = img.height;
  left = ($("body").clientWidth - imgW)/2;
  wrap.innerHTML = "";
  numTimer = 0;
  for(var i=0; i<xNum; i++) {
   for(var j=0; j<yNum; j++)
    addPiece(i,j);
  }
 }
 
 function addPiece(x,y) {
  var obj = addDiv(wrap),
   w = imgW/xNum,
   h = imgH/yNum,
   opa = 0,
   xPos = x*w,
   yPos = y*h,
   xStart = randowNum(xLimit[0],xLimit[1]-w),
   yStart = randowNum(yLimit[0],yLimit[1]-h);   
  
  slideTo();
  
  function slideTo() {
   var a = 0.2,
    toScale = 1,
    toX = left+xPos,
    toY = top+yPos,
    toOpa = 1,
    timer = window.setInterval(move,20);
    
   numTimer++;
   function move() {
    xStart += (toX - xStart)*a;
    yStart += (toY - yStart)*a; 
    opa += (toOpa - opa)*a; 
    if(Math.abs(toX-xStart)<=1) {
     xStart = toX;
     yStart = toY;
     opa = toOpa;
     window.clearInterval(timer);
     numTimer--;
     if(numTimer <= 0) {
      setStyle(wrap,"paddingTop",top+"px");
      wrap.innerHTML = "<img src=""+url+"\"/>";
     }
    }
    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;
   
   }
  }
  
 } 
}
function addDiv(where,attr) {
 var obj = document.createElement("div");
 if(attr)
 for(var key in attr) {
  if(key == "className") obj.className = attr[key];
  else obj.setAttribute(key,attr[key]);
 }
 where.appendChild(obj);
 return obj;
}
function removeElem(elem){
 var parent = elem.parentNode;
 if(parent){
  parent.removeChild(elem);
 }
}
//遍历对象
function each(obj,fuc) {
 for(var key in obj) {
  obj[key].index = key;
  fuc.call(obj[key]); 
 }  
}
function randowNum(start,end) {
 return Math.floor(Math.random()*(end - start)) + start;
}
//设置样式
function setStyle() {
 if(arguments.length == 2 &&  typeof arguments[1] == "object") {
  for(var key in arguments[1]) {
   arguments[0].style[key] = arguments[1][key];
  }
 } else if (arguments.length > 2) {
  arguments[0].style[arguments[1]] = arguments[2];
 }
}
//elements finder
function $(s,wrap) {
 var eleExpr =  /([a-zA-Z0-9]*)([#\.]?)(\w+)[^\s+]*/g,
  result = [wrap || document];
 while(eleExpr.test(s)) {
  var tag = RegExp.$1,
   type = RegExp.$2,
   content = RegExp.$3,
   elems = [];
  for(var i=0; i<result.length; i++) {
   var temp;
   switch(type) {
    case "#":
     temp = [result[i].getElementById(content)];
     break;
    case ".":
     temp = getElemsByClassName(content,result[i],tag);
     break;
    default:
     temp = result[i].getElementsByTagName(tag+content);
   }
   for(var key in temp) {
    if(temp[key].nodeType == 1) elems.push(temp[key]);
   }     
  }
  result = [];
  for(var key in elems) {
   if(elems[key].nodeType == 1) result.push(elems[key]);
  } 
 }
 return result.length == 1 ? result[0] : result;
 function getElemsByClassName(classname,elem,tag) {
  var result = [],
   tag = tag || "*",
   allElems = elem.getElementsByTagName(tag) || elem.all;
  for(var i=0; i<allElems.length; i++){
   var list = allElems[i].className.split(" ");
   for(var j=0; j<list.length; j++){
    if(list[j] == classname) result.push(allElems[i]);
   }      
  }
  return result;
 }
}
</script>
</head>
<body>
<div style="position:absolute; right:0"><a href="http://cnwander.com/blog/?p=13">Wander's space</a></div>
<ul id="thumbs">
 <li url="http://cnwander.com/demo/slideshow/photos/photo01.jpg" class="current"><img src="http://cnwander.com/demo/slideshow/photos/thumb01.jpg" alt=""/></li>
 <li url="http://cnwander.com/demo/slideshow/photos/photo02.jpg"><img src="http://cnwander.com/demo/slideshow/photos/thumb02.jpg" alt=""/></li>
    <li url="http://cnwander.com/demo/slideshow/photos/photo03.jpg"><img src="http://cnwander.com/demo/slideshow/photos/thumb03.jpg" alt=""/></li>
</ul>
</body>
</html>


效果二(规则运动)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Puzzle effect - by Wander</title>
<style type="text/css">
* {margin:0; padding:0}
ul {list-style:none}
img {border:0}
body {position:relative; background:white; text-align:center; font:12px/120% Arial,simsun,sans-serif; color:white; }
.imgWrap {margin:0 auto}
#thumbs {position:absolute; top: 600px; left:300px; width:400px}
#thumbs li {float:left; margin:0 5px; cursor:pointer}
#thumbs li img {float:left}
#thumbs li.current {margin:-3px 2px 0 2px; padding:1px; border:2px solid black}
</style>
<script type="text/javascript">
//code by Wander @ cnwander.com
var xNum = 3,
 yNum = 3,
 xLimit,
 yLimit;;
var thumbs,wrap;
window.onload = function() {
 var thumbsWrap = $("#thumbs");
 setStyle(thumbsWrap,"left",($("body").clientWidth - thumbsWrap.offsetWidth)/2+"px");
 xLimit = [0,$("body").clientWidth];
 yLimit = [0,screen.height - 250];
 thumbs = $("#thumbs li");
 loadImg(thumbs[0].getAttribute("url")); 
 each(thumbs,thumbEvts);
}
function thumbEvts() {
 this.onclick = thumbDown;
 function thumbDown(e) {
  each(thumbs,function(){
   this.className = "";
  });
  this.className = "current";
  loadImg(this.getAttribute("url"));
 } 
}
function loadImg(url) {
 var img = new Image();
 var left,
  top = 100,
  imgW,imgH;
 if(wrap) removeElem(wrap);
 wrap = addDiv($("body"),{className:"imgWrap"});
 img.src = url;
 wrap.innerHTML = "<img src="http://cnwander.com/demo/slideshow/images/loading.gif" style=\"margin-top:250px\"/>";
 if(img.width > 0) initImg();
 else img.onload = initImg;
 
 function initImg() {
  imgW = img.width;
  imgH = img.height;
  left = ($("body").clientWidth - imgW)/2;
  wrap.innerHTML = "";
  numTimer = 0;
  for(var i=0; i<xNum; i++) {
   for(var j=0; j<yNum; j++) {
    var xStart = (xLimit[1])*i/(xNum-1) - imgW*0.5/xNum,
     yStart = (yLimit[1])*j/(yNum-1) - imgH/yNum;
    addPiece(xStart,yStart,i,j);
   }
  }
 }
 
 function addPiece(xStart,yStart,xEnd,yEnd) {
  var obj = addDiv(wrap),
   w = imgW/xNum,
   h = imgH/yNum,
   opa = 0,
   xPos = xEnd*w,
   yPos = yEnd*h;   
  
  slideTo();
  
  function slideTo() {
   var a = 0.2,
    toScale = 1,
    toX = left+xPos,
    toY = top+yPos,
    toOpa = 1,
    timer = window.setInterval(move,20);
    
   numTimer++;
   function move() {
    xStart += (toX - xStart)*a;
    yStart += (toY - yStart)*a; 
    opa += (toOpa - opa)*a; 
    if(Math.sqrt(Math.pow(toX-xStart,2)+Math.pow(toY-yStart,2))<=1) {
     xStart = toX;
     yStart = toY;
     opa = toOpa;
     window.clearInterval(timer);
     numTimer--;
     if(numTimer <= 0) {
      setStyle(wrap,"paddingTop",top+"px");
      wrap.innerHTML = "<img src=""+url+"\"/>";
     }
    }
    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;
   
   }
  }
  
 } 
}
function addDiv(where,attr) {
 var obj = document.createElement("div");
 if(attr)
 for(var key in attr) {
  if(key == "className") obj.className = attr[key];
  else obj.setAttribute(key,attr[key]);
 }
 where.appendChild(obj);
 return obj;
}
function removeElem(elem){
 var parent = elem.parentNode;
 if(parent){
  parent.removeChild(elem);
 }
}
//遍历对象
function each(obj,fuc) {
 for(var key in obj) {
  obj[key].index = key;
  fuc.call(obj[key]); 
 }  
}
function randowNum(start,end) {
 return Math.floor(Math.random()*(end - start)) + start;
}
//设置样式
function setStyle() {
 if(arguments.length == 2 &&  typeof arguments[1] == "object") {
  for(var key in arguments[1]) {
   arguments[0].style[key] = arguments[1][key];
  }
 } else if (arguments.length > 2) {
  arguments[0].style[arguments[1]] = arguments[2];
 }
}
//elements finder
function $(s,wrap) {
 var eleExpr =  /([a-zA-Z0-9]*)([#\.]?)(\w+)[^\s+]*/g,
  result = [wrap || document];
 while(eleExpr.test(s)) {
  var tag = RegExp.$1,
   type = RegExp.$2,
   content = RegExp.$3,
   elems = [];
  for(var i=0; i<result.length; i++) {
   var temp;
   switch(type) {
    case "#":
     temp = [result[i].getElementById(content)];
     break;
    case ".":
     temp = getElemsByClassName(content,result[i],tag);
     break;
    default:
     temp = result[i].getElementsByTagName(tag+content);
   }
   for(var key in temp) {
    if(temp[key].nodeType == 1) elems.push(temp[key]);
   }     
  }
  result = [];
  for(var key in elems) {
   if(elems[key].nodeType == 1) result.push(elems[key]);
  } 
 }
 return result.length == 1 ? result[0] : result;
 function getElemsByClassName(classname,elem,tag) {
  var result = [],
   tag = tag || "*",
   allElems = elem.getElementsByTagName(tag) || elem.all;
  for(var i=0; i<allElems.length; i++){
   var list = allElems[i].className.split(" ");
   for(var j=0; j<list.length; j++){
    if(list[j] == classname) result.push(allElems[i]);
   }      
  }
  return result;
 }
}
</script>
</head>
<body>
<div style="position:absolute; right:0"><a href="http://cnwander.com/blog/?p=13">Wander's space</a></div>
<ul id="thumbs">
 <li url="http://cnwander.com/demo/slideshow/photos/photo01.jpg" class="current"><img src="http://cnwander.com/demo/slideshow/photos/thumb01.jpg" alt=""/></li>
 <li url="http://cnwander.com/demo/slideshow/photos/photo02.jpg"><img src="http://cnwander.com/demo/slideshow/photos/thumb02.jpg" alt=""/></li>
    <li url="http://cnwander.com/demo/slideshow/photos/photo03.jpg"><img src="http://cnwander.com/demo/slideshow/photos/thumb03.jpg" alt=""/></li>
</ul>
</body>
</html>

 
上一篇：常用的一些javascript小技巧 人气:2009
下一篇：Dom加载 人气:2017
视频教程列表
文章教程搜索
 
Javascript推荐教程
Javascript热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058