移动端html滑动菜单,移动端仿购物网站可滑动导航栏(适用于移动端)

$(document).ready(function() {

offserHeight = $(window).width();

Liheight = offserHeight / 5;

var Dwidth = offserHeight + Liheight * 4;

$(".friendlj div").css({

'width': Dwidth + 'px'

});

$(".friendlj div ul").css({

'width': offserHeight + 'px'

});

$(".friendlj div ul").css({

'margin-left': -offserHeight / 2 + 'px'

});

$(".friendlj div ul li").css("width", Liheight + 'px');

$(".bjk").css({

'width': Liheight + 'px',

'margin-left': -Liheight / 2 + 'px'

});

Uleft = $(".friendlj div ul").offset().left;

// console.log(Uleft);

timer = setInterval(TimeChangeD, 1000);

$(".Taxis ul li").click(function() {

clearInterval(timer);

var Nval = $(this).attr('index');

var ChangeLI = Liheight * (Nval - 1);

$(".friendlj").stop().animate({

scrollLeft: ChangeLI + 'px'

}, 1000);

$("#showCot" + Nval).show().siblings().hide();

});

$(".friendlj div ul").on("touchmove", function(e) {

clearInterval(timer);

$(".friendlj").attr("pdrun", "1");

$(".friendlj").scroll(function() {

if ($(".friendlj").attr("pdrun")) {

var scrollLeftValue = $(".friendlj").scrollLeft();

// console.log(scrollLeftValue);

var pdLigs = Math.ceil(scrollLeftValue / Liheight);

// console.log(pdLigs);

$(".friendlj").stop().animate({

scrollLeft: pdLigs * Liheight + 'px'

}, 500);

var nowpdLigs = pdLigs + 1;

$("#showCot" + nowpdLigs).show().siblings().hide();

}

$(".friendlj").removeAttr('pdrun');

})

})

})

function p(s) {

return s < 10 ? '0' + s : s;

}

//获取当前时间

function TimeChangeD() {

var myDate = new Date();

var h = myDate.getHours();

var m = myDate.getMinutes();

var nowDate = p(h) + ':' + p(m);

var ArrMax = [];

// console.log(nowDate);

$(".Taxis ul li").each(function() {

var DValue = $(this).html();

if (nowDate > DValue) {

var Idex = $(this).attr('index');

ArrMax.push(Idex);

// console.log(ChangeLI);

}

});

var maxval = -1;

for (var i = 0; i < ArrMax.length; i++) {

if (ArrMax[i] > maxval) {

maxval = ArrMax[i];

}

}

var ChangeLI = Liheight * (maxval - 1);

// console.log(ChangeLI);

$(".friendlj").stop().animate({

scrollLeft: ChangeLI + 'px'

});

$("#showCot" + maxval).show().siblings().hide();

// console.log(maxval);

}

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值