首頁猿問完整小demo用swiper和jq...

完整小demo用swiper和jquery在移動端jquery事件不能被觸發(fā)，請求幫助

Html5

花開花落_青藤 2017-06-12 15:15:05

<!DOCTYPE html><html ><head><meta charset="utf-8">? ? <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1" />? ? <title>導(dǎo)航左右滾動，跳轉(zhuǎn)切換 </title>? ??<link rel="stylesheet" href="swiper-3.4.2.min.css">/*可能需要下載swiper文件,放同級目錄就可以了http://www.swiper.com.cn/download/index.html*/</head><style>*{ margin:0; padding:0; font-family: "微軟雅黑";}body{ font-size:16px; background-color:#f4f4f4;}li{ list-style:none;}a{ text-decoration:none; -webkit-tap-highlight-color:rgba(255,0,0,0);}.wrap{width:100%;}/*導(dǎo)航滑動*/#topNav {width: 100%;overflow: hidden;font-style:normal;font-variant-ligatures: normal;font-variant-caps: normal;font-variant-numeric: normal;font-weight: normal;font-stretch: normal;font: 0.35rem;line-height: 100%;background: #34026A;}#topNav .swiper-slide {width:20%;text-align:center;padding-left: 1%;padding-right:1%;? ? border-right-style: dotted;}#topNav .swiper-slide a div{transition:all .3s ease;display:block;color: #fff;width: 100%;height: 100%;padding-top: 10%;padding-bottom: 10%;}#topNav .active a .sport{transform:scale(1.1);background-image:linear-gradient(to top,#FF8D14,#FFBA34);border-radius: 15px 15px 0 0;}#topNav .active a .mw{transform:scale(1.1);background-image:linear-gradient(to top,#008754,#00B75A);border-radius: 15px 15px 0 0;}#topNav .active a .bd{transform:scale(1.1);background-image:linear-gradient(to top,#712EEC,#3497E9);border-radius: 15px 15px 0 0;}#topNav .active a .sp{transform:scale(1.1);background-image:linear-gradient(to top,#F84387,#F95ACB);border-radius: 15px 15px 0 0;}#topNav .active a .mh{transform:scale(1.1);background-image:linear-gradient(to top,#BD00E0,#B152F5);border-radius: 15px 15px 0 0;}#topNav .active a .bh{transform:scale(1.1);background-image:linear-gradient(to top,#FA552F,#FC7E4B);border-radius: 15px 15px 0 0;}/*導(dǎo)航懸浮固定*/.tabFloat{ position:fixed; top:0; left:0; z-index:100;}/*主體內(nèi)容樣式*/#div1{background: yellow;height: 12.5rem;text-align: center;}#div2{background: green;height: 12.5rem;text-align: center;}#div3{background: blue;height: 12.5rem;text-align: center;}#div4{background: rgb(248,76,161);height: 12.5rem;text-align: center;}#div5{background: rgb(187,16,228);height: 12.5rem;text-align: center;}#div6{background: rgb(251,100,57);height: 12.5rem;text-align: center;}@media screen and (max-width:334px){? ? .swiper-slide a div{ font-size:10px;}}</style><body><div class="wrap"><div id="topNav" class="swiper-container">?<div class="swiper-wrapper">? ?<div class="swiper-slide ">? ? ? ?<a class="link" ><div ?class="sport">第一模塊</div></a>? ?</div>? ?<div class="swiper-slide">? ? ? ?<a class="link1"><div ?class="mw">第二模塊</div></a>? ?</div>? ?<div class="swiper-slide">? ? ? ?<a href="#div3"><div ?class="bd">第三模塊</div></a>? ?</div>? ?<div class="swiper-slide">? ? ? ?<a href="#div4"><div ?class="sp">第四模塊</div></a>? ?</div>? ?<div class="swiper-slide">? ? ? ?<a href="#div5"><div ?class="mh">第五模塊</div></a></div>? ?<div class="swiper-slide">? ? ? ?<a href="#div6"><div ?class="bh">第六模塊</div></a>? ?</div>?</div></div><div class="tabSection" id="div1">這是第一塊</div><div class="tabSection" id="div2">這是第二塊</div><div class="tabSection" id="div3">這是第三塊</div><div class="tabSection" id="div4">這是第四塊</div><div class="tabSection" id="div5">這是第五塊</div><div class="tabSection" id="div6">這是第六塊</div></div></body><script src="swiper-3.4.2.min.js" type="text/javascript"></script>/*可能需要下載swiper文件,放同級目錄就可以了http://www.swiper.com.cn/download/index.html*/<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script><script type="text/javascript">? //swiper部分，為了各位方便復(fù)制我就寫到一個頁面中? var mySwiper = new Swiper('#topNav', {? ? freeMode: true,? ? freeModeMomentumRatio: 0.5,? ? slidesPerView: 'auto',? ?});swiperWidth = mySwiper.container[0].clientWidthmaxTranslate = mySwiper.maxTranslate();maxWidth = -maxTranslate + swiperWidth / 2$(".swiper-container").on('touchstart', function(e) {? ?e.preventDefault()})mySwiper.on('tap', function(swiper, e) {// ?e.preventDefault()? ?slide = swiper.slides[swiper.clickedIndex]? ?slideLeft = slide.offsetLeft? ?slideWidth = slide.clientWidth? ?slideCenter = slideLeft + slideWidth / 2? ?// 被點(diǎn)擊slide的中心點(diǎn)? ?mySwiper.setWrapperTransition(300)? ?if (slideCenter < swiperWidth / 2) {? ? ? ?? ? ? ?mySwiper.setWrapperTranslate(0)? ?} else if (slideCenter > maxWidth) {? ? ? ?? ? ? ?mySwiper.setWrapperTranslate(maxTranslate)? ?} else {? ? ? ?nowTlanslate = slideCenter - swiperWidth / 2? ? ? ?mySwiper.setWrapperTranslate(-nowTlanslate)? ?}? ?$("#topNav ?.active").removeClass('active')? ?$("#topNav .swiper-slide").eq(swiper.clickedIndex).addClass('active')? ?$("#topNav .swiper-slide").eq(swiper.clickedIndex)??})//jquery部分?$(document).ready(function(){? ? ? ? $("html,body").animate({scrollTop:0});? ? ? ? ? ? //判斷導(dǎo)航個數(shù)? ? ? ? ? ? var tabLength = $('.swiper-slide a').length;? ? ? ? ? ? //導(dǎo)航高度? ? ? ? ? ? var tabTop = $("#topNav").offset().top;? ? ? ? ? ? ?// console.log(tabTop)? ? ? ? ? ? //分類數(shù)組把每個模塊的高度放進(jìn)sectop中? ? ? ? ? ? var secTop = new Array();? ? ? ? ? ? $(".tabSection").each(function(index) {? ? ? ? ? ? ? ? secTop.push($(this).offset().top);? ? ? ? ? ? });? ? ? ? ? ? $(window).scroll(function(){? ? ? ? ? ? ? ? var winScrollTop = $(window).scrollTop();? ? ? ? ? ? ? ? //懸浮導(dǎo)航? ? ? ? ? ? ? ? if(winScrollTop >= tabTop){? ? ? ? ? ? ? ? ? ? $("#topNav").addClass("tabFloat");? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? $("#topNav").removeClass("tabFloat");? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? //切換導(dǎo)航? ? ? ? ? ? ? ? if(winScrollTop >= secTop[secTop.length-1]-100){? ? ? ? ? ? ? ? ? ? ?$("#topNav ?.active").removeClass('active')? ? ? ? ? ? ? ? ? ? ?$("#topNav .swiper-slide").eq(secTop.length-1).addClass('active')? ? ? ? ? ? ? ? }else ?if(winScrollTop < secTop[0]-100){? ? ? ? ? ? ? ? ? ? $("#topNav ?.active").removeClass("active");? ? ? ? ? ? ? ? }else{? ? ? ? ? ? ? ? ? ? for(i = 0 ; i < secTop.length-1 ; i++){? ? ? ? ? ? ? ? ? ? ? ? if(winScrollTop >= secTop[i]-100 && winScrollTop < secTop[i+1]-100){? ? ? ? ? ? ? ? ? ? ? ? ? ? $("#topNav ?.active").removeClass("active");? ? ? ? ? ? ? ? ? ? ? ? ? ? $("#topNav ?.swiper-slide").eq(i).addClass("active");? ? ? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? ? ? }? ? ? ? ? ? ? ? }? ? ? ? ? ? });? ? ? ??/*就是這塊用谷歌模擬手機(jī)時這塊的事件沒有執(zhí)行，不知道為什么*/ ?? ? ? ? //滾動到對應(yīng)專區(qū)? ? ? ? $('.swiper-slide').each(function(index) {? ? ? ? ? ? $(this).click(function(){? ? ? ? ? ? ? ? var scrollHeight = $(".tabSection").eq(index).offset().top;? ? ? ? ? ? ? ? $("html,body").animate({scrollTop:scrollHeight-40});? ? ? ? ? ? });? ? ? ? });? ? });</script></html>

查看完整描述