利用jQuery实现图片切换碎片效果

最新推荐文章于 2021-09-14 21:15:52 发布

antRain

最新推荐文章于 2021-09-14 21:15:52 发布

阅读量449

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41146650/article/details/107630124

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

利用jQuery实现图片切换碎片效果

- - 效果
  - 源代码

效果

gif制作工具

源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>碎片</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				height:100vh;
				display: flex;
			}
			@-webkit-keyframes donghua {
				0% {
					opacity: 1;
					transform: scale(1);
				}
				100% {opacity: 0;transform: scale(0.5);}
			}
			#wrap{
				width:750px;
				height:500px;
				border:1px solid #000000;
				margin:auto;
				position:relative;
			}
			#wrap>div{
				width: 100%;
				height: 100%;
				position:absolute;
				top:0;
				left:0;
			}
			#wrap>#btn {
				position: absolute;
				/* right:10px; */
				bottom:10px;
				z-index:1;
				left:50%;
			}
			#wrap>#btn>li{
				list-style: none;
				width:20px;
				height:20px;
				float:left;
				margin-left:10px;
				border-radius: 10px;
				border:2px solid #00FF00;
				background:#FF0000;
				box-sizing: border-box;
				opacity: 0.7;
				cursor: pointer;
				right: 50%;
				position: relative;
			}
			#wrap>#btn>li:hover{
				background: #55007F;
			}
			.split{
				-webkit-animation: donghua 1s forwards;
				transition-duration: 0.5s;
			}
		</style>
	</head>
	<body>
		<!-- 1. 创建容器 -->
		<div id="wrap">
			<ul id="btn"></ul>
		</div>
		<script src="js/jquery-3.5.1.min.js"></script>
		<script>
			$(()=>{
				
				const array = [
					'images/1.jpg',
					'images/4.jpg',
					'images/13.jpg',
					'images/17.jpg',
					'images/2.jpg'
				]
				//上一个图片的索引(下标)
				let prev = array.length - 1
				// 定义 小格的边长  
				const side = 50
				// 计算 多少行 多少列
				const $btn = $('#btn')
				const $wrap = $('#wrap')
				const row = parseInt($wrap.height() / side)
				const column = parseInt($wrap.width() / side)
				const pos = -100 
				
				// 创建div
				function creatediv() {
					for(let i = 0; i < array.length; i++) {
						let div = $('<div></div>')
						div.css({
							'background':'url(' + array[i] + ')'
						})
						div.appendTo($wrap)
						$('<li></li>').appendTo( $btn )
					}
				}

				creatediv()
				$('#wrap>#btn>li').click(function(){
					// 去除上次创建的碎片
					$('#wrap>p').remove()
					// 获取当前点击的li的索引，对应相应的图片索引
					const index = $(this).index()
					$('#wrap>div').eq(index).fadeIn(1000).siblings('div').fadeOut(1000)
					// 取出图片 
					let img = array[prev]
					// 生成一大堆小格
					for(let i = 0 ; i <row;++i){
						for(let j=0;j<column;++j){
							const p = $('<p></p>')
							p.css({
								'width': side + 'px',
								'height': side + 'px',
								'background':'url(' + img + ')',
								'position': 'absolute',
								'top': i * side + 'px',
								'left': j * side + 'px',
								'background-position': '-' + (i * side) + 'px -' + (j * side) + 'px'
							})
							$wrap.append(p);
							setTimeout(()=>{
								p.addClass('split');
								p.css('top', pos + i * side + 'px')
								p.css('left', pos + j * side + 'px')
							}, (i+j) * 30) 
							// 为了使碎片产生斜向上的效果，使行索引+列索引相等的一起触发
						}
					}
					prev = index
				})
			})
		</script>
	</body>
</html>

antRain

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用jQuery实现图片切换碎片效果

利用jQuery实现图片切换碎片效果效果源代码效果gif制作工具源代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>碎片</title> <style> *{ margin:0; padding:0; } body{ height:100vh; display: flex;
复制链接

扫一扫

专栏目录