具有滚动和固定半页功能的半页垂直滑块

问题描述 投票:0回答:1

我正在尝试为具有滚动和固定的半页的Half Page垂直滑块编码,我正在为垂直滑块使用swiper js。我已经完成了垂直滑块。该功能现在正确完成,但是我无法滚动。我的意思是当您从顶部滚动时。滑块应根据滚动而变化。 `

var swiper = new Swiper('.swiper-container', {
      direction: 'vertical',
      mousewheel: true,
      scrollbar: {
        el: '.swiper-scrollbar',
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
        
      },
    });
.swiper-container {
      width: 100%;
      height: 450px;
      display: flex;
    }
    .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;
    }
<script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/swiper/css/swiper.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<section class="container-fluid">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida, metus sit amet ornare pretium, sem velit facilisis arcu, id laoreet nibh augue ac justo. Duis pellentesque, elit id semper gravida, tellus ante porttitor nisl, et molestie nisi elit eu libero. Suspendisse ornare tincidunt tellus, vitae fermentum enim suscipit vitae. Proin et nisl sed neque commodo euismod aliquet consequat lectus. Integer vitae quam rhoncus, blandit enim ut, mollis justo. Donec pulvinar ex in facilisis venenatis. Ut ullamcorper eros sit amet leo dictum elementum eget sed urna.</p>

    <p>Praesent est massa, egestas ac velit tempor, vestibulum congue orci. Cras consectetur enim vel porttitor vehicula. Maecenas hendrerit quis justo ac malesuada. Proin pulvinar tincidunt ex in rhoncus. Nam in est non sapien eleifend lobortis ac id erat. Duis sed orci ac est commodo aliquam eu convallis justo. Suspendisse vitae elit eget lorem ornare ornare sed ut ante. Morbi vehicula porttitor leo sit amet eleifend. Nam in viverra enim, eget semper turpis. Suspendisse potenti. Vestibulum in mi nibh. Quisque lacinia pellentesque nibh, rutrum porta diam luctus nec. Maecenas pulvinar, ex vitae varius commodo, nisl metus iaculis nisl, nec feugiat velit elit at metus.</p>

    <p>Curabitur a lobortis ipsum. Cras ipsum erat, pretium lobortis hendrerit nec, tristique et felis. Vestibulum hendrerit tortor nec rutrum condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor, elit nec convallis vestibulum, massa urna tristique nulla, id elementum enim lorem at nulla. Proin vestibulum, urna eget imperdiet dignissim, lorem magna ultrices risus, quis finibus ligula arcu sed nisi. Nam consequat in diam id suscipit. Maecenas malesuada placerat dapibus. Quisque pulvinar porttitor tortor nec molestie. Curabitur rhoncus finibus pretium. Nunc et pellentesque augue. Pellentesque vitae dapibus lacus. Praesent tristique lacinia lectus in volutpat.</p>

    <p>Mauris sit amet odio nec eros consequat hendrerit elementum id quam. Etiam sagittis neque mi, eget ultricies ligula egestas id. Duis pretium pellentesque interdum. Curabitur bibendum molestie fermentum. Donec vitae ex sed turpis luctus sodales eu sit amet lectus. Nulla facilisi. Suspendisse a risus tempor, accumsan massa in, tempor metus. Phasellus facilisis odio id aliquam aliquet. Integer hendrerit nibh eu eros sollicitudin, semper posuere felis mattis. Ut sit amet velit ullamcorper, malesuada mi sit amet, sodales augue. Nunc eget consectetur lacus, sed lacinia neque.</p>

    <p>Etiam a neque eu leo fringilla dignissim. Donec ut tincidunt elit, ut pharetra elit. Aliquam ornare nulla et velit scelerisque suscipit. Proin fringilla risus quis enim efficitur auctor. Integer ut neque venenatis, viverra nunc eget, aliquam risus. Aliquam eget enim augue. Nullam sagittis, purus et finibus ultrices, urna nisl consectetur enim, nec tristique nisl sapien quis nisi. Fusce vitae lacinia tortor, ut tempus odio. Vivamus hendrerit leo ipsum, in feugiat tortor pellentesque et. Suspendisse potenti.</p>

    <p>Nam nec ipsum lorem. Nunc in quam quis magna dignissim efficitur. Morbi eget ante accumsan, molestie nisi id, rutrum diam. Vivamus dictum in leo sit amet dapibus. Sed ut risus non leo tempor blandit vel eget orci. Sed molestie metus sed orci ornare, nec fermentum ipsum porta. Vestibulum ultricies ante eu magna maximus rhoncus. Quisque id ex eu ipsum auctor accumsan sed et mauris. Sed ut lectus consectetur, venenatis nisl et, iaculis elit.</p>

    <p>In ultricies quam sit amet ligula efficitur, at imperdiet sapien tempus. Integer ac arcu finibus, interdum elit in, tincidunt risus. Duis lacinia a tortor vitae placerat. Donec non aliquet mi. Quisque dolor massa, feugiat a arcu sit amet, consequat fringilla risus. Pellentesque vehicula mauris ac ante suscipit commodo. Morbi nec porttitor risus. Praesent aliquet sollicitudin magna, eu porta elit euismod in. Sed eu diam vel quam rutrum porttitor et ac massa. Nam ante ante, accumsan eget arcu ut, posuere interdum libero.</p>

    <p>Nulla rhoncus mi nec iaculis pharetra. Sed sodales vulputate elit et rhoncus. Aenean a ante malesuada augue posuere sodales vitae convallis ipsum. Pellentesque vel imperdiet metus. Morbi consequat lobortis odio, eget condimentum sapien vulputate vitae. In aliquet et neque sit amet lobortis. Aliquam in velit id leo feugiat pellentesque. Ut mollis arcu et mattis tempus. Nunc finibus mauris in felis mattis venenatis. Mauris ut sollicitudin tellus. Proin tempor lectus ac quam vehicula pulvinar.</p>

    <p>Ut bibendum enim sit amet eros accumsan, at commodo enim viverra. Vivamus vitae euismod tellus. Nullam sit amet nunc quam. Nulla a pellentesque tellus, non mollis ex. Vivamus commodo pulvinar volutpat. Suspendisse tempor, leo sed pharetra aliquam, felis purus fringilla dui, eu imperdiet nulla magna eget leo. Aenean volutpat mollis ante, vitae convallis odio eleifend quis.</p>

    <p>Vivamus iaculis tortor ut consequat dictum. Morbi lobortis erat massa, vel sagittis arcu fringilla et. Nam vitae ante a leo consequat aliquet vitae pretium sapien. Cras ac nulla consectetur, aliquam odio in, semper sapien. Cras quis dolor eget sapien pulvinar sodales. Donec eget faucibus enim. Suspendisse pellentesque est ac est pulvinar, sit amet tincidunt sapien fermentum. Duis fermentum, ante a pulvinar gravida, ligula magna eleifend sapien, vitae hendrerit est sem eget ex. Ut maximus eros ut odio iaculis, vitae varius elit pulvinar.</p>
</section>

<section>
  <div class="lxp-section">
    <div class="container-fluid">
      <div class="swiper-container swiper-container-initialized swiper-container-vertical">
        <div class="col-md-6 pull-left">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras accumsan dapibus neque, vel blandit odio porttitor eget. Integer quis placerat justo. Praesent convallis, dolor a auctor congue, libero quam pulvinar ipsum, quis dictum erat enim non purus. Curabitur odio quam, egestas eget nibh elementum, feugiat efficitur est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non ultricies orci, vel fringilla eros. Cras non finibus felis, nec posuere erat.

          Maecenas vel maximus nunc, nec dictum diam. Integer ipsum est, mollis eu rhoncus et, finibus non mi. Phasellus pulvinar imperdiet lectus quis dapibus. Nullam nec ex ut est vehicula convallis. Donec ac libero quis neque lacinia imperdiet non vel ante. Proin in tincidunt dolor. Duis molestie feugiat nibh. Nam urna enim, convallis eu dictum ut, vestibulum in lectus. Morbi malesuada vitae massa eget lobortis. Fusce et congue massa. Pellentesque egestas eu ante quis pulvinar. Curabitur vitae venenatis nisi. Morbi nec rutrum justo, non ultricies lorem.
        </div>
        <!-- <div> -->
          <div class="swiper-wrapper col-md-6 pull-right">
            <div class="swiper-slide">
              <img src="https://c1.wallpaperflare.com/preview/844/907/795/body-doll-dummy-figure.jpg" alt="" style="width: auto; height: 350px;">
            </div>
            <div class="swiper-slide">
              <img src="https://img1.goodfon.com/wallpaper/nbig/b/cb/linii-lico-maneken-maska-svet.jpg" alt="" style="width: auto; height: 350px;">
            </div>
            <div class="swiper-slide">
              <img src="https://wallpapercave.com/wp/wp3651524.jpg" alt="" style="width: auto; height: 350px;">
            </div>
            <div class="swiper-slide">
              <img src="https://c1.wallpaperflare.com/preview/651/1003/671/skull-halloween-people-mask.jpg" alt="" style="width: auto; height: 350px;">
            </div>
            <div class="swiper-slide">
              <img src="https://i.redd.it/l88gz05smj001.jpg" alt="" style="width: auto; height: 350px;">
            </div>
            <div class="swiper-slide">
              <img src="https://aelefton.files.wordpress.com/2016/03/alone.jpg" alt="" style="width: auto; height: 350px;">
            </div>
            <div class="swiper-slide">
              <img src="https://i.pinimg.com/originals/10/6b/a2/106ba27c732c474830ef4a62ec0448d6.jpg" alt="" style="width: auto; height: 350px;">
            </div>
            <div class="swiper-slide">
              <img src="https://i.pinimg.com/originals/af/3a/5a/af3a5a72531decb03bbfcf2b298ccb2e.jpg" alt="" style="width: auto; height: 350px;">
            </div>
            <div class="swiper-slide">
              <img src="https://wallpapercave.com/wp/wp2928790.jpg" alt="" style="width: auto; height: 350px;">
            </div>
            <div class="swiper-slide">
              <img src="https://i.pinimg.com/originals/b2/e3/93/b2e393d6b36b5140cf5265b9aa28f326.jpg" alt="" style="width: auto; height: 350px;">
            </div>
          </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
  </div>
</section>

<section class="container-fluid">

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida, metus sit amet ornare pretium, sem velit facilisis arcu, id laoreet nibh augue ac justo. Duis pellentesque, elit id semper gravida, tellus ante porttitor nisl, et molestie nisi elit eu libero. Suspendisse ornare tincidunt tellus, vitae fermentum enim suscipit vitae. Proin et nisl sed neque commodo euismod aliquet consequat lectus. Integer vitae quam rhoncus, blandit enim ut, mollis justo. Donec pulvinar ex in facilisis venenatis. Ut ullamcorper eros sit amet leo dictum elementum eget sed urna.</p>

    <p>Praesent est massa, egestas ac velit tempor, vestibulum congue orci. Cras consectetur enim vel porttitor vehicula. Maecenas hendrerit quis justo ac malesuada. Proin pulvinar tincidunt ex in rhoncus. Nam in est non sapien eleifend lobortis ac id erat. Duis sed orci ac est commodo aliquam eu convallis justo. Suspendisse vitae elit eget lorem ornare ornare sed ut ante. Morbi vehicula porttitor leo sit amet eleifend. Nam in viverra enim, eget semper turpis. Suspendisse potenti. Vestibulum in mi nibh. Quisque lacinia pellentesque nibh, rutrum porta diam luctus nec. Maecenas pulvinar, ex vitae varius commodo, nisl metus iaculis nisl, nec feugiat velit elit at metus.</p>

    <p>Curabitur a lobortis ipsum. Cras ipsum erat, pretium lobortis hendrerit nec, tristique et felis. Vestibulum hendrerit tortor nec rutrum condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut tempor, elit nec convallis vestibulum, massa urna tristique nulla, id elementum enim lorem at nulla. Proin vestibulum, urna eget imperdiet dignissim, lorem magna ultrices risus, quis finibus ligula arcu sed nisi. Nam consequat in diam id suscipit. Maecenas malesuada placerat dapibus. Quisque pulvinar porttitor tortor nec molestie. Curabitur rhoncus finibus pretium. Nunc et pellentesque augue. Pellentesque vitae dapibus lacus. Praesent tristique lacinia lectus in volutpat.</p>

    <p>Mauris sit amet odio nec eros consequat hendrerit elementum id quam. Etiam sagittis neque mi, eget ultricies ligula egestas id. Duis pretium pellentesque interdum. Curabitur bibendum molestie fermentum. Donec vitae ex sed turpis luctus sodales eu sit amet lectus. Nulla facilisi. Suspendisse a risus tempor, accumsan massa in, tempor metus. Phasellus facilisis odio id aliquam aliquet. Integer hendrerit nibh eu eros sollicitudin, semper posuere felis mattis. Ut sit amet velit ullamcorper, malesuada mi sit amet, sodales augue. Nunc eget consectetur lacus, sed lacinia neque.</p>

    <p>Etiam a neque eu leo fringilla dignissim. Donec ut tincidunt elit, ut pharetra elit. Aliquam ornare nulla et velit scelerisque suscipit. Proin fringilla risus quis enim efficitur auctor. Integer ut neque venenatis, viverra nunc eget, aliquam risus. Aliquam eget enim augue. Nullam sagittis, purus et finibus ultrices, urna nisl consectetur enim, nec tristique nisl sapien quis nisi. Fusce vitae lacinia tortor, ut tempus odio. Vivamus hendrerit leo ipsum, in feugiat tortor pellentesque et. Suspendisse potenti.</p>

    <p>Nam nec ipsum lorem. Nunc in quam quis magna dignissim efficitur. Morbi eget ante accumsan, molestie nisi id, rutrum diam. Vivamus dictum in leo sit amet dapibus. Sed ut risus non leo tempor blandit vel eget orci. Sed molestie metus sed orci ornare, nec fermentum ipsum porta. Vestibulum ultricies ante eu magna maximus rhoncus. Quisque id ex eu ipsum auctor accumsan sed et mauris. Sed ut lectus consectetur, venenatis nisl et, iaculis elit.</p>

    <p>In ultricies quam sit amet ligula efficitur, at imperdiet sapien tempus. Integer ac arcu finibus, interdum elit in, tincidunt risus. Duis lacinia a tortor vitae placerat. Donec non aliquet mi. Quisque dolor massa, feugiat a arcu sit amet, consequat fringilla risus. Pellentesque vehicula mauris ac ante suscipit commodo. Morbi nec porttitor risus. Praesent aliquet sollicitudin magna, eu porta elit euismod in. Sed eu diam vel quam rutrum porttitor et ac massa. Nam ante ante, accumsan eget arcu ut, posuere interdum libero.</p>

    <p>Nulla rhoncus mi nec iaculis pharetra. Sed sodales vulputate elit et rhoncus. Aenean a ante malesuada augue posuere sodales vitae convallis ipsum. Pellentesque vel imperdiet metus. Morbi consequat lobortis odio, eget condimentum sapien vulputate vitae. In aliquet et neque sit amet lobortis. Aliquam in velit id leo feugiat pellentesque. Ut mollis arcu et mattis tempus. Nunc finibus mauris in felis mattis venenatis. Mauris ut sollicitudin tellus. Proin tempor lectus ac quam vehicula pulvinar.</p>

    <p>Ut bibendum enim sit amet eros accumsan, at commodo enim viverra. Vivamus vitae euismod tellus. Nullam sit amet nunc quam. Nulla a pellentesque tellus, non mollis ex. Vivamus commodo pulvinar volutpat. Suspendisse tempor, leo sed pharetra aliquam, felis purus fringilla dui, eu imperdiet nulla magna eget leo. Aenean volutpat mollis ante, vitae convallis odio eleifend quis.</p>

    <p>Vivamus iaculis tortor ut consequat dictum. Morbi lobortis erat massa, vel sagittis arcu fringilla et. Nam vitae ante a leo consequat aliquet vitae pretium sapien. Cras ac nulla consectetur, aliquam odio in, semper sapien. Cras quis dolor eget sapien pulvinar sodales. Donec eget faucibus enim. Suspendisse pellentesque est ac est pulvinar, sit amet tincidunt sapien fermentum. Duis fermentum, ante a pulvinar gravida, ligula magna eleifend sapien, vitae hendrerit est sem eget ex. Ut maximus eros ut odio iaculis, vitae varius elit pulvinar.</p>
</section>

类似此页面的参考https://sapdesign-sandbox.webflow.io/half-on-half-layout`

javascript jquery html css swiper
1个回答
0
投票

希望有帮助。.>

const imgs = document.querySelectorAll('.slide__img');
window.addEventListener('scroll', (e) => {
  imgs.forEach(img => {
    const cont = img.closest('.slide');
    const rect = cont.getBoundingClientRect();
    if(rect.top <= 0 && rect.bottom > window.innerHeight) {
      img.style.top = -rect.top + 'px';
    };
  });
});
html, body {
  padding: 0;
  margin: 0;
}
.slide {
display: flex;
}
.slide__img {
position: relative;
height: 100vh;
width: 50%;
object-fit: cover;
-o-object-fit: cover;

}
.slide__p {
width: 50%;
padding: 50px;
font-size: 24px;
line-height: 400%;
box-sizing: border-box;
margin: 0;
}
.ver-slider {
width: 100%;
height: 100vh;
object-fit: cover;
-o-object-fit: cover;
display: block;
}
<div class="slide">
<img src="https://images-na.ssl-images-amazon.com/images/I/71Iq8vTLPeL._SY355_.png" class="slide__img"/>
<p class="slide__p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus nulla id volutpat malesuada. Nulla tempor dolor at augue euismod porttitor. Donec maximus tempus lorem, nec rutrum nisi hendrerit id. Sed quis congue nulla. Aenean et urna risus. Nulla posuere vestibulum facilisis. Suspendisse odio ipsum, sollicitudin ac lectus nec, ultrices faucibus odio. Cras volutpat posuere maximus.

In gravida vehicula congue. Integer et egestas nibh. Fusce sodales et tortor ac hendrerit. Vivamus blandit lacinia dui, sit amet tristique diam malesuada nec. Pellentesque tincidunt ultrices ultricies. Ut fermentum congue magna id efficitur. Nullam non eros eget purus varius porta nec vel diam. Proin tellus odio, commodo id faucibus ut, ullamcorper scelerisque augue. Praesent vel auctor risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus nulla id volutpat malesuada. Nulla tempor dolor at augue euismod porttitor. Donec maximus tempus lorem, nec rutrum nisi hendrerit id. Sed quis congue nulla. Aenean et urna risus. Nulla posuere vestibulum facilisis. Suspendisse odio ipsum, sollicitudin ac lectus nec, ultrices faucibus odio. Cras volutpat posuere maximus.

In gravida vehicula congue. Integer et egestas nibh. Fusce sodales et tortor ac hendrerit. Vivamus blandit lacinia dui, sit amet tristique diam malesuada nec. Pellentesque tincidunt ultrices ultricies. Ut fermentum congue magna id efficitur. Nullam non eros eget purus varius porta nec vel diam. Proin tellus odio, commodo id faucibus ut, ullamcorper scelerisque augue. Praesent vel auctor risus.
</p>
</div>
<div class="slide">

<p class="slide__p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus nulla id volutpat malesuada. Nulla tempor dolor at augue euismod porttitor. Donec maximus tempus lorem, nec rutrum nisi hendrerit id. Sed quis congue nulla. Aenean et urna risus. Nulla posuere vestibulum facilisis. Suspendisse odio ipsum, sollicitudin ac lectus nec, ultrices faucibus odio. Cras volutpat posuere maximus.

In gravida vehicula congue. Integer et egestas nibh. Fusce sodales et tortor ac hendrerit. Vivamus blandit lacinia dui, sit amet tristique diam malesuada nec. Pellentesque tincidunt ultrices ultricies. Ut fermentum congue magna id efficitur. Nullam non eros eget purus varius porta nec vel diam. Proin tellus odio, commodo id faucibus ut, ullamcorper scelerisque augue. Praesent vel auctor risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus nulla id volutpat malesuada. Nulla tempor dolor at augue euismod porttitor. Donec maximus tempus lorem, nec rutrum nisi hendrerit id. Sed quis congue nulla. Aenean et urna risus. Nulla posuere vestibulum facilisis. Suspendisse odio ipsum, sollicitudin ac lectus nec, ultrices faucibus odio. Cras volutpat posuere maximus.

In gravida vehicula congue. Integer et egestas nibh. Fusce sodales et tortor ac hendrerit. Vivamus blandit lacinia dui, sit amet tristique diam malesuada nec. Pellentesque tincidunt ultrices ultricies. Ut fermentum congue magna id efficitur. Nullam non eros eget purus varius porta nec vel diam. Proin tellus odio, commodo id faucibus ut, ullamcorper scelerisque augue. Praesent vel auctor risus.
</p>
<img src="https://as1.ftcdn.net/jpg/02/40/76/20/500_F_240762094_RQTLcZsphg6eBJrHmGd5rLd4u8FTQ2Ji.jpg" class="slide__img"/>
</div>
<div class="slide">
<p class="slide__img">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<div style="width:50%">
<img class="ver-slider" src="https://data.whicdn.com/images/304352705/original.gif"/>
<img class="ver-slider" src="https://data.whicdn.com/images/70438623/original.gif"/>
<img class="ver-slider" src="https://media.giphy.com/media/sEU384ODAcnSg/giphy.gif"/>
<img class="ver-slider" src="https://66.media.tumblr.com/05328e53ddd24b9e554b312760186cc1/tumblr_mwtuu6KIXU1qb47plo1_500.gif"/>
</div>
</div>
<div class="slide">
<img src="https://images-na.ssl-images-amazon.com/images/I/71Iq8vTLPeL._SY355_.png" class="slide__img"/>
<p class="slide__p">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus nulla id volutpat malesuada. Nulla tempor dolor at augue euismod porttitor. Donec maximus tempus lorem, nec rutrum nisi hendrerit id. Sed quis congue nulla. Aenean et urna risus. Nulla posuere vestibulum facilisis. Suspendisse odio ipsum, sollicitudin ac lectus nec, ultrices faucibus odio. Cras volutpat posuere maximus.

In gravida vehicula congue. Integer et egestas nibh. Fusce sodales et tortor ac hendrerit. Vivamus blandit lacinia dui, sit amet tristique diam malesuada nec. Pellentesque tincidunt ultrices ultricies. Ut fermentum congue magna id efficitur. Nullam non eros eget purus varius porta nec vel diam. Proin tellus odio, commodo id faucibus ut, ullamcorper scelerisque augue. Praesent vel auctor risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus nulla id volutpat malesuada. Nulla tempor dolor at augue euismod porttitor. Donec maximus tempus lorem, nec rutrum nisi hendrerit id. Sed quis congue nulla. Aenean et urna risus. Nulla posuere vestibulum facilisis. Suspendisse odio ipsum, sollicitudin ac lectus nec, ultrices faucibus odio. Cras volutpat posuere maximus.

In gravida vehicula congue. Integer et egestas nibh. Fusce sodales et tortor ac hendrerit. Vivamus blandit lacinia dui, sit amet tristique diam malesuada nec. Pellentesque tincidunt ultrices ultricies. Ut fermentum congue magna id efficitur. Nullam non eros eget purus varius porta nec vel diam. Proin tellus odio, commodo id faucibus ut, ullamcorper scelerisque augue. Praesent vel auctor risus.
</p>
</div>

0
投票

希望有帮助。.>


0
投票

希望有帮助。.>

© www.soinside.com 2019 - 2024. All rights reserved.