分割图片随机排序

最新推荐文章于 2021-04-01 18:19:00 发布

jex_久尘

最新推荐文章于 2021-04-01 18:19:00 发布

阅读量948

点赞数

分类专栏：效果类

本文链接：https://blog.csdn.net/hbnight/article/details/71480030

版权

效果类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

突然来了兴致，写个切割图片随机排序。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1.0, user-scalable=no">
	<title>Document</title>
	<script src="js/jquery-1.9.1.js"></script>
	<style type="text/css">
		body{padding:20px;}
		.picture{width:400px;height:350px;position:relative;margin:0 0 20px;}
		.picture:after{content:"";clear:both;display:block;}
		.picture img{width:100%;height:100%;position:absolute;}
		.picture_div{box-shadow:0px 0px 5px 1px yellow}
	</style>
</head>
<body>
    <div class="picture">
        <img src="images/img01.jpg">
    </div>
    <input type="button" value="重 置">
	<script>
		"use strict";
		// 声明变量 :  宽,高,下标,双坐标数组;
		var w,h,timeout,random;
		var coords=[];
		var newCoords=[];
		$(function(){
			// 重置;
			$("input").on({
				"click":()=>{
					coords=[];
					newCoords=[];
					clearTimeout(timeout);
					$("div",$(".picture")).each(function(){
						var that=$(this);
						$(this).stop(false,false).animate({
							"left":$(this).attr("data-left"),
							"top":$(this).attr("data-top")
						},1000,function(){
							$(".picture img").show();
							that.remove();
							$("input").hide();
						})
					})
				}
			});
			// 点击执行
			$("body").on({
				"click":function(){
					$("input").show();
					// 隐藏原图片
					$(".picture img").hide();
					$(".picture div").remove();
					// 获取区域大小
					w=$(this).outerWidth(false)/10;
					h=$(this).outerHeight(false)/10;
					// 循环输出100个子元素
					for(var i=0;i<100;i++){
						// 存储元素行列序号
						coords.push([i%10,Math.floor(i/10%10)]);

						// 输出子元素到容器内,并设置初始位置;
						 $(".picture").append(`<div class='picture_div' data-left='${i%10*w}px'  data-top='${Math.floor(i/10%10)*h}px' style='position:absolute;left:${i%10*w}px;top:${Math.floor(i/10%10)*h}px;width:${w}px;height:${h}px;background:url(${$(this).prop("src")}) no-repeat -${i%10*w}px ${-Math.floor(i/10%10)*h}px/${$(this).outerWidth(false)}px ${$(this).outerHeight(false)}px'></div>`);
					};
					newCoords=coords;
					random(1); //执行函数;
				}
			},".picture img");
		});

		// 核心代码
		random=(m)=>{
			// 根据参数判断并清空数组;
			m>0?newCoords=[]:coords=[];
			// 循环子元素
			$("div",$(".picture")).each(function(){
				// 第一种取值
				if(m>0){
					// 获取数组中的随机数据;
					var n=Math.floor(Math.random()*coords.length);
					$(this).stop(false,false).animate({
						// 将数据添加到子元素
						"left":coords[n][0]*w+"px",
						"top":coords[n][1]*h+"px"
					},1000)
					//存储已取的值到另一个数组;
					newCoords.push(coords[n]);
					// 删除已取的值
					coords.splice(n,1);
				//另一种情况
				}else{
					var n=Math.floor(Math.random()*newCoords.length);
					$(this).stop(false,false).animate({
						"left":newCoords[n][0]*w+"px",
						"top":newCoords[n][1]*h+"px"
					},1000)
					coords.push(newCoords[n]);
					newCoords.splice(n,1);
				}
			})
			// 再次执行并改变参数;
			clearTimeout(timeout);
			timeout =	setTimeout(function(){
				random(-m);
			},3000)
		};
	</script>
</body>
</html>

jex_久尘

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分割图片随机排序

突然来了兴致，写个切割图片随机排序。 Document body{padding:20px;} .picture{width:400px;height:350px;position:relative;margin:0 0 20px;} .picture:after{content:"";clear:both;display:block;} .pic
复制链接

扫一扫

专栏目录