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

作者佚名技术来源网页制作浏览发布时间 2012-03-06

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="/files/091117/1_202156.jpg" class="current"><img src="/files/091117/1_202454.jpg" alt=""/></li> <li url="/files/091117/1_202254.jpg"><img src="/files/091117/1_202513.jpg" alt=""/></li> <li url="/files/091117/1_202328.jpg"><img src="/files/091117/1_202522.jpg" alt=""/></li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: Mozilla:让JavaScript脚本直接操作本地文件下一篇: JS教程:如何制作表单自动聚焦的网页

关于JS网页特效代码:切割网页图片特殊效果的所有评论

随机推荐