利用jQuery實現蘋果產品介紹動畫特效



12 47 16



特效描述:利用jQuery實現 蘋果產品 介紹動畫特效,利用jQuery實現蘋果產品介紹動畫特效

代碼結構

1. 引入JS

<script src="js/jquery.min.js"></script>

2. HTML代碼

<div class="wrapper">
  <div class="artboard">
    <div id="watch">
      <div id="crown"></div>
      <div id="button"></div>
      <div id="band-up"></div>
      <div id="band-bottom"></div>
      <div id="outline">
        <div id="screen"></div>
      </div>
    </div>
    <div id="phone" class="ready">
      <div id="outline">
        <div id="screen"></div>
      </div>
      <div id="home"></div>
      <div id="camera"></div>
      <div id="sensor"></div>
      <div id="speaker"></div>
      <div id="lock"></div>
      <div id="silent"></div>
      <div id="volume-up"></div>
      <div id="volume-down"></div>
    </div>
    <div id="laptop" class="out">
      <div id="outline">
        <div id="screen"></div>
      </div>
      <div id="keyboard"></div>
      <div id="notch"></div>
      <div id="back"></div>
      <div id="camera"></div>
    </div>
  </div>
  <div class="quote">
    <span class="highlight">Apple's<br/></span>
    <span>conquering<br/></span>
    <span>my life.</span>
  </div>
</div>
<script>
var num=0;
window.setInterval(function(){
  num++;
  var classes=['','out','ready'];
  $('#watch').removeClass();
  $('#watch').addClass(classes[num%3])
  $('#phone').removeClass();
  $('#phone').addClass(classes[(num+2)%3]);
  $('#laptop').removeClass();
  $('#laptop').addClass(classes[(num+1)%3]);
  $('.quote span').removeClass();
  $('.quote span:nth-child('+ (num%3+1) +')').addClass('highlight');
  console.log(num%3+1);
},900)
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 加載動畫 h5彈窗動畫 html5彈窗動畫 h5動畫 h5背景動畫 h5場景動畫 h53D動畫 h5界面動畫 html5動畫 h5按鈕動畫 html5按鈕動畫 h5圖片動畫 h5圖標動畫 html5圖片動畫 html5圖標動畫
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子 快乐双彩今天开奖号码 北京快三开奖查询图 排列三质合走势图 斯诺克比分直播雪缘网 平民计划腾讯分分彩 创业找项目 福州麻将手机版下载 彩乐园的极速飞艇 混合过关 像pc蛋蛋的 经典老版街机捕鱼 山西扣点点安卓官方版下载 北京pc蛋蛋包赢技巧 3d的开奖号码是多 炒股步骤 p62每期开奖结果查询