html的手动滑动移动端jq,jQuery实现简单的滑动导航代码(移动端)

1.1 App滑动导航

说明：这个例子主要是实现一条导航山只有两个选项的。

1.适合用于移动端。

2.滑动条的长度是选项内容的长度。

1.1.1. 效果图

1.1.2. Html

滑动导航

• 滑动到岗
• 滑动到岗

1.1.3. Css

body,div,p{

margin:0;

padding:0;

}

ul.slid{

display: block;

position:fixed;

top: 10px;

left:0px;

right:0px;

height:60px;

background: #f2f2f2;

overflow: height;

}

ul.slid li{

display: inline-block;

width: 49%;

height: 40px;

margin-top: 10px;

float: left;

text-align: center;

overflow: hidden;

}

ul.slid li:first-child{

border-right: 1px solid red;

}

ul.slid li a{

display: inline-block;

width: 120px;

text-decoration:none;

height:37px;

line-height: 37px;

color: #898989;

overflow: hidden;

}

ul.slid li a:hover{

color: red;

}

#navLine{

height:2px;

background-color:red;

position:absolute;

bottom:7px;

width:0px;

left:0px;

display:none;

overflow:hidden;

}

1.1.4. jQuery

$(function (){

navSlid();

});

//滑动导航

var navSlid = function(){

var nline = $('#navLine');

var lia = $('ul.slid li a');

//初始化滑块

nline.css({

'width':lia.width(),

'left' :parseInt(lia.position().left)

});

$('ul.slid li a').mouseenter(function(){

//显示滑块

if(nline.css('display') == 'none'){

nline.show();

};

//移动滑块

nline.stop().animate({

width: $(this).width(),

left: parseInt($(this).position().left)

},300);

});

};