结合jQuery+CSS3的酷炫特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是结合jQuery+CSS3的酷炫特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
	<title>abc</title>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	<script type="text/javascript" src="js/jquery-css-transform.js"></script>
	<script type="text/javascript" src="js/jquery-animate-css-rotate-scale.js"></script>
	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
</head>
<body>
<div id="wrapper">
	<h1>jQuery DJ Chinaz<small>Useless CSS3 and jQuery fun</small></h1>
	<div id="content">
		<div class="center">
			<p id="playbutton"><img src="images/btn-play.png" alt="Play" id="playbtn" /></p>
		</div>
		<div id="dj">
			<div class="needle" id="needle1"></div>
			<div class="vinyl" id="vinyl1"></div>
			<div class="needle" id="needle2"></div>
			<div class="vinyl" id="vinyl2"></div>
			<div id="buttons">
				<div id="leftbtns">
					<div id="slowbutton1"><img src="images/btn-slow.png" alt="Slow" /></div>
					<div id="speedbutton1"><img src="images/btn-fast.png" alt="Fast" /></div>
				</div>
				<div id="rightbtns">
					<div id="slowbutton2"><img src="images/btn-slow.png" alt="Slow" /></div>	
					<div id="speedbutton2"><img src="images/btn-fast.png" alt="Fast" /></div>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
</html>

JS代码(script.js):

/** Author:Marco Kuiper (http://www.marcofolio.net/)*/
google.load("jquery","1.3.1");
	google.setOnLoadCallback(function(){
	// Variable to store if the records are spinningvar playing = false;
	// Variable to store if the mouse is down (to enable scratching)var mousedown = false;
	// Function to be called when the play button is clicked.// It changes from "play" to "pause" when records are spinning// and starts both the vinyls.$("#playbutton").click(function(){
	checkButtons();
	if(playing){
	// Pause$("#playbtn").attr("src","images/btn-play.png");
	playing = false;
	$(".vinyl").each(function(){
	// Clear the interval from the vinyl// to stop spinningvar intervalHandle = $(this).data('intervalHandle');
	clearInterval(intervalHandle);
	$(this).css({
	'cursor':'default'}
).stop().animate({
	rotate:'+=40deg'}
,800,'easeOutCubic');
}
);
}
else{
	// Play$("#playbtn").attr("src","images/btn-pause.png");
	playing = true;
	$(".vinyl").each(function(){
	$(this).css({
	'cursor':'move'}
).data('rotationAngle',10);
	startSpinning($(this));
}
);
}
}
);
	// Handle the "mouseDown" to enable scratching// We can't combine "mouseDown" with "mouseMove",so we'll need// to set a boolean (mousedown).// We're also clearing the intervals to prevent spinning$(".vinyl").mousedown(function(e){
	var intervalHandle = $(this).data('intervalHandle');
	clearInterval(intervalHandle);
	mousedown = true;
}
).mouseup(function(){
	mousedown = false;
	if(playing){
	startSpinning($(this));
}
}
);
	// When mousedown is true and the records are playing,// we can scratch the vinyls. This is where the code can be improved,// since we only register X-movement$(".vinyl").mousemove(function(e){
	if(mousedown && playing){
	var intervalHandle = $(this).data('intervalHandle');
	clearInterval(intervalHandle);
	$(this).rotate(e.pageX % 360);
}
}
);
	// Handlers for each speed button (slow or faster)$("#speedbutton1").click(function(){
	if($(this).data('isEnabled')){
	$("#vinyl1").data('rotationAngle',$("#vinyl1").data('rotationAngle') + 10);
}
checkButtons();
}
);
	$("#slowbutton1").click(function(){
	if($(this).data('isEnabled')){
	$("#vinyl1").data('rotationAngle',$("#vinyl1").data('rotationAngle') - 10);
}
checkButtons();
}
);
	$("#speedbutton2").click(function(){
	if($(this).data('isEnabled')){
	$("#vinyl2").data('rotationAngle',$("#vinyl2").data('rotationAngle') + 10);
}
checkButtons();
}
);
	$("#slowbutton2").click(function(){
	if($(this).data('isEnabled')){
	$("#vinyl2").data('rotationAngle',$("#vinyl2").data('rotationAngle') - 10);
}
checkButtons();
}
);
	/*** Start spinning those vinyls by the given element. Set an interval to keep the vinyl spinning* and attach it to the element to keep a reference for clearing later.**/
function startSpinning(element){
	element.stop().animate({
	rotate:'+=40deg'}
,800,'easeInCubic',function(){
	var intervalHandle = setInterval( function (){
	element.animate({
	rotate:'+=' + element.data('rotationAngle') + 'deg'}
,0);
}
,25);
	element.data('intervalHandle',intervalHandle);
}
);
}
/*** Check if the buttons needs to be changed**/
function checkButtons(){
	if($("#vinyl1").data('rotationAngle') == 0){
	$("#slowbutton1").data('isEnabled',false).children().attr("src","images/btn-slow-dis.png");
}
else{
	$("#slowbutton1").data('isEnabled',true).children().attr("src","images/btn-slow.png");
}
if($("#vinyl1").data('rotationAngle') == 50){
	$("#speedbutton1").data('isEnabled',false).children().attr("src","images/btn-fast-dis.png");
}
else{
	$("#speedbutton1").data('isEnabled',true).children().attr("src","images/btn-fast.png");
}
if($("#vinyl2").data('rotationAngle') == 0){
	$("#slowbutton2").data('isEnabled',false).children().attr("src","images/btn-slow-dis.png");
}
else{
	$("#slowbutton2").data('isEnabled',true).children().attr("src","images/btn-slow.png");
}
if($("#vinyl2").data('rotationAngle') == 50){
	$("#speedbutton2").data('isEnabled',false).children().attr("src","images/btn-fast-dis.png");
}
else{
	$("#speedbutton2").data('isEnabled',true).children().attr("src","images/btn-fast.png");
}
}
}
);

CSS代码(style.css):

/* __ _ _ _ / _| | (_) | | _ __ ___ __ _ _ __ ___ ___ | |_ ___ | |_ ___ _ __ ___| |_| '_ ` _ \ / _` | '__/ __/ _ \| _/ _ \| | |/ _ \ | '_ \ / _ \ __|| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | | __/ |_|_| |_| |_|\__,_|_| \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|*/
/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0;}
/* HTML ELEMENTS */
body{background-image:url("../images/wood_bg.jpg");}
h1{font:bold 65px/60px Helvetica,Arial,Sans-serif;text-align:center;color:#eee;text-shadow:0px 2px 6px #333;}
h1 small{font-size:20px;text-transform:uppercase;letter-spacing:14px;display:block;color:#ccc;}
h2 a{display:block;text-decoration:none;margin:0 0 30px 0;font:italic 45px Georgia,Times,Serif;text-align:center;color:#bfe1f1;text-shadow:0px 2px 6px #333;}
h2 a:hover{color:#90bcd0;}
/* COMMON CLASSES */
.break{clear:both;}
/* WRAPPER */
#wrapper{width:800px;margin:40px auto;}
/* CONTENT */
#content{}
/* DJ */
#dj{width:760px;margin:0 auto;}
.center{margin:0 auto;width:128px;}
#playbutton{text-align:center;cursor:pointer;width:128px;}
.vinyl{width:370px;height:370px;float:left;margin:0 5px;}
#vinyl1{background-image:url("../images/vinyl1.png");}
#vinyl2{background-image:url("../images/vinyl2.png");}
.needle{width:50px;height:76px;position:absolute;background-image:url("../images/needle.png");z-index:99;}
#needle1{margin-left:300px;}
#needle2{margin-left:680px;}
#buttons{z-index:9999;clear:both;}
#buttons img{cursor:pointer;}
#buttons div{float:left;margin-top:25px;}
#leftbtns{margin-left:60px;}
#rightbtns{margin-left:120px;}

附件:下载该文件资源,减少时间成本(增值服务)