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

My tip

如果看不到codepen playground，請重新整理頁面

See the Pen 你的 CodePen 標題 by Retsnom on CodePen.

---

index.html

<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="button">□</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">iphone6+</button>
  <button class="wiggle">wiggle</button>
  <button class="turn">turn around</button>
</div>

style.sass

*
  // border: solid 1px black
  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: #fff
  border-radius: 10px
  transition: 0.5s
  left: 0
  transform: rotate(0deg)
.top
  height: 40px
  .camera
    width: 10px
    height: 10px
    border-radius: 100%
    background-color: #333
    position: absolute
    left: 50%
    top: 50%
    transform: translate(-50%,-50%)
    
.screen
  height: 350px
  transition: 0.5s
  overflow: hidden
  cursor: pointer
  .pages
    width: 100%
    height: 100%
    white-space: nowrap
    font-size: 0px
    transition: 0.5s
    left: 0px
    .page
      font-size: initial
      display: inline-block
      background-color: #333
      width: 100%
      height: 100%
      padding: 10px
      box-sizing: border-box
      position: relative
      white-space: normal
      color: #eee
      font-size: 12px
      p
        margin-top: 30px
      h2
        color: white
        font-size: 20px
        margin: 0
      &:before
        position: absolute
        left: 0
        top: 0
        content: ""
        display: block
        background-color: #FFAB36
        width: 100%
        height: 60px

      &:after
        position: absolute
        left: 0
        bottom: 0
        content: ""
        display: block
        background-color: #FFAB36
        width: 100%
        height: 20px
    .page1
      background-color: #FFAB36
      color: white
      h2
        font-size: 20px
        margin-bottom: 0px
      h1
        font-size: 30px
        margin-top: 0px
      .orange
        width: 300px
        height: 300px
        background-color: #FF9E17
        border-radius: 100%
        
.bottom
  height: 60px
  .button
    width: 40px
    height: 40px
    border-radius: 100%
    left: 50%
    top: 50%
    transform: translate(-50%,-50%)
    text-align: center
    font-size: 25px
    color: rgba(black,0.4)
    border: solid 1px rgba(black,0.2)
    cursor: pointer
    &:hover
      background-color: #ddd
    
.status,.phonename
  color: white
  margin: 0
.status
  margin-top: 20px
  font-size: 15px
.phonename
  margin: 10px
.buttons
  margin-top: 20px
  button
    background-color: transparent
    border: solid 1px rgba(#fff,0.2)
    color: white
    padding: 5px 14px
    border-radius: 5px
    cursor: pointer
    user-select: none
    &:hover
      background-color: #fff
      color: #333

script.js

$(".i5").click(function(){
  $(".phone").css("width","");
  $(".screen").css("height","");
  $(".phonename").text($(this).text());
});
$(".i5s").click(function(){
  $(".phone").css("width","250px");
  $(".screen").css("height","420px");
  $(".phonename").text($(this).text());
});
$(".i6").click(function(){
  $(".phone").css("width","270px");
  $(".screen").css("height","440px");
  $(".phonename").text($(this).text());
});
$(".i6s").click(function(){
  $(".phone").css("width","300px");
  $(".screen").css("height","480px");
  $(".phonename").text($(this).text());
});

let page = 0
$(".screen").click(function(){
  page+=1;
  if(page>2){
    page=0;
  }
  $(".pages").css("left","-"+page*100+"%");
});

$(".button").click(function(){
  page=0;
  $(".pages").css("left","-"+page*100+"%");
});
let degree = 0; 
$(".turn").click(function () {
  if (degree === 0) {
    $(".phone").css("transform", "rotate(360deg)");
    degree = 360;
  } else {
    $(".phone").css("transform", "rotate(0deg)");
    degree = 0;
  }
});
$(".wiggle").click(function(){
  wiggletime=0;
});

let wiggletime=21;
setInterval(function(){
  if(wiggletime<=20){
    wiggletime+=1;
    if(wiggletime%2===0){
      $(".phone").css("left","-30px");
    }else{
      $(".phone").css("left","30px");
    }
    if(wiggletime===21){
      $(".phone").css("left","");
    }
  }
})

---

Please note

這個內容是來自吳哲宇老師的動畫互動網頁程式入門 (HTML/CSS/JS) 課程