html5

手机端手指滑动选项卡滚动切换效果

(

转

)

2017/09/25

41

!DOCTYPE

html

html

lang=“en”

head

meta

charset=“UTF

-

8”

meta

content=“width=device

-width,

initial-scale=1.0,

maximum-

scale=1.0,

user-

scalable=no;”

name=“viewport”

/

meta

content=“yes”

name=“apple

-

mobile-web-app-

capable”/

meta

content=“black”

name=“apple

-mobile-web-app-status-

bar-

style”/

link

rel=‘stylesheet’

href=‘css/style.css’

link

rel=‘stylesheet’

href=‘css/swiper.min.css’

script

src=“js/jquery.1.11.1.js”

/script

script

src=“js/swiper.min.js”

/script

!--

触摸滑屏

JS--

script

src=“js/idangerous.swiper.min.js”

/script

!--

点击

li

滑屏

JS--

title

html5

手机端手指滑动选项卡滚动切换效果

/title

style

type=“text/css”

.yuan_w{ width: 100%; height: 100%; padding-left: 37%; } .yuan{

width: 10px; height: 10px; border-radius: 10px; background: #888; border: 1px solid #888;

float:

left;

margin:

10px

5px;

} .yuan_active{

background:

#FE6667;

border:

1px

solid

#FE6667;

}

.min_height{

min-height:500px;/*

设置一个最小高度，方便滑屏测试

*/

}

/style

/head

body

!--

header

--

header

ul

li

a

href=“javascript:void(0);”

id=“btn1”

hidefocus=“true”

热门

/a

span

img

src=“images/hot.png”

/span

/li

li

a

href=“javascript:void(0);”

id=“btn2”

hidefocus=“true”

宽带

/a

/li

li

a

href=“javascript:void(0);”

id=“btn3”

hidefocus=“true”

流量

/a

/li

li

a

href=“javascript:void(0);”

id=“btn4”

hidefocus=“true”

充值

/a

/li

/ul

/header

div

div

/div

div

/div

div

/div

div

/div

/div

!--

slideTo

tab

--

div

div

div

111111*********

/div

div

222222222222222 /div

div

333333333333333

/div

div

444444444444444

/div

/div

/div

script

//

移动端触摸滑屏

var mySwiper =

new

Swiper(‘.swiper

-

container’,{

autoHeight:

true,

onSlideChangeStart:

function(){

//

手

指还动选项卡，圆点样式改变

$(“.yuan_w

.yuan_active”).removeClass(‘yuan_active’);

$(“.yuan_w

div”).eq(mySwiper.activeIndex).addClass(‘yuan_active’);

//

手指滑动

,

小选项

卡样式改变

$(“.tabs

.default”).removeClass(‘default’);

$(“.tabs

li”).eq(mySwiper.activeIndex).addClass(‘default’);

}

});

//pc

端点击滑屏

$(“.tabs