很好用的移动端左右滑动导航特效
<!DOCTYPE html>
<html data-dpr="1" style="font-size: 41.3px;"><head>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>页面标题</title>
<meta name="description" content="页面简述">
<meta name="keywords" content="关键词">
<style type="text/css">
html{color:#000;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
body {background:#FFF;color:#4a4f5a;font: 400 14px/1.5 "微软雅黑",Helvetica,STHeiti,Droid Sans Fallback;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-tap-highlight-color:rgba(0,0,0,0);}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}
input,select,textarea{font-size:100%}
article,aside,footer,header,nav,section,audio,canvas,video,img {display: block;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
abbr,acronym{border:0;font-variant:normal}
del{text-decoration:line-through}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:""}
button{outline:0;border:none;}
a:hover{text-decoration:none}
ins,a{text-decoration:none}
textarea {resize: none;}
iframe,img {border:0;}
img{display:block;width:100%;}
ul,ol {list-style:none;}
input,select,textarea {outline: 0;-webkit-user-modify: read-write-plaintext-only;}
input {-webkit-appearance: none;}
.pr{position:relative;}
.abs{position: absolute}
.fl{float:left;display:inline-block;}
.fr{float:right;display:inline-block;}
.clearfix:after{content:".";display:block;height:0;clear: both;visibility:hidden;}
.clearfix{*zoom:1;}
.wrap{min-width: 320px;max-width:768px;margin:0 auto;overflow:hidden;position:relative;}
.htit{line-height:1rem;padding:0 .3rem;color:#ff8e2e;font-size: .4rem;margin:1rem 0 .4rem 0}
.wrapper01 {position:relative;height: 1rem;width: 100%;overflow: hidden;margin:0 auto;border-bottom:1px solid #ccc}
.wrapper01 .scroller {position:absolute}
.wrapper01 .scroller li {height: 1rem;color:#333;float: left;line-height: 1rem;font-size: .4rem;text-align: center}
.wrapper01 .scroller li a{color:#333;display:block;margin:0 .3rem}
.wrapper01 .scroller li.cur a{color:#1cbb9b;}
.wrapper02 {position:relative;height: 1rem;width: 100%;overflow: hidden;margin:0 auto;background:#ddd}
.wrapper02 .scroller {position:absolute}
.wrapper02 .scroller li {height: 1rem;color:#333;float: left;line-height: 1rem;font-size: .4rem;text-align: center}
.wrapper02 .scroller li a{color:#333;display:block;margin:0 .3rem}
.wrapper02 .scroller li.cur{background:#1cbb9b}
.wrapper02 .scroller li.cur a{color:#fff;}
.wrapper03 {position:relative;height: 1rem;width: 100%;overflow: hidden;margin:0 auto;border-bottom:1px solid #ccc}
.wrapper03 .scroller {position:absolute}
.wrapper03 .scroller li {height: 1rem;color:#333;float: left;line-height: 1rem;font-size: .4rem;text-align: center}
.wrapper03 .scroller li a{color:#333;display:block;margin:0 .3rem;padding:0 .1rem}
.wrapper03 .scroller li.cur a{color:#1cbb9b;height:.9rem;border-bottom:.1rem solid #1cbb9b}
.wrapper04 {position:relative;height: 1rem;width: 80%;overflow: hidden;margin:0 auto;background:#ddd}
.wrapper04 .scroller {position:absolute}
.wrapper04 .scroller li {height: 1rem;color:#333;float: left;line-height: 1rem;font-size: .4rem;text-align: center}
.wrapper04 .scroller li a{color:#333;display:block;margin:0 .3rem}
.wrapper04 .scroller li.cur{background:#1cbb9b}
.wrapper04 .scroller li.cur a{color:#fff;}
</style>
</head>
<body style="font-size: 12px;">
<h2 class="htit">demo示例一</h2>
<div class="wrapper wrapper01" id="retr">
<div class="scroller">
<ul class="clearfix">
<li class="cur"><a href="javascript:void(0)">全部科目</a></li>
<li><a href="javascript:void(0)">会计从业</a></li>
<li><a href="javascript:void(0)">会计职称</a></li>
<li><a href="javascript:void(0)">注会</a></li>
<li><a href="javascript:void(0)">税务师</a></li>
<li><a href="javascript:void(0)">国际证书</a></li>
<li><a href="javascript:void(0)">更多</a></li>
<li><a href="javascript:void(0)">更多注会</a></li>
<li><a href="javascript:void(0)">国际证2</a></li>
<li><a href="javascript:void(0)">更多4</a></li>
<li><a href="javascript:void(0)">更多5</a></li>
</ul>
</div>
</div>
<h2 class="htit">demo示例二</h2>
<div class="wrapper wrapper02" id="wrapper02">
<div class="scroller">
<ul class="clearfix">
<li class="cur"><a href="javascript:void(0)">全部科目</a></li>
<li><a href="javascript:void(0)">会计从业</a></li>
<li><a href="javascript:void(0)">会计职称</a></li>
<li><a href="javascript:void(0)">注会</a></li>
<li><a href="javascript:void(0)">税务师</a></li>
<li><a href="javascript:void(0)">国际证书</a></li>
<li><a href="javascript:void(0)">更多</a></li>
<li><a href="javascript:void(0)">更多注会</a></li>
<li><a href="javascript:void(0)">国际证书2</a></li>
<li><a href="javascript:void(0)">更多4</a></li>
<li><a href="javascript:void(0)">更多5</a></li>
</ul>
</div>
</div>
<h2 class="htit">demo示例三</h2>
<div class="wrapper wrapper03" id="wrapper03">
<div class="scroller">
<ul class="clearfix">
<li class="cur"><a href="javascript:void(0)">全部科目</a></li>
<li><a href="javascript:void(0)">会计从业</a></li>
<li><a href="javascript:void(0)">会计职称</a></li>
<li><a href="javascript:void(0)">注会</a></li>
<li><a href="javascript:void(0)">税务师</a></li>
<li><a href="javascript:void(0)">国际证书</a></li>
<li><a href="javascript:void(0)">更多</a></li>
<li><a href="javascript:void(0)">更多注会</a></li>
<li><a href="javascript:void(0)">国际证书2</a></li>
<li><a href="javascript:void(0)">更多4</a></li>
<li><a href="javascript:void(0)">更多5</a></li>
</ul>
</div>
</div>
<h2 class="htit">demo示例四</h2>
<div class="wrapper wrapper04" id="sass">
<div class="scroller">
<ul class="clearfix">
<li class="cur"><a href="javascript:void(0)">全部科目</a></li>
<li><a href="javascript:void(0)">会计从业</a></li>
<li><a href="javascript:void(0)">会计职称</a></li>
<li><a href="javascript:void(0)">注会</a></li>
<li><a href="javascript:void(0)">税务师</a></li>
<li><a href="javascript:void(0)">国际证书</a></li>
<li><a href="javascript:void(0)">更多</a></li>
<li><a href="javascript:void(0)">更多注会</a></li>
<li><a href="javascript:void(0)">国际证书2</a></li>
<li><a href="javascript:void(0)">更多4</a></li>
<li><a href="javascript:void(0)">更多5</a></li>
</ul>
</div>
</div>
<h2 class="htit">demo示例五</h2>
<div class="wrapper02" id="demo05">
<div class="scroller">
<ul class="clearfix">
<li><a href="javascript:void(0)">全部科目</a></li>
<li><a href="javascript:void(0)">会计从业</a></li>
<li><a href="javascript:void(0)">会计职称</a></li>
<li><a href="javascript:void(0)">注会</a></li>
<li><a href="javascript:void(0)">税务师</a></li>
<li><a href="javascript:void(0)">国际证书</a></li>
<li class="cur"><a href="javascript:void(0)">更多</a></li>
<li><a href="javascript:void(0)">更多注会</a></li>
<li><a href="javascript:void(0)">国际证书2</a></li>
<li><a href="javascript:void(0)">更多4</a></li>
<li><a href="javascript:void(0)">更多5</a></li>
</ul>
</div>
</div>
<h2 class="htit">demo示例六</h2>
<div class="wrapper02" id="demo06">
<div class="scroller">
<ul class="clearfix">
<li><a href="javascript:void(0)">北京</a></li>
<li><a href="javascript:void(0)">上海</a></li>
<li><a href="javascript:void(0)">广州</a></li>
<li class="cur"><a href="javascript:void(0)">深证</a></li>
<li><a href="javascript:void(0)">杭州</a></li>
<li><a href="javascript:void(0)">武汉</a></li>
<li><a href="javascript:void(0)">天津</a></li>
<li><a href="javascript:void(0)">郑州</a></li>
<li><a href="javascript:void(0)">海口</a></li>
<li><a href="javascript:void(0)">郑州</a></li>
<li><a href="javascript:void(0)">长春</a></li>
<li><a href="javascript:void(0)">长沙</a></li>
<li><a href="javascript:void(0)">南京</a></li>
<li><a href="javascript:void(0)">西安</a></li>
</ul>
</div>
</div>
<div style="padding:1rem .4rem;line-height:.6rem;font-size:.34rem">
参数说明：<br>
className:"cur", //当前选中点击元素的class类名<br>
clickScrollTime:300, //点击后滑动时间<br>
duibiScreenWidth:0.4, //单位以rem为准，默认为0.4rem<br>
fingerClick:0, //目标第0或1个选项触发,必须每一项长度一致，方可用此项<br>
endClickScroll:function(thisObj){}//回调函数<br>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js"></script>
<script type="text/javascript" src="js/navbarscroll.js"></script>
<script type="text/javascript">
$(function(){
//demo示例一到四 通过lass调取，一句可以搞定，用于页面中可能有多个导航的情况
$(".wrapper").navbarscroll();
//demo示例五 通过id调取
$("#demo05").navbarscroll({
defaultSelect:6,
endClickScroll:function(obj){
console.log(obj.text())
}
});
//demo示例六 通过id调取
$("#demo06").navbarscroll({
defaultSelect:3,
scrollerWidth:6,
fingerClick:1,
endClickScroll:function(obj){
console.log(obj.text())
}
});
});
</script>
</body>
</html>
navbarscroll.js文件:
/*
* 移动端模拟导航可点击自动滑动 0.1.4
* Date: 2017-01-11
* by: xiewei
* 导航可左右滑动，可点击边缘的一个，自动滚动下一个到可视范围【依赖于iscroll.js】
*/
(function ($) {
$.fn.navbarscroll = function (options) {
//各种属性、参数
var _defaults = {
className:"cur", //当前选中点击元素的class类名
clickScrollTime:300, //点击后滑动时间
duibiScreenWidth:0.4, //单位以rem为准，默认为0.4rem
scrollerWidth:3, //单位以px为准，默认为3,[仅用于特殊情况：外层宽度因为小数点造成的不精准情况]
defaultSelect:0, //初始选中第n个，默认第0个
fingerClick:0, //目标第0或1个选项触发,必须每一项长度一致，方可用此项
endClickScroll:function(thisObj){}//回调函数
}
var _opt = $.extend(_defaults, options);
this.each(function () {
//插件实现代码
var _wrapper = $(this);
var _win = $(window);
var _win_width = _win.width(),_wrapper_width = _wrapper.width(),_wrapper_off_left = _wrapper.offset().left;
var _wrapper_off_right=_win_width-_wrapper_off_left-_wrapper_width;
var _obj_scroller = _wrapper.children(".scroller");
var _obj_ul = _obj_scroller.children("ul");
var _obj_li = _obj_ul.children("li");
var _scroller_w = 0;
_obj_li.css({"margin-left":"0","margin-right":"0"});
for (var i = 0; i < _obj_li.length; i++) {
_scroller_w += _obj_li[i].offsetWidth;
}
_obj_scroller.width(_scroller_w+_opt.scrollerWidth);
var myScroll = new IScroll("#"+_wrapper.attr("id"), {
eventPassthrough: true,
scrollX: true,
scrollY: false,
preventDefault: false
});
_init(_obj_li.eq(_opt.defaultSelect));
_obj_li.click(function(){
_init($(this));
});
//解决PC端谷歌浏览器模拟的手机屏幕出现莫名的卡顿现象，滑动时禁止默认事件（2017-01-11）
_wrapper[0].addEventListener("touchmove",function (e){e.preventDefault();},false);
function _init(thiObj){
var $this_obj=thiObj;
var duibi=_opt.duibiScreenWidth*_win_width/10,this_index=$this_obj.index(),this_off_left=$this_obj.offset().left,this_pos_left=$this_obj.position().left,this_width=$this_obj.width(),this_prev_width=$this_obj.prev("li").width(),this_next_width=$this_obj.next("li").width();
var this_off_right=_win_width-this_off_left-this_width;
if(_scroller_w+2>_wrapper_width){
if(_opt.fingerClick==1){
if(this_index==1){
myScroll.scrollTo(-this_pos_left+this_prev_width,0, _opt.clickScrollTime);
}else if(this_index==0){
myScroll.scrollTo(-this_pos_left,0, _opt.clickScrollTime);
}else if(this_index==_obj_li.length-2){
myScroll.scrollBy(this_off_right-_wrapper_off_right-this_width,0, _opt.clickScrollTime);
}else if(this_index==_obj_li.length-1){
myScroll.scrollBy(this_off_right-_wrapper_off_right,0, _opt.clickScrollTime);
}else{
if(this_off_left-_wrapper_off_left-(this_width*_opt.fingerClick)<duibi){
myScroll.scrollTo(-this_pos_left+this_prev_width+(this_width*_opt.fingerClick),0, _opt.clickScrollTime);
}else if(this_off_right-_wrapper_off_right-(this_width*_opt.fingerClick)<duibi){
myScroll.scrollBy(this_off_right-this_next_width-_wrapper_off_right-(this_width*_opt.fingerClick),0, _opt.clickScrollTime);
}
}
}else{
if(this_index==1){
myScroll.scrollTo(-this_pos_left+this_prev_width,0, _opt.clickScrollTime);
}else if(this_index==_obj_li.length-1){
if(this_off_right-_wrapper_off_right>1||this_off_right-_wrapper_off_right<-1){
myScroll.scrollBy(this_off_right-_wrapper_off_right,0, _opt.clickScrollTime);
}
}else{
if(this_off_left-_wrapper_off_left<duibi){
myScroll.scrollTo(-this_pos_left+this_prev_width,0, _opt.clickScrollTime);
}else if(this_off_right-_wrapper_off_right<duibi){
myScroll.scrollBy(this_off_right-this_next_width-_wrapper_off_right,0, _opt.clickScrollTime);
}
}
}
}
$this_obj.addClass(_opt.className).siblings("li").removeClass(_opt.className);
_opt.endClickScroll.call(this,$this_obj);
}
});
};
})(jQuery);
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇： 移动端web css适配
- 下一篇： js编程练习
