行业资讯
移动端案例 — 横向滚动、楼层效果、导航吸顶效果、tab切换
您的支持是我继续创作及维护的动力感谢打赏祝您工作顺利生活美满以下效果基于better-scroll插件实现效果演示横向滚动源代码divclasswrapperdivclasscontentulclassulliimgsrchttps://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpgalt/liliimgsrchttps://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpgalt/liliimgsrchttps://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpgalt/liliimgsrchttps://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpgalt/liliimgsrchttps://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpgalt/liliimgsrchttps://p1.meituan.net/128.180/movie/648bbced128324a4b4ccf7db6c564a251744344.jpgalt/li/ul/div/divscriptsrc../js/libs/bscroll.min.js/scriptscript// 注意// 第一实例化 并且开启横向滚动 scrollXtrue// 第二获取所有子元素的宽度总和赋值给内盒子// 所有子元素varlis[...document.querySelectorAll(.content ul li)];// 一个元素的宽varliWlis[0].offsetWidth;// 把子元素的宽度加起来varsumlis.length*liW;// 把总宽度赋值给父元素注意是实例化盒子下的子元素document.querySelector(.content).style.widthsumpx;// 实例化varmyXnewBScroll(.wrapper,{// 开启点击事件click:true,// 开启横向滚动。默认false需要打开scrollX:true});/script效果演示楼层效果源代码divclasswrapperdivclasscontentdivclassitemh2idAA/h2ulli阿拉善盟/lili鞍山/lili安庆/lili安顺/lili阿克苏/li/ul/divdivclassitemh2idBB/h2ulli北京/lili包头/lili本溪/lili巴彦淖尔/lili白城/li/ul/divdivclassitemh2idCC/h2ulli重庆/lili成都/lili常州/lili长春/lili承德/li/ul/divdivclassitemh2idDD/h2ulli大连/lili大庆/lili大兴安岭/lili大理/lili敦煌/li/ul/div/div/div!-- 字母列表按钮 --divclassfilexdulliA/liliB/liliC/liliD/li/ul/divscriptsrc../js/libs/bscroll.min.js/scriptscript// 获取所有的字母列表varlis[...document.querySelectorAll(.filexd li)];// 给字母列表添加点击事件lis.forEach(function(item){item.onclickfunction(){// scrollToElement 滚动到指定的目标元素。myX.scrollToElement(document.getElementById(this.innerHTML),500);}})// 实例化varmyXnewBScroll(.wrapper,{// 开启点击事件click:true,// 开启横向滚动。scrollX:true});/script效果演示 导航吸顶效果源代码bodydivclassnavidtop2导航条/divdivclasscontainerdivclassheader/divdivclassmaindivclassinnerdivclassbanner广告图/divdivclassnavidtop1导航条/divdivclassitem商品列表/div/div/divdivclassfooter/div/divscriptsrcjs/libs/flexible.js/scriptscriptsrcjs/libs/bscroll.min.js/scriptscriptletnavdocument.querySelector(#top1);letnavFalsedocument.querySelector(#top2);letnavTopnav.offsetTop;letnavHnav.offsetHeight;letmybsnewBScroll(.main,{probeType:3})mybs.on(scroll,(){if(mybs.y0Math.abs(mybs.y)navTop){navFalse.style.displayblock;}else{navFalse.style.display;}})/script/body以下效果基于swiper插件实现效果演示tab切换 效果源代码引入插件!-- 引入css样式 --linkrelstylesheethrefcss/swiper.cssdivclasswrapperulclasstabliclassactive战士/lili射手/lili法师/li/ul!-- 基本写法 --divclassswiper-container bannerdivclassswiper-wrapperdivclassswiper-slide战士战士战士战士/divdivclassswiper-slide射手射手射手/divdivclassswiper-slide法师法师法师/div/div/div/div!-- 引入js插件 --scriptsrcjs/libs/swiper.min.js/scriptscript// 获取tab按钮varbtns[...document.querySelectorAll(.tab li)];// 实例化varmyTabnewSwiper(.banner,{// 注意不能使用looploop模式下注意该值会被加上复制的slide数。// loop: true// on 监听swiper的slide改变on:{// slideChange ,当当前slide 发生改变slideChange:function(){/* * previousIndex返回上一个活动块的索引切换前的索引。 * activeIndex返回当前活动块的索引。 */// 把按钮对应索引改变高亮当前增加btns[this.activeIndex].classList.add(active);// 上一个移除btns[this.previousIndex].classList.remove(active);}}});// tab 点击btns.forEach(function(item,i){item.onclickfunction(){// 控制Swiper切换到指定slide。myTab.slideTo(i,1000);}})/script
郑州网站建设
网页设计
企业官网
详解：从基础读写到性能优化实战)
