利用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

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

老夫子电子 25选5走势 北京pk10手机投注中心 多乐彩软件 河北快3开奖官网 篮彩胜分差复式 白山棋牌游戏中心 西游战记能赚钱吗 simcity卡机怎么赚钱 银河棋牌赢钱的有吗 排列3和值走势图1000期 竞彩篮球胜分差全包 北京快3遗漏二码一定牛 触手tv直播平台怎么赚钱 福利彩票欢乐生肖官网 11选5选号 计算 公式 南来北往《二肖中特》实力资料