HTML5教程——【探秘腾讯，连接一切】

最新推荐文章于 2023-10-27 22:33:05 发布

w3cmark

最新推荐文章于 2023-10-27 22:33:05 发布

阅读量571

点赞数

分类专栏：前端技术文章标签： html5 html5教程 animation web前端开发前端

本文链接：https://blog.csdn.net/sinat_25497313/article/details/43193317

版权

前端技术专栏收录该内容

12 篇文章 0 订阅

订阅专栏

今天要介绍的 HTML5网站案例是来自腾讯的宣传专题【探秘腾讯，连接一切】，看看大腾讯的项目技术。。。

专题截图

专题特色：

1、首先一开始类似手机解锁的链接界面进入方式就挺新颖的，可能大家觉得手机解锁很常见，但是把这思路用到wab页面还是比较少见，也许技术实现不难，但是技术和创意结合在一起才是最重要的。其实他设置了三个点，当手指按顺序触摸到这三个点就解开了，而路径只是一个引导，并没有实际的用处。核心代码：

 
      //解锁 
     
      var  
      showDotWin =  
      function 
      (callback){ 
     
      var  
      dotUp = $( 
      '.up-dot' 
      ); 
     
      var  
      dotLeft = $( 
      '.left-dot' 
      ); 
     
      var  
      dotRight = $( 
      '.right-dot' 
      ); 
     
      var  
      dotPosition = []; 
     
      var  
      dotList = [dotUp, dotRight, dotLeft]; 
     
      var  
      dotClicked = []; 
     
      var  
      index = -1; 
     
      var  
      oldLine =  
      null 
      ; 
     
      var  
      dotStartEvent =  
      function 
      (e){ 
     
      e.preventDefault(); 
     
      //把点的位置存到变量 
     
      var  
      tp; 
     
      for  
      ( 
      var  
      i = 0; i < dotList.length; i++) { 
     
      tp = dotList[i]; 
     
      dotPosition.push({ 
     
      x: tp.offset().left, 
     
      y: tp.offset().top, 
     
      w: tp.width(), 
     
      h: tp.height() 
     
      }); 
     
      }; 
     
      //判断起点位置是否在第一个点 
     
      var  
      dotOne = dotPosition[0]; 
     
      var  
      evt = e.touches[0]; 
     
      if  
      (evt.clientX >= dotOne.x && evt.clientX = dotOne.y && evt.clientY = dotN.x && evt.clientX = dotN.y && evt.clientY <= dotN.h + dotN.y) { 
     
      dotList[index].addClass( 
      'active' 
      ); 
     
      dotClicked.push(dotList[index]); 
     
      oldLine.addClass( 
      'show' 
      ).removeClass( 
      'active' 
      ); 
     
      oldLine = $( 
      '.line-box' 
      ).filter( 
      '[data-class=' 
      + dotList[index].attr( 
      'data-class' 
      ) + 
      ']' 
      ).addClass( 
      'active' 
      ); 
     
      index++; 
     
      }; 
     
      if  
      (index == dotList.length) { 
     
      oldLine.addClass( 
      'show' 
      ).removeClass( 
      'active' 
      ) 
     
      //滑动成功 
     
      $( 
      '.t-deblocking .txt-1' 
      ).addClass( 
      'fadeInUp' 
      ); 
     
      $( 
      '.t-deblocking .txt-3' 
      ).addClass( 
      'fadeInDown' 
      ); 
     
      $(document).off( 
      'touchstart' 
      , dotStartEvent); 
     
      callback && callback(); 
     
      setTimeout( 
      function 
      (){ 
     
      $( 
      '.t-deblocking' 
      ).addClass( 
      'fadeOut' 
      ); 
     
      setTimeout( 
      function 
      (){ 
     
      $( 
      '.t-deblocking' 
      ).remove(); 
     
      setTimeout( 
      function 
      (){ 
     
      $( 
      '.t-guide' 
      ).hide(); 
     
      }, 2000);                       
     
      }, 2000) 
     
      }, 2000); 
     
      }; 
     
      } 
     
      var  
      dotEndEvent =  
      function 
      (e){ 
     
      if  
      (index != dotList.length) { 
     
      for  
      ( 
      var  
      i = 0; i < dotClicked.length; i++) { 
     
      dotClicked[i].removeClass( 
      'active' 
      ); 
     
      }; 
     
      dotClicked = []; 
     
      index = -1; 
     
      oldLine =  
      null 
      ; 
     
      $( 
      '.up-dot' 
      ).addClass( 
      'shank' 
      ); 
     
      $( 
      '.line-box' 
      ).removeClass( 
      'active show' 
      ); 
     
      $( 
      '.line-1' 
      ).addClass( 
      'active' 
      ); 
     
      }; 
     
      $(document).off( 
      'touchmove' 
      , dotMoveEvent); 
     
      $(document).off( 
      'touchend' 
      , dotEndEvent); 
     
      } 
     
      $(document).on( 
      'touchstart' 
      , dotStartEvent); 
     
      }