JS网页特效代码:切割网页图片特殊效果- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JS网页特效代码:切割网页图片特殊效果

技术文章搜索

关键字

Javascript 中的 JS网页特效代码:切割网页图片特殊效果

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-03 浏览: 319 ::

收藏到网摘: n/a

jQuery教程:制作滑动动画效果的层正则表达式的高级技巧8个常用的概念

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吧。

效果一(随机出现)：

运行代码框
<!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=\"/articleimg/2009/11/7205/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="/upload/tech/20100103/20100103125004_6512bd43d9caa6e02c990b0a82652dca.jpg" class="current"><img src="/upload/tech/20100103/20100103125004_093f65e080a295f8076b1c5722a46aa2.jpg" alt=""/></li> <li url="/upload/tech/20100103/20100103125004_1ff8a7b5dc7a7d1f0ed65aaa29c04b1e.jpg"><img src="/upload/tech/20100103/20100103125005_f3f27a324736617f20abbf2ffd806f6d.jpg" alt=""/></li> <li url="/upload/tech/20100103/20100103125005_da0d1111d2dc5d489242e60ebcbaf988.jpg"><img src="/upload/tech/20100103/20100103125005_a733fa9b25f33689e2adbe72199f0e62.jpg" alt=""/></li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

效果二(规则运动)：

运行代码框
<!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=\"/articleimg/2009/11/7205/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="/upload/tech/20100103/20100103125004_6512bd43d9caa6e02c990b0a82652dca.jpg" class="current"><img src="/upload/tech/20100103/20100103125004_093f65e080a295f8076b1c5722a46aa2.jpg" alt=""/></li> <li url="/upload/tech/20100103/20100103125004_1ff8a7b5dc7a7d1f0ed65aaa29c04b1e.jpg"><img src="/upload/tech/20100103/20100103125005_f3f27a324736617f20abbf2ffd806f6d.jpg" alt=""/></li> <li url="/upload/tech/20100103/20100103125005_da0d1111d2dc5d489242e60ebcbaf988.jpg"><img src="/upload/tech/20100103/20100103125005_a733fa9b25f33689e2adbe72199f0e62.jpg" alt=""/></li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

jQuery教程:制作滑动动画效果的层正则表达式的高级技巧8个常用的概念

Javascript 中的 JS网页特效代码:切割网页图片特殊效果

评论 (0) All