swiper.js插件实现pc端文本上下滑动功能示例

2023-09-05 00:56:05 144

本文实例讲述了swiper.js插件实现pc端文本上下滑动功能。分享给大家供大家参考，具体如下：

在网站上看小说，文本太长时，靠鼠标去拖动滚动条太麻烦，鼠标滚轮又不精确，滚一下就不知道跑到哪去了。能不能像移动端那样可以鼠标上下滑动呢？swiper可以完美解决这个问题。

1、首先当然是引入swiper文件了：

2、html部分：




Loremipsumdolorsitamet,consecteturadipisicingelit.Quiabnatusquaeinciduntaofficiisexcepturialiassitrepellendusdebitis?Inventoredolorumatquequibusdamhicdoloribusdignissimosrationeundedoloremnumquamquamillumnulla.Nesciuntculpasitliberonemoatquisquammodiitaquequaedoloremquelaborumpossimusaddistinctiovoluptateseiusquibusdamrecusandaeofficia!Rerumquasiustosolutadoloresquaeratsuscipitearumperspiciatisaliasesseerrorconsequaturdoloruminciduntexcepturiperferendisadminusametcumqueipsumillumlibero?Iuredoloresfugiatlaboretotamnihildebitiscumminusanimimolestiasquae.Harumdoloremdolorrepellendusculpaquibusdamadipiscidignissimosquasasperioresevenieteaenimpossimusanimiinarchitectoametquisquamofficiaeiusestprovidentnumquamnesciuntdolorumarationelaborevoluptastotamcorporisquae.Temporemollitiasaeperemtemporibusexrerumdictaassumendatemporaasperioresatdolorsequiharumestnesciuntofficiisitaquesintfaceremaioresnobismolestiascupiditatelaboreexplicaboipsaanimivoluptatesporrofugaistedoloresdoloremquodrepudiandaeadoloremquequamaliquidfugiatatqueperferendisdistinctiononautreprehenderit.Eiuscommodideseruntaperiamdelenitilaudantiumessemaioresadipisciconsectetur.Saepehicrepellenduscumquequamdictaaperiamipsamdolorenesciuntconsequaturmaximedelenitideseruntlaboriosamnostrumharumasperioresobcaecatisequiodioipsumeiussint!Repudiandaearemcommodiquamsitillonamquae.Ipsacupiditateipsumimpeditconsequaturundedoloresquibusdamveniamitaqueabcumqueoditdeleniti?Minusmodiexpeditavoluptatumincidunteaquenatusfaceremolestiasdebitisvoluptatibuserrorliberovoluptatemaperiamquamculpaquisquameligendiperferendisabfugitaliquidquibusdamsolutanamveniameiusrepellatdolorarchitectoisteprovidentaliquamquasquo!Providentdebitisrationecorporisharumtemporanobisneque?Mollitiadebitisexpeditanisitemporibusvoluptasrationeaccusamusrepellenduscupiditaterepellatnobisaliquidexplicabonammagnietmaximeremipsaperspiciatisofficiisdoloreeligendifugiatnecessitatibusquibusdamnullaofficiasintconsequaturquiablanditiislaudantiumeiusfacilis.Quinamsuscipitconsecteturadipisciillumeumsequiinmagnivoluptatibustotamsintarchitectoliberosoluta!Porrorepellatfugitnisidolorumvoluptate!Eaducimusmolestiasremtemporalaboriosamautblanditiisperferendisametliberoquisquamnostrumporroaccusamusplaceatpossimusatconsequaturipsamnamaberrorrepellendusnecessitatibusconsequunturdolorexcepturiexprovident.Ipsumveniamlaboriosamrepellendusreprehenderitdoloremsimiliquevoluptatespraesentiumquaeratatqueconsectetureosexcepturinequedebitisnecessitatibusquidelectusnatusquiabeataeodiosintcumquepossimusabquaelaborerepellatiureobcaecatiasperiores!Fugaaliasimpeditquasiquisquamassumendaearummolestiasmollitiaillonobisiustoquiaccusamusquidemmoditemporasequiiureoptioverodolorumobcaecatisimiliqueadipisciadperspiciatisquaerat.Consequunturtemporacupiditatequaeratabvoluptatemdolorumvoluptatumetmolestiaesimiliquemodiquodprovidentamet.Perspiciatisquaeratatquelaudantiumexcepturi!Commodirecusandaeadrationevitaeharumnihilveritatisquasifugiatanimilaudantiumplaceatquamnesciuntprovidentatmolestiastemporebeataeincidunt.Verorepellatisteperspiciatissitquaeoptioillooditexcepturiminimaodioasperioressimiliquelaboriosamillumfugitcorrupti.Similiquehicquiscorruptifacerepossimusminusmagninecessitatibusquaenostrumerrormodialiquamperferendiseumquasiitaquenobislaudantium!

Loremipsumdolorsitamet,consecteturadipisicingelit.Obcaecatilaudantiumdoloressuscipitlaboriosamvitaecorporisaliasarchitectovoluptasaperiamconsecteturnisiverovoluptatessednobisassumendadoloremqueofficiisasperioresdolorem!Cupiditateautemmagnamaliquamvelitnecessitatibusfugiatnihilaperiamcumqueeumsoluta?Corporismodifugiatmaximenumquamreiciendissapienteteneturaperiamesseeavoluptatibusautemobcaecatiperferendisvoluptatumminusullamcupiditateaccusantiumoptio.Ipsavelitvoluptatumfacilisquasiofficiaaccusantiumnumquamdebitiscumquesimiliquedelectuseumblanditiisrepellendusvoluptasoptiolaudantiumexercitationemearumpossimusimpeditmollitiaquodconsequaturquamenimvitaenatusmaioresdelenitinihilbeatae.Recusandaecumqueeligendiutetverobeataelaborumdoloresvoluptatemenimexplicaboperferendisquiacommodisitplaceatlaudantiumtemporequisquamidinventoreoditsintrerumlaboredolorin!Optiomaioresaspernaturexcepturivoluptatemagnicupiditatesedquibusdamfugiatveniamdolorvelitabreprehenderitaliasnatusnisisequisolutaharumutrerumeosiurepossimusomnisatquefugaplaceatreiciendisaperiamdolorumnihileumesseeasimiliquequisrepellatteneturquasperspiciatisassumendaaliquid.Rationemaximemagnamitaqueminimadictaperferendisnisiinreprehenderitlaudantiumquisquamquaecumoptio.Providentverosolutateneturnostrumsequiistesapientedelenitinullaquasducimusessequilaborumnesciunt.Laboreremundevoluptatibusveniamipsasequiquiaillumofficiavoluptatesminusdelenitiassumendaaliasnullaaliquidarchitectoducimuspossimusearumnequealiquamsaepeadimpeditpraesentiumestitaqueobcaecatiquasiquidemindebitisquoquamidbeataeminimaporroplaceatnontotametaspernaturteneturdoloremcupiditateevenietiusto.Atqueinciduntrepellatoptiopraesentiumobcaecatiquominusreprehenderitdelectusvoluptateexplicaboaperiamaccusantiumperspiciatisconsequaturetmaioressaepetemporeaspernaturilloquamnumquam.Dolorumeosaccusantiumundevoluptatesquoeumetaspernaturimpeditrepellendusipsadolorminimaeaquenemolaudantiumdebitisblanditiisoditnobisincupiditatevoluptatemporropariaturmagnamiureeligendiillorecusandaequisquamnisivoluptatummollitiaautemcorruptitotamconsecteturrem.Temporibusveniamiustoremsedquaenostrumfugablanditiisfugitdignissimosullamaperiamcorruptienimipsummodiquissolutaevenietreiciendisadquamexplicabopossimusconsecteturassumendadoloribusquiareprehenderitearerumexpeditanecessitatibuslaborumnihildistinctiovoluptatemdolorumnullaquaerataspernatursaepealias!Iureexcepturiimpediteiussimiliquesediustoconsequaturobcaecatisuscipitquod?Similiqueteneturinciduntrepudiandaeeiuscommodiquaemolestiaeipsamdoloremremeligendiesseeaveniamdoloribusexcepturitemporaetofficia.Facerequibusdamplaceatutquisperferendisinventoremaximenullanihilsapientemagnameosseddoloremquequamnatusrepudiandaepraesentiumreprehenderitnequelaborummodivitaevoluptatibustemporibusmaioresomnisabaliasconsequunturestinipsamnonconsequatur?Estipsamaliasaliquamvoluptasrecusandaepossimusalaudantiumsintprovidentcorporisfacereeiuslibero.Accusamusiureatqueminuslaborumperspiciatisenimlaboreconsequaturmodiquiaeaqueblanditiisprovidentestquisreprehenderitfugadebitisdolorumofficia.Odioenimerroreaqueearumvoluptatumrationedoloresdoloribusnumquamea!Repellatdeserunteiusexcepturisapientequaeratutmolestiaedoloresvelitcommodiquoquamrepellenduslaborumnecessitatibusanimiminimavoluptatumsimiliqueblanditiisperferendisaliquamcorporisaperiamhicmaximeaspernatur!

Loremipsumdolorsitamet,consecteturadipisicingelit.Doloremdoloribusquaeratminusfacereautvelfugitsaepeverovoluptatumvoluptatemaliasnobisdoloremqueeumpraesentiumtemporibuserrorpariaturdoloremolestiasitaquecorporisvoluptatibusatqueperferendisdolorumeiusquamnostrumsintquis!Cumremhiceoslaboriosamipsamillumnamporro.Inventoreautemfacerevelautfaciliscupiditatetemporenequeomnisarchitectoet.Facerequissequiaccusantiumnatusquibusdamquaeratquosaut.Repudiandaeullamsuntasperioresinnullacorporisametitaquedelectussequinecessitatibusperferendisvoluptatibusetquidem?Perspiciatisassumendaquianumquamfugitsintveroeumnihilautemrecusandaeminimaetlaborum.Voluptatumpossimusmolestiaedoloremducimusreprehenderitrepellendusquisquamerrorharumcorporis!Voluptatumeligendilaudantiumoditiuremagnivitaesintducimusfugitaddeseruntteneturaccusantiumliberocommodinihilsolutanisiquamperferendisilloautemnamametquasdoloremqueomnisvoluptatespraesentiumblanditiispariaturquidemdoloreveldelectusimpeditillumquimaxime.Totammagniquaeratdistinctioiurecorporisrationedoloremrepellatabconsequunturipsaexquidemautnobisessemolestiastemporeautemaliquidmaioreseniminventoreassumendaipsumofficiisquisquamidcumveniamminusnihilateaobcaecati!Blanditiisexplicabotemporibusinminuseligendi!Accusantiumvelitlaboriosamquidoloresvoluptasipsummaioresminusautemquisquamnatusipsamveritatisharumliberovitaelaborum.Perferendisofficiaquodnostrumrepudiandaeteneturdoloremquaeratquasiquamquodoloremqueaccusantiumdelectusconsecteturcupiditatenihilanimiofficiisnobisdoloreperspiciatisquaecumtemporibusarchitectoearepellendusaliassitnatusmagniliberovoluptatummaioresaeummaximealiquidabconsequunturfugaillumminimalaborumreiciendisvoluptateaccusamus.Laborummodiquosvoluptatibusculpavoluptatumremsimiliquealiascupiditateasperioresiustodolorempossimusabveritatisperferendisaspernatureligendiperspiciatisinconsequaturfacilisestmolestiaeblanditiisoditquaevelitodioaccusantiumvoluptates?Maioresnostrumpariaturestquosmagnamexcepturimodiullameosaliquidnisiquissimiliqueinmaximeoditaliasdebitissedeiusexquamfugadoloribuscupiditateeligendiquiilloquaeratquasincidunt?Harumfacilisnostrumillumofficiasitvoluptatemadrerumoptiorepudiandaealiquidametinciduntatquerationeaperiamnecessitatibusaquaeratmollitiaquisquamreiciendisvoluptaseiusetmaximeilloaspernaturexatnamconsequuntur!Repudiandaefugaaliasdictaiurevoluptatem.Maioreseossaepeadnecessitatibusbeataevitaeitaque.Accusantiumfugatemporibusperferendissaepenumquamdoloremqueevenietfacilisinventoreeumnamadipiscisintdoloremullamprovidentcorporismolestiasdeserunt.Asperioresquisquamidadipisciquasicommodireprehenderitarchitectonihilvelevenietinventoremolestiaerecusandaefugiatdebitisplaceatvoluptatetemporemollitialaboreilloeligendidistinctiofacilisautempariaturpraesentium.Aspernaturiustoitaqueomnisquodperferendissapientemaximeconsecteturquiplaceatminusnumquamullammolestiaeerroradipiscimollitiamaioresdoloremdoloresexcepturi.Delenitiipsumminimaliberoharumcorporisdoloremquerepudiandaedolorequisatqueinventoreinminusdignissimoscumvelitquiaerroravoluptasaccusantiumaliquamodioillumperspiciatiseosbeataenequeilloenimpossimus.Porrominussedsitinciduntodiosimiliqueeum.Voluptatibusveroeaqueobcaecatiearumquisquamodioquoid.Voluptasnequecupiditatemolestiasmodipraesentiumullamnesciuntinlibero?

swiper.js插件实现pc端文本上下滑动功能示例

热门推荐

随机推荐