15:41

html 板块360旋转效果特效

Bylxcss

5月 16, 2022

html 板块360旋转效果特效缩略图


<!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>图片旋转展示</title>
		<style>
			#show {
				position: relative;
	
				/* margin: 20px auto; */
				margin: 460px 0 0 300px;
				width: 1000px;
				/* height: 1200px; */
				/* border: 1px solid red; */
			}
			.item_box{
				position: absolute;
				top: 0;
				left: 0;
				height: 258px;
				width: 368px;
				/* background: #999999; */
				/* border: 1px solid #eeeeee; */
				cursor: pointer;
			}
			.item {
				position: absolute;
				top: 0;
				left: 0;
				height: 258px;
				width: 368px;
				cursor: pointer;
				
			}
			.ms{
				position: absolute;
				top: -180px;
				left: 20px;
				width: 280px;
				height: 218px;
				opacity: 0.8;
				background-image: url(http://ys.xxxyin.cn/img/tc.png);
				background-position: center;
				background-repeat: no-repeat;
				background-size: 280px 218px;
				padding: 32px 20px;
				box-sizing: border-box;
				display: none;
			}
			html{
				padding: 0;
				margin: 0;
				width: 1920px;
				height: 1080px;
				background-image: url(http://ys.xxxyin.cn/img/bg.png);
				background-size: 1920px 1080px;
				background-repeat: no-repeat;
				background-position: left top;
			}
			.content{
				width: 224px;
				height: 62px;
				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 24px;
				margin-left: 6px;
			}
			.title{
				font-size: 20px;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #22F3E2;
				margin-left: 6px;
			}
			.xian{
				width: 245px;
				height: 2px;
				background-color:#00F4FD ;
				margin: 10px 0 22px;
			}
			body{
				
				}
		</style>
		
	</head>
	<body>
		<!-- <input id="l" type="button" value="left">
		<input id="r" type="button" value="right"> -->
		<div id="show">
			<div class="item_box" onclick="toshow(1)">
				<img class="item" src="http://ys.xxxyin.cn/img/1.png" />
				<div class="ms">
					<div class="title">库存管理</div>
					<div class="xian"></div>
					<div class="content">数据类型：合同管理数据类型合同管理数据类型：合同管理数据类型合同管理数据类型合同管理</div>
				</div>
			</div>
			<div class="item_box" onclick="toshow(2)">
				<img class="item" src="http://ys.xxxyin.cn/img/2.png" />
				<div class="ms">
					<div class="title">库存管理2</div>
					<div class="xian"></div>
					<div class="content">数据类型：合同管理数据类型合同管理数据类型：合同管理数据类型合同管理数据类型合同管理</div>
				</div>
			</div>
			<div class="item_box" onclick="toshow(3)">
				<img class="item" src="http://ys.xxxyin.cn/img/3.png" />
				<div class="ms">
					<div class="title">库存管理3</div>
					<div class="xian"></div>
					<div class="content">数据类型：合同管理数据类型合同管理数据类型：合同管理数据类型合同管理数据类型合同管理</div>
				</div>
			</div>
			<div class="item_box" onclick="toshow(4)">
				<img class="item" src="http://ys.xxxyin.cn/img/4.png" />
				<div class="ms">
					<div class="title">库存管理4</div>
					<div class="xian"></div>
					<div class="content">数据类型：合同管理数据类型合同管理数据类型：合同管理数据类型合同管理数据类型合同管理</div>
				</div>
			</div>
			<div class="item_box" onclick="toshow(5)">
				<img class="item" src="http://ys.xxxyin.cn/img/5.png" />
				<div class="ms">
					<div class="title">库存管理5</div>
					<div class="xian"></div>
					<div class="content">数据类型：合同管理数据类型合同管理数据类型：合同管理数据类型合同管理数据类型合同管理</div>
				</div>
			</div>
			<div class="item_box" onclick="toshow(6)">
				<img class="item" src="http://ys.xxxyin.cn/img/6.png" />
				<div class="ms">
					<div class="title">库存管理6</div>
					<div class="xian"></div>
					<div class="content">数据类型：合同管理数据类型合同管理数据类型：合同管理数据类型合同管理数据类型合同管理</div>
				</div>
			</div>
			<div class="item_box" onclick="toshow(7)">
				<img class="item" src="http://ys.xxxyin.cn/img/7.png" />
				<div class="ms">
					<div class="title">库存管理7</div>
					<div class="xian"></div>
					<div class="content">数据类型：合同管理数据类型合同管理数据类型：合同管理数据类型合同管理数据类型合同管理</div>
				</div>
			</div>
			<div class="item_box" onclick="toshow(8)">
				<img class="item" src="http://ys.xxxyin.cn/img/8.png" />
				<div class="ms">
					<div class="title">库存管理8</div>
					<div class="xian"></div>
					<div class="content">数据类型：合同管理数据类型合同管理数据类型：合同管理数据类型合同管理数据类型合同管理</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		var len;
		var showerObj;
		var listObj;
		var showerWidth = 1000;
		var showerHeight = 0;
		var r;
		var cR = 0;
		var ccR = 0;
		var timer = 0;
		window.onload = function() {
			showerObj = document.getElementById("show");
			listObj=showerObj.getElementsByClassName('item_box')
			listObj1 = showerObj.getElementsByTagName("img");	
			
			len = listObj.length;
			// console.log(listObj2.length)
			r = Math.PI / 180 * 360 / len;
			for (var i = 0; i < len; i++) {
				var item = listObj[i];
				// var item1 = listObj2[i]
				item.style.top = showerHeight / 2 + Math.sin(r * i) * showerWidth / 2  + "px";
				item.style.left = showerWidth / 2 + Math.cos(r * i) * showerWidth / 2 + "px";
				item.rotate = (r * i + 2 * Math.PI) % (2 * Math.PI);
			}
			var rX = showerObj.offsetLeft + showerWidth / 2;
			var ry = showerObj.offsetTop + showerHeight / 2;
			var rotate = function() {
				ccR = (ccR + 2 * Math.PI) % (2 * Math.PI);
				if (cR - ccR < 0) cR = cR + 2 * Math.PI;
				if (cR - ccR < Math.PI) {
					ccR = ccR + (cR - ccR) / 19;
				} else {
					ccR = ccR - (2 * Math.PI + ccR - cR) / 19;
				}
				if (Math.abs((cR + 2 * Math.PI) % (2 * Math.PI) - (ccR + 2 * Math.PI) % (2 * Math.PI)) < Math.PI /
					720) {
					ccR = cR;
					clearInterval(timer);
					timer = 0;
				}
				for (var i = 0; i < len; i++) {
					var item = listObj[i];
					var item1 = listObj1[i];
					var w, h;
					console.log(r*i + ccR)
					var sinR = Math.sin(r * i + ccR);
					var cosR = Math.cos(r * i + ccR);
					w = 260 + 0.3 * 260 * sinR;
					h = (180 + 0.3 * 180 * sinR);
					// item.style.cssText += ";width:" + w + "px;height:" + h + "px;top:" + parseInt(showerHeight / 2 +
					// 	sinR * showerWidth / 2 / 3 - w / 2) + "px;left:" + parseInt(showerWidth / 2 + cosR *
					// 	showerWidth / 2 - h / 2) + "px;z-index:" + parseInt(showerHeight / 2 - sinR *
					// 	showerWidth / 2 / 3 + w / 2) + ";";
					opacity= w < 260 ? 0.5 : 1
					item1.style.cssText += ";width:" + w + "px;opacity:"+ opacity+";height:" + h + "px;z-index:" + parseInt(showerHeight / 2 - sinR *
						showerWidth / 2 / 3 + w / 2) + ";";
					item.style.cssText += ";width:" + w + "px;height:" + h + "px;top:" + parseInt(showerHeight +
						sinR * showerWidth / 3.2 ) + "px;left:" + parseInt(showerWidth / 2 + cosR *
						showerWidth/2.4 ) + "px;z-index:" + parseInt(-showerHeight / 2 + sinR *
						showerWidth / 2 / 3 - w / 2) + ";";
				}
			}
			setInterval(function(){
				cR = (cR + r + 2 * Math.PI) % (2 * Math.PI);
				timer || (timer = setInterval(rotate, 10));
			},1000)
			// document.getElementById("l").onclick = function() {
			// 	cR = (cR + r + 2 * Math.PI) % (2 * Math.PI);
			// 	timer || (timer = setInterval(rotate, 10));
			// }
			// document.getElementById("r").onclick = function() {
			// 	cR = (cR - r + 2 * Math.PI) % (2 * Math.PI);
			// 	timer || (timer = setInterval(rotate, 10));
			// }
			rotate();
			toshow = function(v) {
				console.log(v)
				listObj2=showerObj.getElementsByClassName('ms')
				len = listObj2.length
				for (var i = 0; i < len; i++) {
					listObj2[i].style.display="none"
				}
				listObj2[v-1].style.display="block"
			}
	
		}
	</script>
</html>

By lxcss

Related Post

分享网页的标题简介图片怎么设置

10月 8, 2023 lxcss

Blocked a frame with origin “” from accessing a cross-origin frame.

7月 1, 2023 lxcss

apple-touch-icon 图标尺寸大小设置

6月 18, 2023 lxcss

发表评论取消回复