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

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

      • 效果
      • 源代码

效果

  • gif制作工具

源代码


<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>
		
		<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.css({ 'background':'url(' + array[i] + ')' }) div.appendTo($wrap) $('
  • '
    ).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.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>

    你可能感兴趣的:(前端)