jQuery图片拼图插件Image jigsaw特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片拼图插件Image jigsaw特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title>jQuery图片拼图插件Image jigsaw</title>
</head>
<body>
<center>
<div class="panel">
	<img src="img.jpg">
</div>
</center>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.image-jigsaw.min.js"></script>
<script>
	$(".panel").jigsaw({freq: 2000, x: 4, y:4, margin: 2});
</script>
</body>
</html>

JS代码(jquery.image-jigsaw.min.js):

!function(a){
	function b(d){
	w=Math.floor(a.fn.jigsaw.defaults.width/a.fn.jigsaw.defaults.x),h=Math.floor(a.fn.jigsaw.defaults.height/a.fn.jigsaw.defaults.y);
	var e=d.children(".jigsaw_panel_").children("div").length;
	for(i=0;
	e>i;
	i++){
	var f=Math.floor(3*Math.random()+0),g=Math.floor(3*Math.random()+0),j="-"+f*w+"px -"+g*h+"px";
	d.children(".jigsaw_panel_").children("div:eq("+i+")").css("background-position",j)}
t=2==Math.floor(5*Math.random()+0)?setTimeout(function(){
	c(d)}
,a.fn.jigsaw.defaults.freq):setTimeout(function(){
	b(d)}
,a.fn.jigsaw.defaults.freq)}
function c(c){
	for(w=Math.floor(a.fn.jigsaw.defaults.width/a.fn.jigsaw.defaults.x),h=Math.floor(a.fn.jigsaw.defaults.height/a.fn.jigsaw.defaults.y),i=0;
	i<a.fn.jigsaw.defaults.x;
	i++)for(j=0;
	j<a.fn.jigsaw.defaults.y;
	j++)pos="block"+i+j,c.children(".jigsaw_panel_").children("div[pos='"+pos+"']").css("background-position","-"+j*w+"px -"+i*h+"px").css("width",w+"px").css("height",h+"px").css("background-image","url("+a.fn.jigsaw.defaults.image+")");
	t=setTimeout(function(){
	b(c)}
,a.fn.jigsaw.defaults.freq)}
a.fn.jigsaw=function(c){
	var d=a.extend({
}
,a.fn.jigsaw.defaults,c);
	for(a.fn.jigsaw.defaults=d,a.fn.jigsaw.defaults.image=this.children("img").attr("src"),this.append('<div class="jigsaw_panel_"></div>'),a.fn.jigsaw.defaults.width=this.children("img")[0].width,a.fn.jigsaw.defaults.height=this.children("img")[0].height,obj=this.children(".jigsaw_panel_"),obj.css("width",parseInt(a.fn.jigsaw.defaults.width)+parseInt(2*a.fn.jigsaw.defaults.x*a.fn.jigsaw.defaults.margin)+parseInt(a.fn.jigsaw.defaults.error)+"px").css("height",parseInt(a.fn.jigsaw.defaults.height)+parseInt(2*a.fn.jigsaw.defaults.y*a.fn.jigsaw.defaults.margin)+"px"),w=Math.floor(a.fn.jigsaw.defaults.width/a.fn.jigsaw.defaults.x),h=Math.floor(a.fn.jigsaw.defaults.height/a.fn.jigsaw.defaults.y),i=0;
	i<a.fn.jigsaw.defaults.x;
	i++)for(j=0;
	j<a.fn.jigsaw.defaults.y;
	j++)pos="block"+i+j,obj.append("<div pos='"+pos+"'></div>"),obj.children("div[pos='"+pos+"']").css("background-position","-"+j*w+"px -"+i*h+"px").css("width",w+"px").css("height",h+"px").css("background-image","url("+a.fn.jigsaw.defaults.image+")").css("display","inline-block").css("margin",a.fn.jigsaw.defaults.margin).css("background-repeat","no-repeat").css("transition","background-position .5s ease-out");
	this.children("img").hide(),obj.fadeIn(),b(this)}
,a.fn.jigsaw.defaults={
	width:0,height:0,x:4,y:4,margin:1,error:16,freq:2e3,image:""}
}
(jQuery);

附件:下载该文件资源,减少时间成本(增值服务)