Rumah > Artikel > hujung hadapan web > Laksanakan kesan tatal skrin penuh berdasarkan kemahiran jquery_javascript

Laksanakan kesan tatal skrin penuh berdasarkan kemahiran jquery_javascript

WBOYasal: 2016-05-16 15:29:331330semak imbas

Jadi hari ini saya akan memperkenalkan fullPage ini, yang berbeza daripada fullPage.js Fullpage mempunyai keserasian yang lebih baik dan serasi ke bawah dengan IE6 tidak bergantung pada mana-mana perpustakaan js dan boleh digunakan secara bebas. Walaupun ia tidak sekuat fullPage.js dari segi fungsi, ia memadai untuk kegunaan umum, terutamanya kesan animasinya Anda boleh menetapkan skala dan putaran secara bebas untuk menghasilkan pelbagai kesan animasi. Ia juga menyokong penatalan mendatar yang tidak ada pada fullPage.js.

Serasi dengan desktop (iaitu5.5) dan versi mudah alih
Anda boleh menggunakannya untuk membina halaman utama peribadi atau aplikasi web anda
Ini ialah rangka kerja padat yang tidak menggunakan jQuery dan kurang daripada 9KB

Sebelum memperkenalkannya, mari kita lihat pada paparan operasi:

Perkenalkan perpustakaan teras, pagefull bergantung pada mana-mana perpustakaan JS, jadi anda hanya perlu memperkenalkannya sendiri

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

Tulis html

//请在head区加入以下代码，移动端使用
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
 
<!--[if lte IE 7]>  
<body scroll="no"> 
<![endif]-->
<!--[if gt IE 7]><!--> 
<body> 
<!--<![endif]-->
 <div id="pageContain">
   
  <div class="page page1 current">
   <div class="contain">
     
   </div>
  </div>
 
  <div class="page page2">
   <div class="contain">
     
   </div>
  </div>
 
  <div class="page page3" data-step="4">
   <div class="contain">
    <p class="demo-data-step">data-step可以让你在不切屏的情况下更换动画</p>
   </div>
  </div>
 
  <div class="page page4">
   <div class="contain">
     
   </div>
  </div>
 
  <div class="page page5">
   <div class="contain">
     
   </div>
  </div>
 
  <div class="page page6">
   <div class="contain">
     
   </div>
  </div> 
 </div>
 <ul id="navBar">
  <li>0</li>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ul>
</body>

Tulis CSS Rakan-rakan yang tidak biasa dengan CSS3, sila kembali dan membuat untuk itu saya tidak akan menganalisis CSS boleh ditakrifkan secara bebas keperluan projek.

 html {
 -ms-touch-action: none; /* 阻止windows Phone 的默认触摸事件 */
 }
 body,
 div,
 p {
  margin: 0;
  padding: 0;
 }
 ul {
  list-style: none;
 }
 body {
  width: 100%;
  *cursor: default;
  overflow: hidden;
  font: 16px/1.5 "Microsoft YaHei",Helvetica,STHeiti STXihei,Microsoft JhengHei,Arial;
 }
 #pageContain {
  overflow: hidden;
 }
 .page {
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
 }
 .contain {
  width: 100%;
  height: 100%;
  display: none;
  position: relative;
  z-index: 0;
 }
 .current .contain,.slide .contain {
  display: block;
 }
 .current {
  display: block;
  z-index: 1;
 }
 .slide {
  display: block;
  z-index: 2;
 }
 .swipe {
  display: block;
  z-index: 3;
  transition-duration: 0ms !important;
  -webkit-transition-duration: 0ms !important;
 }
 .page1 {
  background: #37c1e3;
 }
 .page2 {
  background: #009922;
 }
 .page3 {
  background: #992211;
 }
 .page4 {
  background: #ff00ff;
 }
 .page5 {
  background: #00ff00;
 }
 .page6 {
  background: #22ffff;
 }
 #navBar {
  z-index: 3;
  position: absolute;
  top: 10%;
  right: 3%;
 }
 #navBar .active {
  background: #ccc;
 }
 #navBar li {
  cursor: pointer;
  margin-bottom: 10px;
  transition: all .7s ease;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  width: 40px;
  height: 40px;
 }
 
 
 
 p {
  width: 200px;
  height: 100px;
  color:#fff;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -50px;
  opacity: 1;
  transition: all .8s ease;
  transform-origin: 50% 50%;
 }
 .step1 p {
  transform: translate(0, -50px);
  -webkit-transform: translate(0, -50px);
 }
 .step2 p {
  opacity: 0;
  transform: scale(2);
  -webkit-transform: scale(2);
 }
 .step3 p {
  transform: scale(1);
  -webkit-transform: scale(1)
  opacity: 1;
 }
 .step4 p {
  -webkit-transform: rotate(360deg) translate(0,-200px) scale(.3);
  transform: rotate(360deg) translate(0,-200px) scale(.3);
  opacity: 0;
 }

Tulis JS untuk mencapai kesan

 var runPage;
 
runPage = new FullPage({
 
 id : 'pageContain',       // 容器id
 slideTime : 800,        // 每页切换时间，单位为毫秒
 continuous : false,       // 是否循环(即能从最后页跳到第一页面)
 effect : {          // 滚动效果
   transform : {
    translate : 'Y',     // 'X'|'Y'|'XY'|'none' X轴|Y轴|XY轴|无
    scale : [.1, 1],    // [scalefrom, scaleto] [起始缩放比例, 结束时缩放比例]
    rotate : [0, 0]      // [rotatefrom, rotateto] [起始旋转角度, 结束时旋转角度]
   },
   opacity : [0, 1]      // [opacityfrom, opacityto][起始透明度, 结束时透明度]
  },       
 mode : 'wheel,touch,nav:navBar',    // 转换模式 'wheel,touch,nav:navBar' 表示 '滚轮,触摸,导航条:导航条id'
 easing : 'ease'        // easing('ease','ease-in','ease-in-out' 或使用贝塞尔曲线 [.33, 1.81, 1, 1];
 // ,onSwipeStart : function(index, thisPage) { // 触摸开始时的回调函数
 // return 'stop';
 // }
 // ,beforeChange : function(index, thisPage) { // 滑动开始时的回调函数
 // return 'stop';
 // }
 // ,callback : function(index, thisPage) {  // 滑动结束后的回调函数
 // alert(index);
 // };
});

Tetapan parameter terperinci

Rentetan id – id pakej luar

Integer Masa slaid (lalai:800) – masa penukaran halaman (milisaat)

objek kesan (lalai:{}) – Parameter kesan

mod Rentetan (lalai:'') - Mod penukaran 'wheel,touch,nav:navBar' bermaksud 'wheel, touch, navbar:navbarid'

Fungsi panggil balik – fungsi panggil balik selepas gelongsor tamat

Antara Muka

Fullpage juga menyediakan beberapa alasan untuk pembangun menggunakan pemalam ini untuk memanggil:

sebelumnya() Gelongsor terus ke halaman sebelumnya

next() Gelongsor terus ke halaman seterusnya

thisPage() Mengembalikan nombor halaman semasa

go(num) Gelongsor terus ke nombor halaman

Perkara di atas adalah tentang mencapai kesan tatal skrin penuh yang serupa dengan peti mel NetEase saya harap anda boleh mencipta kesan tatal skrin penuh yang sesuai untuk tapak web anda sendiri.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Perbezaan antara request, request.form dan request.querystring dalam Jquery_jqueryArtikel seterusnya：Perbezaan antara request, request.form dan request.querystring dalam Jquery_jquery

Artikel berkaitan

Lihat lagi