jquery swiper melaksanakan kesan paparan pensuisan gelongsor tab garis masa-tutorial js-php.cn

Tukar kandungan halaman tab berdasarkan garis masa? Artikel berikut akan memperkenalkan kepada anda cara melaksanakan jquery kesan penukaran tab garis masa digabungkan dengan leret untuk mencapai kesan paparan gelongsor saya harap ia akan membantu anda.

jquery swiper melaksanakan kesan paparan pensuisan gelongsor tab garis masa

Keperluan: Tukar kandungan halaman tab mengikut garis masa (garis masa perlu dileret untuk melihat dan memilih)

Idea Pelaksanaan:

Gabungkan dengan pemalam swiper untuk mencapai kesan paparan gelongsor

Laksanakan kesan pensuisan kiri mengikut transformasi: translateX (css pelaksanaan khusus adalah sebagai berikut), untuk mencapai kesan penukaran klik tanpa tatal Ubah suai dengan swiper. [Tutorial berkaitan yang disyorkan: Tutorial jQuery]

Kesan pelaksanaan:

jquery swiper melaksanakan kesan paparan pensuisan gelongsor tab garis masa

Kod pelaksanaan: Perlu digunakan dengan komponen swiper; navigasi kiri adalah berdasarkan struktur HTML dan kod css3, dan kesan garis masa dijana daripada http://www.htmleaf.com/css3/ui-design/201911275850. html

Alamat demo asas peleret: https://www.swiper.com.cn/demo/index.html

HTML:

  <div>
    <div>
      <div>
        <a>
          <div>
            <span>2019</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2018</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2017</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2016</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2015</span>
          </div>
        </a>
        <div></div>
      </div>
      <div>
        <a>
          <div>
            <span>2014</span>
          </div>
        </a>
        <div></div>
      </div>
    </div>
  </div>

Salin selepas log masuk

2019

jquery swiper melaksanakan kesan paparan pensuisan gelongsor tab garis masa

2018

2017

2016

2015

2014

所需外部链接文件：

<script></script>  
<script></script>  
<link>

Salin selepas log masuk

CSS

.page {
  width: 100%;
}
 
.main-timeline {
  font-family: 'Roboto', sans-serif;
  width: 200px;
  position: relative;
  float: left;
}
 
.main-timeline:after {
  content: '';
  display: block;
  clear: both;
}
 
.main-timeline:before {
  /* content: '';
  height: calc(100% + 80px);
  width: 0px;
  border: 2px solid #0870C5;
  transform: translateX(-50%);
  position: absolute;
  left: 114px;
  top: 0px; */
}
 
.main-timeline .timeline {
  width: 4%;
  /* padding: 140px 70px 0 25px; */
  margin: 0 50px 0 0;
  float: left;
  position: relative;
}
 
.main-timeline .timeline-content {
  /* padding: 15px 15px 15px 40px;
  border: 2px solid #00A79B; */
  border-radius: 15px 0 15px 15px;
  display: block;
  position: relative;
}
 
.main-timeline .timeline-content:hover {
  text-decoration: none;
}
 
.fd-active-line .timeline-content:after {
  content: '';
  background-color: #00A79B;
  height: 18px;
  width: 15px;
  position: absolute;
  right: -43px;
  top: 27px;
  /* clip-path: polygon(100% 0, 0 0, 0 100%); */
}
 
.main-timeline .timeline-year {
  color: #fff;
  background-color: #00A79B;
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  line-height: 80px;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  position: absolute;
  right: -120px;
  top: -40px;
}
 
.main-timeline .timeline-year:after {
  content: '';
  height: 100px;
  width: 100px;
  border: 8px solid #00A79B;
  border-left-color: transparent;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-20deg);
  position: absolute;
  left: 50%;
  top: 50%;
}
 
.main-timeline .timeline-icon {
  color: #fff;
  background-color: #00A79B;
  font-size: 35px;
  text-align: center;
  line-height: 50px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  left: -25px;
  transition: all 0.3s;
}
 
.main-timeline .title {
  color: #222;
  font-size: 20px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 7px 0;
}
 
.main-timeline .description {
  color: #222;
  font-size: 15px;
  letter-spacing: 1px;
  text-align: justify;
  margin: 0 0 5px;
}
 
.main-timeline .timeline:nth-child(even) .timeline-content {}
 
.main-timeline .timeline:nth-child(even) .timeline-content:after {
  transform: rotateY(180deg);
  right: auto;
  left: 123px;
}
 
.main-timeline .timeline:nth-child(even) .timeline-year:after {
  transform: translateX(-50%) translateY(-50%) rotate(200deg);
}
 
.main-timeline .timeline:nth-child(even) .timeline-icon {
  left: auto;
  right: -25px;
}
 
.timeline:nth-child(4n+2) .timeline-content,
.timeline:nth-child(4n+2) .timeline-year:after {
  border-color: #9E005D;
}
 
.timeline:nth-child(4n+2) .timeline-year:after {
  border-left-color: transparent;
}
 
.timeline:nth-child(4n+2) .timeline-content:after,
.timeline:nth-child(4n+2) .timeline-icon,
.timeline:nth-child(4n+2) .timeline-year {
  background-color: #9E005D;
}
 
.timeline:nth-child(4n+3) .timeline-content,
.timeline:nth-child(4n+3) .timeline-year:after {
  border-color: #f24f0e;
}
 
.timeline:nth-child(4n+3) .timeline-year:after {
  border-left-color: transparent;
}
 
.timeline:nth-child(4n+3) .timeline-content:after,
.timeline:nth-child(4n+3) .timeline-icon,
.timeline:nth-child(4n+3) .timeline-year {
  background-color: #f24f0e;
}
 
.timeline:nth-child(4n+4) .timeline-content,
.timeline:nth-child(4n+4) .timeline-year:after {
  border-color: #0870C5;
}
 
.timeline:nth-child(4n+4) .timeline-year:after {
  border-left-color: transparent;
}
 
.timeline:nth-child(4n+4) .timeline-content:after,
.timeline:nth-child(4n+4) .timeline-icon,
.timeline:nth-child(4n+4) .timeline-year {
  background-color: #0870C5;
}
 
@media screen and (max-width:767px) {
  .main-timeline:before {
    display: none;
  }
 
  .main-timeline .timeline {
    width: 100%;
    padding-top: 80px;
    padding-right: 12px;
    margin-bottom: 20px;
  }
 
  .main-timeline .timeline:nth-child(even) {
    padding-left: 10px;
    padding-top: 80px;
    margin-bottom: 20px;
  }
 
  .main-timeline .timeline-content,
  .main-timeline .main-timeline .timeline:nth-child(even) .timeline-content {
    background-color: #fff;
    padding-top: 25px;
  }
 
  .main-timeline .timeline-content:after {
    display: none;
  }
 
  .main-timeline .timeline-year {
    font-size: 24px;
    line-height: 70px;
    height: 70px;
    width: 70px;
    right: 0;
    top: -65px;
  }
 
  .main-timeline .timeline-year:after {
    display: none;
  }
 
  .main-timeline .timeline:nth-child(even) .timeline-year {
    left: 3px;
  }
}
 
@media screen and (max-width:567px) {
  .main-timeline .title {
    font-size: 18px;
  }
}
 
.swiper-container {
  width: 205px;
  height: 500px;
  float: left;
}
 
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
 
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
 
@media (max-width: 760px) {
  .swiper-button-next {
    right: 20px;
    transform: rotate(90deg);
  }
 
  .swiper-button-prev {
    left: 20px;
    transform: rotate(90deg);
  }
}
.event_list img {
  width: 880px;
  height: 470px;
  object-fit: cover;
}
.xians {
  width: 3px;
  height: 100%;
  background: #0870C5;
  position: absolute;
  left: 82px;
  z-index: -1;
}

Salin selepas log masuk

js:

  <script>
    $(function () {
      $(".main-timeline .timeline").click(function () {
        var TAG = $(this).siblings().length;
        if (TAG >= 1) {
          var index = $(this).index()
          $(this).addClass(&#39;fd-active-line&#39;).siblings().removeClass(&#39;fd-active-line&#39;)
          $(this).parent().parent().siblings(&#39;.event_list&#39;).children().eq(index).show().siblings().hide()
        }
      })
      var swiper = new Swiper(&#39;.swiper-container&#39;, {
        slidesPerView: 4,
        direction: &#39;vertical&#39;,
        navigation: {
          nextEl: &#39;.swiper-button-next&#39;,
          prevEl: &#39;.swiper-button-prev&#39;,
        },
        on: {
          resize: function () {
            swiper.changeDirection(getDirection());
          }
        }
      });
    });
  </script>

Salin selepas log masuk

Cara menggunakan swiper

1 Mula-mula muatkan pemalam Fail yang diperlukan ialah swiper-bundle.min.js dan swiper-bundle.min.css Nama fail yang digunakan oleh versi Swiper berbeza. Anda boleh memuat turun fail Swiper atau menggunakan CDN.

<link>
<script></script>

Salin selepas log masuk

2.Kandungan HTML.

<div>
	<div>
		<div>Slide 1</div>
		<div>Slide 2</div>
		<div>Slide 3</div>
	</div>
	<!-- 如果需要分页器 -->
	<div></div>
	
	<!-- 如果需要导航按钮 -->
	<div></div>
	<div></div>
	
	<!-- 如果需要滚动条 -->
	<div></div>
</div>
导航等组件可以放在container之外

Salin selepas log masuk

3. Anda mungkin mahu menentukan saiz untuk Swiper, tetapi sudah tentu tidak.

.swiper-container {
    width: 600px;
    height: 300px;
}

Salin selepas log masuk

4. Bekas lalai sebelum Swiper6 ialah '.swiper-container' dan selepas Swiper7 ialah '.swiper'.

<script>
	var mySwiper = new Swiper(&#39;.swiper-container&#39;, {
		direction: &#39;vertical&#39;, // 垂直切换选项
		loop: true, // 循环模式选项

		// 如果需要分页器
		pagination: {
			el: &#39;.swiper-pagination&#39;,
		},

		// 如果需要前进后退按钮
		navigation: {
			nextEl: &#39;.swiper-button-next&#39;,
			prevEl: &#39;.swiper-button-prev&#39;,
		},

		// 如果需要滚动条
		scrollbar: {
			el: &#39;.swiper-scrollbar&#39;,
		},
	})
</script>

Salin selepas log masuk

5. Tahniah, Leret anda kini sepatutnya boleh bertukar seperti biasa.

Jika diperkenalkan sebagai modul CommonJs atau ES

//CommonJs
var Swiper = require('swiper');    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });
 
//ES
import Swiper from 'swiper';    
var mySwiper = new Swiper('.swiper-container', { /* ... */ });

Salin selepas log masuk

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci jquery swiper melaksanakan kesan paparan pensuisan gelongsor tab garis masa. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!