jquery实现一个大转盘抽奖代码-html代码-BFW代码库

jquery实现一个大转盘抽奖代码

代码语言：html

所属分类：大转盘

代码描述：jquery实现一个大转盘抽奖代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html><head>

	<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
		<meta charset="utf-8">

		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				overflow: hidden;
			}

			.main {
				width: 500px;
				height: 500px;
				background-color: #ff8181;
				border-radius: 50%;
				/* overflow: hidden; */
				position: relative;
				margin: 50px auto 0;
				box-shadow: 1px 1px 5px 2px #999;
			}

			.cj-disc {
				width: 460px;
				height: 460px;
				border-radius: 50%;
				border: 10px dotted #ffec89;
				position: absolute;
				top: 10px;
				left: 10px;
				transform: rotate(90deg);
				transition-timing-function: cubic-bezier(0.5, 0.2, 0, 1);
			}

			.cj-disc .list {
				width: 440px;
				height: 440px;
				border-radius: 50%;
				position: absolute;
				left: 10px;
				top: 10px;
				/* background-color: #007bff; */
				overflow: hidden;
				box-shadow: 0 0 3px 1px #333;
			}

			.cj-disc .center {
				width: 0px;
				height: 0px;
				position: absolute;
				left: 220px;
				top: 220px;
			}

			.cj-disc .list .item {
				position: absolute;
				width: 0px;
				height: 0px;
				top: -220px;
				border-color: transparent;
				border-style: solid;
				border-width: 220px;

				/* transform-origin: 0px 0px; */
				/* transform: rotate(5deg); */

			}

			.item:nth-child(odd) {
				border-top-color: #ff814f !important;
			}

			.item:nth-child(even) {
				border-top-color: #ffec89 !important;
			}

			.item p {
				position: absolute;
				top: -215px;
				line-height: 17px;
				font-size: 16px;
				left: -7.5px;
			}

			.pointer {
				width: 60px;
				height: 60px;
				position: absolute;
				border-radius: 50%;
				top: 220px;
				left: 220px;
				z-index: 1;
				background-color: #ff5959;
				box-shadow: 0 3px 5px 1px #333;
			}

			.before {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				border-radius: 50%;
				background-color: #ff5959;
				text-align: center;
				cursor: pointer;

			}

			.before:hover p {

				text-shadow: 0 0 10px #ffec89;
			}

			.before p {
				cursor: pointer;
				line-height: 16px;
				color: #ffec89;
			}

			.before p:nth-child(1) {
				margin-top: 13px;
			}

			.pointer .line {
				width: 120px;
				position: relative;
				height: 10px;
				background-color: #ff5959;
				margin-top: 25px;
				margin-left: 50px;
				box-shadow: 0 3px 5px 1px #333;
			}

			.line-before {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				background-color: #ff5959;

			}

			.arrow {
				width: 0;
				height: 0;
				position: absolute;
				right: -30px;
				top: -10px;
				color: #ff5959;
				font-size: 30px;
				transform: rotate(90deg);
				text-shadow: 3px 0px 5px #333;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="cj-disc">
				<div class="list">
					<div class="center">
					<div class="item" style="transform: rotate(0deg); left: -71.4823px; border-left-width: 71.4823px; border-right-width: 71.4823px;"><p>0等奖</p></div><div class="item" style="transform: rotate(36deg); left: -71.4823px; border-left-width: 71.4823px; border-right-width: 71.4823px;"><p>1等奖</p></div><div class="item" style="transform: rotate(72deg); left: -71.4823px; border-left-width: 71.4823px; border-right-width: 71.4823px;"><p>2等奖</p></div><div class="item" style="transform: rotate(108deg); left: -71.4823px; border-left-width: 71.4823px; border-right-width: 71.4823px;"><p>3等奖</p></div><div class="item" style="transform: rotate(.........完整代码请登录后点击上方下载按钮下载查看