jQuery仿360極速瀏覽器官網頁面滾動特效



107 427 143



特效描述:頁面滾動特效,

代碼結構

1. 引入JS

<script src="style/js/jQuery.172.js"></script>
<script type="text/javascript" src="style/js/monitor-pub-min.js"></script>
<script src="style/js/DD_belatedPNG.js"></script>

2. HTML代碼

<div class="arrow"></div>
<div class="toolbar">
  <a class="tbLogo"></a>
  <a href="http://down.360safe.com/cse/360cse_8.1.0.432.exe" class="tbDownload"></a>
</div>
<ul id="slider">
  <li class="p1 current">
    <div id="top_nav">
      <div class="content">
        <a class="top_link_left active" hidefocus="true" href="http://chrome.#" target="_blank" onClick="return false;">首頁</a>
        <a class="top_link_left" hidefocus="true" href="http://ext.chrome.#" target="_blank">擴展</a>
        <a class="top_link_left" hidefocus="true" href="http://bbs.chrome.#" target="_blank">論壇</a>
        <a class="top_link_right" hidefocus="true" href="http://down.360safe.com/cse/360cse_8.2.0.198.exe" target="_self">下載8.2</a>
      </div>
    </div>
    <div id="bg1">
      <div class="logo_out">
        <img src="style/images/logo.jpg" alt="360極速瀏覽器"/>
      </div>
      <p>
        <a class="sprite download" href="http://down.360safe.com/cse/360cse_8.1.0.432.exe" title="立即下載"></a>
      </p>
      <div class="link-area">
        <!-- <a class="sprite home" href="http://chrome.#/index_main.html" se_prerender_url="complete" style="width: 58px;" title="進入官網"></a>
        <a class="sprite share" href="javascript:;" style="width: 30px;" title="分享"></a> -->
        <!-- <a class="more" href="http://bbs.360safe.com/thread-4976275-1-1.html" target="_blank">詳情</a> -->
      </div>
    </div>
  </li>
  <li class="p2">
    <div id="bg2">
      <div class="content">
        <div class="layerout moveu">
          <div class="layer1"></div>
          <div class="layer2"></div>
          <div class="layer3"></div>
          <div class="layer4"></div>
        </div>
      </div>
    </div>
  </li>
  <li class="p5">
    <div id="bg5">
      <div id="ee-logo"></div>
      <div id="hand"></div>
    </div>
  </li>
  <li class="p6">
    <div id="bg6">
      <div id="yellow-pointer"><div></div></div>
      <div id="pointer-cover"></div>
    </div>
  </li>
  <!-- <li class="p3">
    <img id="dragImg" style="position: abosolute; top: -100000px; left: -1000000px;" src="style/images/blank.png" />
    <div id="bg3">
      <div class="fuzzy"></div>
      <div class="clearcut">
        <div id="dragbar" draggable="true"><div class="line"></div><div class="btn"></div></div>
        <img id="draghint" src="style/images/draghint.png" />
      </div>
    </div>
  </li>
  <li class="p4">
    <div id="bg4">
      <div class="pillar1"><div class="pillar-bottom"></div><div class="pillar-top"></div></div>
      <div class="pillar2"><div class="pillar-bottom"></div><div class="pillar-top"></div></div>
      <div class="pillar3"><div class="pillar-bottom"></div><div class="pillar-top"></div></div>
      <div class="pillar4"><div class="pillar-bottom"></div><div class="pillar-top"></div></div>
      <div class="circles"></div>
    </div>
  </li> -->
</ul>
<ul id="nav">
  <li class="current"><a href="javascript:;"></a></li>
  <li><a href="javascript:;"></a></li>
  <li><a href="javascript:;"></a></li>
  <li><a href="javascript:;"></a></li>
</ul>
<script>
monitor.setProject('cse_mainpage').getTrack().getClickAndKeydown();
$(function() {
  var ie6 = window.ActiveXObject&&!window.XMLHttpRequest;
  if (location.search.toLowerCase().indexOf('welcome=1') > -1) {
    $('.download').parent().hide();
  }
  $(document).on('selectstart', function(){
    return false;
  });
  $('img').on('dragstart', function(){
    return false;
  });
  /*if (!ie6) {*/
    $(document).on('mousewheel', function(e){
      if (e.originalEvent.wheelDelta>0) {
        Slider.slidePrev();
      } else {
        Slider.slideNext();
      }
    });
  /*}*/
/*
  var _t_resize;
  $(window).on('resize load', function(){
    _t_resize && clearTimeout(_t_resize);
    _t_resize = setTimeout(function(){
      if ($(window).height() < 700) {
        $(document.body).addClass('h768');
      } else {
        $(document.body).removeClass('h768');
      }
    }, 0);
  });
*/
  function getValidNumber(x, min, max) {
    if (x < min) return min;
    if (x > max) return max;
    return x;
  }
  function recalculatePosition(newPos) {
    var newLeft = newPos;
    if (newLeft > 958) newLeft = 958;
    if (newLeft < 2) newLeft = 2;
    $('.fuzzy').css('width', getValidNumber(newLeft - 231, 0, 500));
    $('.clearcut').css('left', getValidNumber(newLeft + 6, 236, 736)).css('width', getValidNumber(730 - newLeft, 0, 500));
    $('#dragbar').css('left', newLeft);
  }
  var old_x=0,new_x=0,is_first = true;
  $("#bg3").on("mousemove",function(e){
      var click_x = e.originalEvent.pageX||e.originalEvent.clientX;
      var t = click_x - this.offsetLeft;
      if(ie6&&t%2==0){
        t = t-1;
      }
      t > 33 && 922 > t && $(".clearcut").width(-(t - 980));
      Slider.stop();
      is_first&&setTimeout(function(){is_first=false;$("#draghint").fadeOut()},2000)
  })
  $("#bg3").on("touchmove",function(e){
      var t = e.originalEvent.targetTouches[0].pageX - this.offsetLeft;
      t > -3 && 972 > t && $(".clearcut").width(-(t - 960));
      Slider.stop();
      is_first&&setTimeout(function(){is_first=false;$("#draghint").fadeOut()},2000)
  })
/*  $('#dragbar').on('dragstart', function(e) {
     new_x = e.originalEvent.clientX;
     e.originalEvent.dataTransfer.setDragImage && e.originalEvent.dataTransfer.setDragImage($('#dragImg')[0], 0, 0);
     Slider.stop();
  }).on('drag', function(e) {
     $('#draghint').hide();
     old_x = new_x;
     new_x = e.originalEvent.clientX;
     if(Math.abs(new_x-old_x)>100)return;
     //console.log($('#dragbar').position().left,new_x-old_x)
     recalculatePosition($('#dragbar').position().left+(new_x-old_x))
  }).on('dragend', function(e) {
  });
*/
  $('#nav a').on('mousedown', function(){
    Slider.slideTo($(this).parent().index())
  });
  if (!ie6) {
    $('a.sprite').on('mouseover mousemove', function(){
      Slider.stop();
    }).on('mouseout', function(){
      Slider.startAutoPlay();
    });
  }
  $('a.share').on('click', function(){
    var conts = [
      '#360極速瀏覽器8# 五大新特性搶鮮體驗:1.全球最新內核chrome37,完美兼容IE11!2.完美高清字體,極致清晰!3.全球最優性能,HTML5評測512分!4.網頁/UI/Flash游戲全面GPU加速!5.率先支持Win8平板觸摸!速速下載體驗!',
      '#360極速瀏覽器8# 國內最好用的chrome,公測正式開啟,速速下載,體驗極致快感!'
    ];
    var content = conts[Math.floor(Math.random() * conts.length)];
    shareWB(content, 'http://p8.qhimg.com/d/360browser/20140909/share.jpg');
  });
  function shareWB(content, pic) {
    var iWidth = 615, iHeight = 505, iTop = (window.screen.height - iHeight) / 2, iLeft = (window.screen.width - iWidth) / 2, iTitle = content ? ("&title=" + encodeURIComponent(content)) : "", iPic = pic ? ("&pic=" + encodeURIComponent(pic)) : "", locurl = encodeURIComponent(location.href);
    window.open("http://service.weibo.com/share/share.php?appkey=3760161557&searchPic=false" + iTitle + iPic + "&url=" + locurl, "分享到新浪微博", "height=" + iHeight + ",width=" + iWidth + ",toolbar=no,menubar=no,location=no,status=no,top=" + iTop + ",left=" + iLeft)
  }
  var Slider = function(){
    var DURATION = 300;
    var count = $('#slider li').length;
    var current = 0;
    var animating = false;
    function slideTo(idx) {
      if (animating || idx == current) {
        return;
      }
      if (idx < 0) {
        idx = count - 1;
      } else if (idx >= count) {
        idx = 0;
      }
      var up = (idx > current) || (idx == current - count + 1);
      var $lis = $('#slider li');
      var $current = $lis.eq(idx);
      var $prev = $('#slider li.current');
      var offset = $current.height();
      animating = true;
      $current.show().css({top:up ? offset : -offset }).animate({top:0}, DURATION, function(){
        $(this).addClass('current');
        $('#nav li').removeClass('current').eq(idx).addClass('current');
        animating = false;
      });
      $prev.animate({top:up?-offset:offset}, DURATION, function(){
        $(this).removeClass('current').hide();
      });
      var $toolbar = $('.toolbar');
      if(idx == 0) {
        $toolbar.hide();
      } else {
        if(current == 0){
          setTimeout(function(){$toolbar.show()}, DURATION);
        }else{
          $toolbar.show();
        }
      }
      var $arrow = $('.arrow');
      if(idx == count - 1){
        $arrow.hide();
      }else{
        $arrow.show();
      }
      current = idx;
      startAutoPlay();
    }
    var timer;
    function startAutoPlay() {
      stop();
      // timer = setTimeout(Slider.slideNext, 5000);
    }
    function stop() {
      timer && clearTimeout(timer);
    }
    return {
      slideTo: slideTo,
      slidePrev: function() {
        if (current == 0) return;
        slideTo(current - 1);
      },
      slideNext: function() {
        slideTo(current + 1);
      },
      startAutoPlay: startAutoPlay,
      stop: stop
    }
  }();
  if (!ie6) {
    Slider.startAutoPlay();
  }
  $('#bg2').on('mousemove', function(e) {
    var offsetX = e.clientX / window.innerWidth - 0.5,
        offsetY = e.clientY / window.innerHeight - 0.5;
    $('#bg2 .layer2').css('left', 310 - 40 * offsetX).css('top', 280 - 20 * offsetY);
    $('#bg2 .layer3').css('left', 220 + 40 * offsetX).css('top', 190 + 20 * offsetY);
    $('#bg2 .layer4').css('left', 130 + 60 * offsetX).css('top', 60 + 30 * offsetY);
  });
   //手機手勢滑動
   var begin_y=0,end_y=0;
   $("document,body").on("touchstart",function(event){
      var touch = event.originalEvent.targetTouches[0];
        begin_y = Number(touch.pageY);
        return false;
   }).on("touchmove",function(event){
   }).on("touchend",function(event){
      var touch =  event.originalEvent.changedTouches[0];
        end_y = Number(touch.pageY);
        if(begin_y - end_y<-100){
            Slider.slidePrev();
        }else if(begin_y - end_y>100){
            Slider.slideNext();
        }
        return false;
   })
   var ua = navigator.userAgent.toLowerCase();
  if(ua.indexOf("android")>-1||ua.indexOf("iphone")>-1||ua.indexOf("ipad")>-1){
    //location.replace("http://chrome.#/mobile.html")
    $("#top_nav, .download, .arrow").hide();
  }
  var PLAYER_TIME = 46, player_timer=null;
  window.onerror = function(){return true};
  (function(){
      $('.arrow').on('click', function(){
        Slider.slideNext();
      });
    })();
});
</script>
<!--[if IE 6]>
  <script>DD_belatedPNG.fix('.logo, .sprite, .nav a,#bg2 .layerout div,.fuzzy,.clearcut,#dragbar .btn,#bg4,#draghint,.pillar-top, .pillar-bottom,.circles,#hand,.p6.current #yellow-pointer div, .toolbar a');</script>
<![endif]-->



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


熱門標簽: 滾動 滾動條 頁面滾動 滾動插件 滾動條插件 滾動條美化 滾動切換 滾動條切換 滑動選項卡 滑動切換 自動滾動圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滾動切換 滾動條切換 選項卡自動切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子