Jquery 切換class/css應用-手機demo

Developer
Eric
Size
5,519 Kb
Views
12,144
  1. Jquery 切換class/css應用-手機demo Previews
  2. Jquery 切換class/css應用-手機demo HTML Codes
  3. Jquery 切換class/css應用-手機demo CSS Codes
  4. Jquery 切換class/css應用-手機demo JS Codes

How do I make an jquery 切換class/css應用-手機demo?

What is a jquery 切換class/css應用-手機demo? How do you make a jquery 切換class/css應用-手機demo? This script and codes were developed by Eric on 07 December 2022, Wednesday.

Jquery 切換class/css應用-手機demo Previews
IQ Test

Jquery 切換class/css應用-手機demo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Jquery 切換class/css應用-手機demo</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="phone"> <div class="top"> <div class="camera"></div> </div> <div class="screen"> <div class="pages"> <div class="page page1"> <h2>Orange</h2> <h1>橘</h1> <div class="orange"></div> </div> <div class="page page2"> <h2>page2</h2> <p>橘子（學名：Citrus reticulata）是芸香科柑桔屬的一種水果。「橘」（ㄐㄩˊ）和「桔」（ㄐㄧㄝˊ）都是現代漢語規範字，然「桔」作橘子一義時，為「橘」的俗寫[1]。在廣東的一些方言中二字同音，「桔」也曾做過「橘」的二簡字。閩南語稱橘為柑仔。西南官話區的各方言中呼為「柑子」或「柑兒」。</p> </div> <div class="page page3"> <h2>page3</h2> <p>柑和橘都屬於芸香科柑橘屬的寬皮柑橘類，果實外皮肥厚，內藏瓤瓣，由汁泡和種子構成。李時珍在《本草綱目·果部》中記載：「橘實小，其瓣味微醋（即酸），其皮薄而紅，味辛而苦；柑大於橘，其瓣味酢，其皮稍厚而黃，葉辛而甘。」一般說來，柑的果形正圓，黃赤色，皮緊紋細不易剝，多汁甘香；橘的果形扁圓，紅或黃色，皮薄而光滑易剝，味微甘酸。柑和橘雖有區別，但在日常語言中常混用，如廣柑也說廣橘，蜜橘也說蜜柑。</p> </div> </div> </div> <div class="bottom"> <div class="botton">□</div> </div>
</div>
<h3 class="status">The "Best" iphone we've ever made!</h3>
<h2 class="phonename">iPhone5s</h2>
<div class="buttons"> <button class="i5">iPhone5</button> <button class="i5s">iPhone5s</button> <button class="i6">iPhone6</button> <button class="i6s">iPhone6s</button> <button class="wiggle">wiggle</button> <button class="turn">turn around</button>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Jquery 切換class/css應用-手機demo - Script Codes CSS Codes

@charset "UTF-8";
* { position: relative; font-family: 微軟正黑體; vertical-align: top;
}
html, body { width: 100%; height: 100%; margin: 0; padding: 0; background-color: #222; display: flex; justify-content: center; align-items: center; flex-direction: column;
}
.phone { width: 250px; padding: 10px; background-color: #f3f3f3; border-radius: 10px; transition-duration: 0.5s; left: 0;
}
.top { height: 40px;
}
.top .camera { width: 10px; height: 10px; border-radius: 100%; background-color: #333; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.screen { height: 350px; transition: 0.5s; cursor: pointer; overflow: hidden;
}
.screen .pages { width: 100%; height: 100%; white-space: nowrap; font-size: 0; transition: 0.5s; left: 0;
}
.screen .pages .page { width: 100%; height: 100%; background-color: #333; color: #eee; display: inline-block; font-size: initial; padding: 10px; box-sizing: border-box; white-space: normal; font-size: 12px;
}
.screen .pages .page p { margin-top: 30px;
}
.screen .pages .page h2 { color: #FFF; font-size: 20px; margin: 0;
}
.screen .pages .page:before { position: absolute; left: 0; top: 0; content: ""; display: block; width: 100%; height: 60px; background-color: #FFAD2B;
}
.screen .pages .page:after { position: absolute; left: 0; bottom: 0; content: ""; display: block; width: 100%; height: 20px; background-color: #FFAD2B;
}
.screen .pages .page1 { background-color: #FFAD2B; color: #FFF;
}
.screen .pages .page1 h2 { font-size: 20px; margin-bottom: 0px;
}
.screen .pages .page1 h1 { font-size: 30px; margin-top: 0px;
}
.screen .pages .page1 .orange { width: 300px; height: 300px; border-radius: 100%; background-color: #FF7E0C;
}
.bottom { height: 60px;
}
.bottom .botton { width: 40px; height: 40px; border-radius: 100%; border: 1px solid rgba(0, 0, 0, 0.2); color: rgba(0, 0, 0, 0.4); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 26px; cursor: pointer;
}
.bottom .botton:hover { background-color: #ddd;
}
.status, .phonename { color: #FFF; margin: 0;
}
.status { margin-top: 20px; font-size: 15px;
}
.phonename { margin: 10px;
}
.buttons { margin-top: 20px;
}
.buttons button { background-color: transparent; color: #FFF; border: 1px solid rgba(255, 255, 255, 0.2); padding: 5px 14px; border-radius: 5px; cursor: pointer;
}
.buttons button:hover { background-color: #FFF; color: #333;
}

Jquery 切換class/css應用-手機demo - Script Codes JS Codes

var button_audio=new Audio("http://www.monoame.com/awi_class/ballsound/click14.wav");
$(".i5").click(function(){ $(".phone").css("width",""); $(".screen").css("height",""); $(".phonename").text($(this).text()); button_audio.play();
});
$(".i5s").click(function(){ $(".phone").css("width","250px"); $(".screen").css("height","400px"); $(".phonename").text($(this).text()); button_audio.play();
});
$(".i6").click(function(){ $(".phone").css("width","270px"); $(".screen").css("height","440px"); $(".phonename").text($(this).text()); button_audio.play();
});
$(".i6s").click(function(){ $(".phone").css("width","300px"); $(".screen").css("height","480px"); $(".phonename").text($(this).text()); button_audio.play();
});
var screen_audio=new Audio("http://www.monoame.com/awi_class/ballsound/click18.wav");
var page=0;
$(".screen").click(function(){ page+=1; if(page>2){ page=0; } $(".pages").css("left","-"+ page*100 +"%"); screen_audio.play();
});
var home_audio=new Audio("http://www.monoame.com/awi_class/ballsound/click23.wav");
$(".bottom").click(function(){ page=0; $(".pages").css("left","-"+ page*100 +"%"); home_audio.play();
});
$(".turn").click(function(){ $(".phone").css("transform","rotate(360deg)");
});
var wiggle_audio=new Audio("http://www.monoame.com/awi_class/ballsound/phonevi.mp3");
$(".wiggle").click(function(){ wiggletime=0; wiggle_audio.play();
});
var wiggletime=21;
setInterval(function(){ wiggletime+=1; if(wiggletime%2==0){ // console.log(wiggletime); $(".phone").css("left","-30px"); }else{ $(".phone").css("left","30px"); } if(wiggletime>=21){ $(".phone").css("left",""); }
},60);
Jquery 切換class/css應用-手機demo - Script Codes
Jquery 切換class/css應用-手機demo - Script Codes
Home Page Home
Developer Eric
Username ericyericy
Uploaded December 07, 2022
Rating 3
Size 5,519 Kb
Views 12,144
Do you need developer help for Jquery 切換class/css應用-手機demo?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Eric (ericyericy) Script Codes
Name
A Pen by Eric
Pen,pineapple,apple
Vue
CSS resume
NameCard
Transition-duration
Brand Guideline
V-on
Vue add del
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!