<sub id="xt3p5"><listing id="xt3p5"><thead id="xt3p5"></thead></listing></sub>

    <track id="xt3p5"><big id="xt3p5"><em id="xt3p5"></em></big></track>

    <menuitem id="xt3p5"><dfn id="xt3p5"></dfn></menuitem>
      <track id="xt3p5"></track>
      <pre id="xt3p5"></pre>

          <form id="xt3p5"></form>

          [科技]手風琴式焦點圖jQuery特效

            手風琴式焦點圖jQuery特效是一款鼠標點擊人物圖像滑動切換案例說明信息代碼。效果圖如下:

            實現的代碼。

            html代碼:

           <div class="ag-content-customer-wrap">
                  <div class="ag-content-customer">
                      <div class="ag-content-customer-ele">
                          <div class="ag-content-customer-ele-shadow">
                          </div>
                          <span>傳統企業主</span>
                          <img src="images/ag-customer-tradition_ad3bf6f.png" data-hover="77" data-normal="85" />
                      </div>
                      <div class="ag-content-customer-ele">
                          <div class="ag-content-customer-ele-shadow">
                          </div>
                          <span>淘寶掌柜</span>
                          <img src="images/ag-customer-taobao_a9d7af6.png" style="left: 65px;" data-hover="57"
                              data-normal="65" />
                      </div>
                      <div class="ag-content-customer-ele">
                          <div class="ag-content-customer-ele-shadow">
                          </div>
                          <span>中小企業主</span>
                          <img src="images/ag-customer-small_35b8744.png" style="left: 96px;" data-hover="88"
                              data-normal="96" />
                      </div>
                      <div class="ag-content-customer-ele">
                          <div class="ag-content-customer-ele-shadow">
                          </div>
                          <span>大品牌客戶</span>
                          <img src="images/ag-customer-brand_9ca1bac.png" style="left: 83px;" data-hover="75"
                              data-normal="83" />
                      </div>
                      <div class="ag-content-customer-ele">
                          <div class="ag-content-customer-ele-shadow">
                          </div>
                          <span>搜索引擎廣告主</span>
                          <img src="images/ag-customer-search_83f9a60.png" style="left: 56px;" data-hover="48"
                              data-normal="56" />
                      </div>
                      <div class="ag-content-customer-ele">
                          <div class="ag-content-customer-ele-shadow">
                          </div>
                          <span>網站主</span>
                          <img src="images/ag-customer-web_d2729dd.png" style="left: 83px;" data-hover="75"
                              data-normal="83" />
                      </div>
                      <div class="ag-content-customer-ele-detail">
                          <ul>
                              <li class="acced-li-1"></li>
                              <li class="acced-li-2"></li>
                              <li class="acced-li-3"></li>
                              <li class="acced-li-4"></li>
                              <li class="acced-li-5"></li>
                              <li class="acced-li-6"></li>
                          </ul>
                          <div class="ag-content-customer-ele-detail-display">
                              <div class="ag-content-customer-ele-detail-display-left">
                                  <img src="images/ag-customer-tradition_ad3bf6f.png" />
                              </div>
                              <div class="ag-content-customer-ele-detail-display-right">
                                  <span style="top: 30px; right: 0px;">
                                      <img src="images/ag-customer-tradition-txt_d2077c8.png" /></span> <a href="/products/weixin"
                                          class="agwyx" style="top: 190px; left: 262px;">AG微營銷</a>
                              </div>
                          </div>
                          <div class="ag-content-customer-ele-detail-display">
                              <div class="ag-content-customer-ele-detail-display-left">
                                  <img src="images/ag-customer-taobao_a9d7af6.png" />
                              </div>
                              <div class="ag-content-customer-ele-detail-display-right">
                                  <span style="top: 30px; right: 0px;">
                                      <img src="images/ag-customer-taobao-txt_2d1d5db.png" /></span> <a href="/products/dsp"
                                          class="agwm" style="top: 190px; left: 262px;">AG網盟</a>
                              </div>
                          </div>
                          <div class="ag-content-customer-ele-detail-display">
                              <div class="ag-content-customer-ele-detail-display-left">
                                  <img src="images/ag-customer-small_35b8744.png" />
                              </div>
                              <div class="ag-content-customer-ele-detail-display-right">
                                  <span style="top: 27px; left: 0px; text-align: right;">
                                      <img src="images/ag-customer-small-txt-1_c935044.png" /></span> <span class="point"
                                          style="top: 88px; right: 158px;">></span> <a href="/products/dsp" class="agwm" style="top: 40px;
                                              right: 0px;">AG網盟</a> <span style="top: 235px; left: 50px; text-align: right;">
                                                  <img src="images/ag-customer-small-txt-2_b08da8b.png" /></span>
                                  <span class="point" style="top: 262px; right: 158px;">></span> <a href="/products/reporting-analytics"
                                      class="aggg" style="top: 210px; right: 0px;">AG廣告效果分析平臺</a>
                              </div>
                          </div>
                          <div class="ag-content-customer-ele-detail-display">
                              <div class="ag-content-customer-ele-detail-display-left">
                                  <img src="images/ag-customer-brand_9ca1bac.png" />
                              </div>
                              <div class="ag-content-customer-ele-detail-display-right">
                                  <span style="top: 46px; left: 10px; text-align: right;">
                                      <img src="images/ag-customer-brand-txt-1_ad914ee.png" /></span> <span class="point"
                                          style="top: 88px; right: 158px;">></span> <a href="/products/enterprise" class="agxt"
                                              style="top: 40px; right: 0px;">AG廣告系統旗艦版</a> <span style="top: 220px; left: -18px;
                                                  text-align: right;">
                                                  <img src="images/ag-customer-brand-txt-2_b3dd522.png" /></span>
                                  <span class="point" style="top: 262px; right: 158px;">></span> <a href="/products/dsp"
                                      class="agwm" style="top: 210px; right: 0px;">AG網盟</a>
                              </div>
                          </div>
                          <div class="ag-content-customer-ele-detail-display">
                              <div class="ag-content-customer-ele-detail-display-left">
                                  <img src="images/ag-customer-search_83f9a60.png" />
                              </div>
                              <div class="ag-content-customer-ele-detail-display-right">
                                  <span style="top: 30px; right: 20px;">
                                      <img src="images/ag-customer-search-txt_592f82b.png" /></span> <a href="/products/smb"
                                          class="jjzs" style="top: 190px; left: 92px;">AG競價助手</a> <a 
                                              class="tgrb" style="top: 190px; left: 262px;">推廣日報</a> <a href="/products/ag360editor"
                                                  class="ag360" style="top: 190px; left: 432px;">AG360營銷助手</a>
                              </div>
                          </div>
                          <div class="ag-content-customer-ele-detail-display">
                              <div class="ag-content-customer-ele-detail-display-left">
                                  <img src="images/ag-customer-web_d2729dd.png" />
                              </div>
                              <div class="ag-content-customer-ele-detail-display-right">
                                  <span style="top: 60px; right: 60px;">
                                      <img src="images/ag-customer-web-txt_c205aff.png" /></span> <a href="/products/reporting-analytics"
                                          class="aggg" style="top: 190px; left: 262px;">AG廣告效果分析平臺</a>
                              </div>
                          </div>
                          <div class="ag-content-customer-ele-detail-return">
                              <span><</span>重選角色</div>
                      </div>
                  </div>
              </div>

            js代碼:

          var ctrlBar = false;
          
                  var float_timer = null;
                  var float_max_X;
                  var float_max_Y;
                  var float_ctrl_X = true;
                  var float_ctrl_Y = true;
                  $(function () {
                      float_max_X = $(window).width();
                      float_max_Y = $(window).height();
                  });
                  function showVideoImage() {
                      if ($('.vjs-poster').css('display') == 'none') {
                          $('.vjs-poster').addClass('index').show();
                      } else {
                          setTimeout('showVideoImage()', 50);
                      }
                  }
          
                  function startMove() {
                      var obj = $('#floatAdv');
                      var limit_X = float_max_X - obj.width();
                      var limit_Y = float_max_Y - obj.height();
                      float_timer = setInterval(function () {
                          var _x = parseInt(obj.css('left'));
                          var _y = parseInt(obj.css('top'));
                          if (_x >= limit_X) {
                              float_ctrl_X = false;
                          }
                          if (_x <= 0) {
                              float_ctrl_X = true;
                          }
                          if (_y >= limit_Y) {
                              float_ctrl_Y = false;
                          }
                          if (_y <= 0) {
                              float_ctrl_Y = true;
                          }
                          if (float_ctrl_X) {
                              _x += 1;
                          } else {
                              _x -= 1;
                          }
                          if (float_ctrl_Y) {
                              _y += 1;
                          } else {
                              _y -= 1;
                          }
                          obj.css({
                              'left': _x + 'px',
                              'top': _y + 'px'
                          });
                      }, 10);
                  }
          
                  function endMove() {
                      clearInterval(float_timer);
                  }
          
                  $(document).ready(function () {
                      $('.ag-header ul li:eq(0)').addClass('current-page');
                      showVideoImage();
          
                      $('#floatAdv').mouseenter(function () {
                          endMove();
                      });
                      $('#floatAdv').mouseleave(function () {
                          startMove();
                      });
                      $('#floatAdv span').click(function (e) {
                          endMove();
                          $('#floatAdv').attr('href', 'javascript:;').removeAttr('target').hide();
                      });
          
                      $(".ag-content-customer-ele").bind("mouseenter mouseleave", function (e) {
                          var w = $(this).width();
                          var h = $(this).height();
                          var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
                          var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
                          var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
                          if (e.type == 'mouseenter') {
                              // 0:up - 1:right - 2:down - 3:left
                              if (direction == 0) {
                                  $(this).find('div').css({
                                      'top': '-470px',
                                      'left': '0px'
                                  });
                                  $(this).find('div').animate({ 'top': 0 }, { queue: false, duration: 300 });
                              } else if (direction == 2) {
                                  $(this).find('div').css({
                                      'top': '470px',
                                      'left': '0px'
                                  });
                                  $(this).find('div').animate({ 'top': 0 }, { queue: false, duration: 300 });
                              } else if (direction == 1) {
                                  $(this).find('div').css({
                                      'top': '0px',
                                      'left': '167px'
                                  });
                                  $(this).find('div').animate({ 'left': 0 }, { queue: false, duration: 300 });
                              } else if (direction == 3) {
                                  $(this).find('div').css({
                                      'top': '0px',
                                      'left': '-167px'
                                  });
                                  $(this).find('div').animate({ 'left': 0 }, { queue: false, duration: 300 });
                              }
                              $(this).find('span').css('color', '#fff');
                              $(this).find('img').animate({ 'left': $(this).find('img').attr('data-hover') }, { queue: false, duration: 200 });
                          } else {
                              if (direction == 0) {
                                  $(this).find('div').animate({ 'top': -470 }, { queue: false, duration: 300 });
                              } else if (direction == 2) {
                                  $(this).find('div').animate({ 'top': 470 }, { queue: false, duration: 300 });
                              } else if (direction == 1) {
                                  $(this).find('div').animate({ 'left': 167 }, { queue: false, duration: 300 });
                              } else if (direction == 3) {
                                  $(this).find('div').animate({ 'left': -167 }, { queue: false, duration: 300 });
                              }
                              $(this).find('span').css('color', '#262626');
                              $(this).find('img').animate({ 'left': $(this).find('img').attr('data-normal') }, { queue: false, duration: 200 });
                          }
                      });
          
                      $(".ag-content-customer-ele").bind('click', function (e) {
          
                          var navIndex = $(e.target).parent().index();
                          $('.ag-content-customer-ele-detail ul li').removeClass('current');
                          $('.ag-content-customer-ele-detail ul li').eq(navIndex).addClass('current');
          
                          $('.ag-content-customer-wrap').css('background-color', '#469acb');
                          $('.ag-content-customer-ele').animate({ 'width': 0 }, 500);
          
                          $('.ag-content-customer-ele-detail').animate({ 'width': 1002 }, {
                              duration: 500,
                              complete: function () {
                                  $('.ag-content-customer-ele-detail ul li').eq(navIndex).click();
                              }
                          });
                      });
          
                      $('.ag-content-customer-ele-detail-return').bind('click', function (e) {
          
                          $('.ag-content-customer-wrap').css('background-color', '#f1f1f1');
                          $('.ag-content-customer-ele-detail').css('overflow', 'hidden');
                          $('.ag-content-customer-ele').animate({ 'width': 167 }, 500);
                          $('.ag-content-customer-ele-detail').animate({ 'width': 0 }, 500);
                          $('.ag-content-customer-ele-detail-display').hide();
                      });
          
                      $('.ag-content-customer-ele-detail ul li').bind('click', function () {
          
                          $('.ag-content-customer-ele-detail ul li').removeClass('current');
                          $(this).addClass('current');
                          $('.ag-content-customer-ele-detail').css('overflow', 'visible');
          
                          var disIndex = $(this).index();
                          $('.ag-content-customer-ele-detail-display').hide();
                          $('.ag-content-customer-ele-detail-display').eq(disIndex).show();
          
                          // IE
                          if ("ActiveXObject" in window) {
                              $('.ag-content-customer-ele-detail-display-left').css({
                                  'left': '0px',
                                  'opacity': '1'
                              });
                              $('.ag-content-customer-ele-detail-display-right').css({
                                  'right': '-120px',
                                  'opacity': '1'
                              });
                              $('.ag-content-customer-ele-detail-display-left').eq(disIndex).animate({ 'left': 120 }, { duration: 1000, easing: 'easeOutQuint' });
                              $('.ag-content-customer-ele-detail-display-right').eq(disIndex).animate({ 'right': 0 }, { duration: 1000, easing: 'easeOutQuint' });
                          }
                      });
          
                      $('body').on('click', '.vjs-big-play-button', function () {
                          $(this).hide();
                          ctrlBar = true;
                          $('.vjs-control-bar').removeClass('vjs-fade-out').addClass('vjs-fade-in');
                      });
          
                      $('.ag-content-app-wytgg-right').click(function () {
                          if (!$('#ag-app-video').hasClass('vjs-playing')) {
                              $('.vjs-big-play-button').css('display', 'none');
                              ctrlBar = true;
                              $('.vjs-control-bar').removeClass('vjs-fade-out').addClass('vjs-fade-in');
                          }
                      });
          
                      // IE7
                      if (window.navigator.userAgent.indexOf('MSIE 7.0') >= 0) {
                          $('#ag-app-video').css({
                              'width': '570px',
                              'height': '380px',
                              'position': 'relative'
                          });
                          $('#ag-app-video').find('div.vjs-poster').css({
                              'width': '570px',
                              'height': '380px',
                              'position': 'absolute',
                              'top': '0px'
                          });
                          $('.vjs-big-play-button').css({
                              'width': '100px',
                              'height': '100px',
                              'position': 'absolute',
                              'top': '140px',
                              'left': '235px'
                          });
                          $('.ag-content-app-wytgg-right').css('overflow', 'hidden');
                      } else {
                          $('.ag-content-app-wytgg-right').hover(
                          function () {
                              if (ctrlBar) {
                                  $('.vjs-control-bar').removeClass('vjs-fade-out').addClass('vjs-fade-in');
                              }
                          },
                          function () {
                              $('.vjs-control-bar').removeClass('vjs-fade-in').addClass('vjs-fade-out');
                          }
                      );
                      }
                  });

          亚洲Av日韩AV激情亚洲

            <sub id="xt3p5"><listing id="xt3p5"><thead id="xt3p5"></thead></listing></sub>

            <track id="xt3p5"><big id="xt3p5"><em id="xt3p5"></em></big></track>

            <menuitem id="xt3p5"><dfn id="xt3p5"></dfn></menuitem>
              <track id="xt3p5"></track>
              <pre id="xt3p5"></pre>

                  <form id="xt3p5"></form>