仿网易云音乐app tab栏滑动效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>仿网易云音乐tabbar栏切换效果</title><script src="jquery.min.js"></script><script>fnResize()window.onresize = function () {fnResize();}function fnResize() {var deviceWidth = document.documentElement.clientWidth || window.innerWidth;console.log(deviceWidth);if (deviceWidth >= 750) {deviceWidth = 750} else if (deviceWidth <= 320) {deviceWidth = 320}document.documentElement.style.fontSize = (deviceWidth / 7.5 * 2) + 'px';}</script></head><body><div class="body"><div class="tabbars"><div class="tabbar-item current" οnclick="clickItem(0)">阿切</div><div class="tabbar-item" οnclick="clickItem(1)">日和坊</div><div class="tabbar-item" οnclick="clickItem(2)">一目连</div><div class="tabbar-item" οnclick="clickItem(3)">般若</div><div class="tabbar-item" οnclick="clickItem(4)">玉藻前</div><div class="tabbar-item" οnclick="clickItem(5)">辉夜姬</div><div class="tabbar-item" οnclick="clickItem(6)">奕</div><div class="tabbar-item" οnclick="clickItem(7)">妖刀姬</div><div class="line"></div></div><div class="container"><div class="card">内容</div></div></div><script>var marginLeft = 0,marginRight = 0,lineWidth = 0,lastIndex = 0,toRight = true,startX = 0,//开始时手指落点的x坐标startY = 0,currentX = 0;//当前手指落点的x坐标currentY = 0,size = 0,//tab数量$line = null,$current = null,flagIndex = 2,//当滑动到下标为(flagIndex+1)的时候修改tabbar栏的left值tabsWidth = 0,//tab栏的widthtabsLastX = 0,$tabbarsDom = null;$(document).ready(function(){$line = $('.line'),$current = $('.current');marginLeft = parseInt($current.css('margin-left'));marginRight = parseInt($current.css('margin-right'));lineWidth = $line.width();var left = ($current.width() - lineWidth)/2 + marginLeft;$line.css('left',left + 'px');size = $('.tabbar-item').length;$tabbarsDom = $('.tabbars');tabsWidth = $tabbarsDom.width();})function clickItem(index){if(lastIndex == index) return;toRight = lastIndex < index ? true : false;var left = 0;var tabsLeft = 0;var len2 = 0;for(var i = 0; i < index; i++){left += $('.tabbar-item').eq(i).width();if(tabsWidth - tabsLeft <= 375) continue;if(index >= flagIndex && i >= flagIndex){tabsLeft += $('.tabbar-item').eq(i).width();}}left = marginLeft * (index + 1) + marginRight * index + left + ($('.tabbar-item').eq(index).width() - lineWidth)/2;if(toRight){len2 = left + lineWidth-parseInt($line.css('left'));$line.animate({width: len2+'px'},150,'linear');}else{len2 = parseInt($line.css('left')) + lineWidth - left;$line.animate({left: left + 'px',width: len2+'px'},150,'linear');}lastIndex = index;$('.tabbars').animate({left: -tabsLeft + 'px'},150,'linear');setTimeout(()=>{if(toRight){$line.animate({width: lineWidth+'px',left: left+'px'},150,'linear');$('.card').css({'left':'100%'});}else{$line.animate({width: lineWidth+'px'},150,'linear');$('.card').css({'left':'-100%'});}$('.tabbar-item').eq(index).addClass('current').siblings().removeClass('current');$('.card').animate({left: '0'},500,'linear');},150);}document.getElementsByClassName('card')[0].addEventListener('touchstart',function(e){startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;})document.getElementsByClassName('card')[0].addEventListener('touchmove',function(e){currentX = e.targetTouches[0].pageX;currentY = e.targetTouches[0].pageY;})document.getElementsByClassName('card')[0].addEventListener('touchend',function(e){if(Math.abs(currentY - startY) < 20 && currentX - startX > 50 && lastIndex > 0){clickItem(lastIndex-1);}else if(Math.abs(currentY - startY) < 20 && startX - currentX > 50 && lastIndex < size - 1){clickItem(lastIndex+1);}})document.getElementsByClassName('tabbars')[0].addEventListener('touchstart',function(e){tabsLastX = e.targetTouches[0].pageX;})document.getElementsByClassName('tabbars')[0].addEventListener('touchmove',function(e){tabsLeft = tabsLastX - e.targetTouches[0].pageX;var left = parseInt($tabbarsDom.css('left'));if(left >= 0 && tabsLeft <= 0){$tabbarsDom.css('left', '0px');return;}else if((left + tabsWidth) <= 375 && tabsLeft >= 0){$tabbarsDom.css('left', 375 -tabsWidth+'px');return;}$tabbarsDom.css('left',left - tabsLeft + 'px');})document.getElementsByClassName('tabbars')[0].addEventListener('touchend',function(e){})</script><style>html,body{margin: 0;padding: 0;font-size: .16rem;}.body{width: 100%;min-height: 100vh;overflow: hidden;}.tabbars{display: flex;height: .4rem;align-items: center;position: relative;min-width: 375px;max-width: 1000px;float: left;}.tabbars::-webkit-scrollbar{display: none;}.tabbar-item{margin: 0 .08rem;white-space:nowrap;height: .4rem;line-height: .4rem;font-weight: bold;color: #333;}.tabbars .current{color: rgb(81, 81, 255);position: relative;}.line{width: .16rem;height: .02rem;background: #7d7dff;position: absolute;bottom: 0;left: 0.08rem;}.container{margin-top: .6rem;width: 100%;overflow: hidden;}.card{width: 3.35rem;height: 70vh;margin: auto;background: #c7c7ff;box-shadow: 0 .1rem .1rem #c7c7ff;border-radius: 3px;line-height: 70vh;text-align: center;color: #FFF;font-size: .3rem;font-weight: bold;position: relative;left: 0;}</style></body>
</html>

仿网易云音乐app tab栏滑动效果相关推荐

Android 仿网易云音乐App
因为工作实在是有点忙,所以还没完成成品,就先挂到GitHub上.日后慢慢更新啦. 项目地址 GitHub地址,希望大佬们点个star GitHub仿网易云音乐App 效果展示注:因为视频太模糊,每日 ...
【开源项目学习】源码剖析，学习仿网易云音乐app代码
[前言] 这篇文字不全是讲app代码,而是博主怎么根据代码系统学习梳理的过程,非专业,如有不对,欢迎指出仿网易云音乐app源码地址:https://github.com/aa112901/remus ...
Flutter 仿网易云音乐App
图首页歌曲播放和卡片切换如正版一样,歌曲播放进度在播放/暂停按钮的边框显示(页面下方,由黑变红) 没登录的话,一般只能听12秒目前只做了模块('超带感的说唱精选')的点播功能, 其他地方可 ...
新鲜出炉高仿网易云音乐 APP
我的引语晚上好,我是吴小龙同学,我的公众号「菜鸟翻身」会推荐 GitHub 上好玩的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值,欢迎关注我. 项目中成长是最快的,如何成长,就是解决问题 ...
尚硅谷微信小程序开发仿网易云音乐App 小程序后端接口服务器搭建
目录小程序学习视频相关的教程文档与笔记分享配套服务器源码地址: 接口使用说明文档接口列表启动服务测试服务启动OK网页 http://localhost:3000/test.html编辑 ...
小程序能用vue写么_仿网易云音乐APP的微信小程序【小程序和Vue版本】
小程序版本: 首先是网易云的音乐接口: npm 源码获取见文章底部. 目前实现功能用户歌单 FM 播放评论 MV 专辑歌手登录歌曲红心,FM trash,收藏单曲至歌单收听记录歌单歌曲 ...
【vue3仿网易云音乐app】歌单列表以及歌单界面
实现效果: 实现思路: 异步获取后台api中的歌单信息使用轮播图组件,实现歌单轮播将播放量转换为万.亿单位点击歌单画面,进入单独的歌单详情页具体实现过程: 1. 异步获取后台api中的歌单信息 ...
仿网易云音乐的滑动冲突处理效果
系列文章此功能属于仿网易云音乐App的一部分仿网易云音乐App(基础版) 实现网易云音乐的渐进式卡片切换 Flutter 自定义View--仿同花顺自选股列表 Flutter自定义View--仿高 ...
移动应用开发——uni-app框架仿网易云音乐播放器学习心得
目录一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架二.开发工具与项目创建 1.开发工具 2.项目创 ...

仿网易云音乐app tab栏滑动效果

仿网易云音乐app tab栏滑动效果相关推荐

最新文章

热门文章