#基于Jquery的简易限时购物导航滚动栏
1.可以左右拖动滚动条；
2.点击日期对应日期居于正中且字体颜色变为红色；
实现2功能的原理图为：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">//自适应手机尺寸
<script src="../jquery.js"></script>
<title>限时导航栏</title>
<style>
.item{
width: 70px;
}
</style>
</head>
<body style="background: darkgray;">
<div id="outer" style="background: pink;width:100%;overflow: hidden;position:relative;height: 50px;">
//此外容器必须限定宽度，且设定overflow: hidden;
<div id='container' style="background: pink; display: flex;flex-direction: row;flex-wrap: nowrap;position: absolute;left:0px;top:0px">
//此容器为内容器，滚动就是利用其定位为absolute，通过改变left实现的；
<div class="item"><span>1月2日</span><span>22:00</span></div>
<div class="item"><span>1月3日</span><span>22:00</span></div>
<div class="item"><span>1月4日</span><span>22:00</span></div>
<div class="item"><span>1月5日</span><span>22:00</span></div>
<div class="item"><span>1月6日</span><span>22:00</span></div>
<div class="item"><span>1月7日</span><span>22:00</span></div>
<div class="item"><span>1月8日</span><span>22:00</span></div>
<div class="item"><span>1月9日</span><span>22:00</span></div>
</div>
</div>
</body>
<script>
$(document).ready(function(){
console.log('已加载');
var container=document.getElementById('container');
var bgX;//触摸起始点的坐标
var evX;//触摸移动过程中每一触摸点的坐标
var left;//内容器的left值
//获取元素样式的方法
function getStyle(ele,attr){
//考虑兼容性
var res=null;
if(ele.currentStyle){
res=ele.currentStyle[attr];
}else{
res=window.getComputedStyle(ele,null)[attr]
}
return parseFloat(res)
}
//内容器触摸开始回调函数
container.ontouchstart=function(event){
console.log('touchstart')
bgX=event.targetTouches[0].clientX;
console.log(bgX);
left=container.style.left
console.log('left:'+left)
}
//内容器触摸移动回调函数
container.ontouchmove=function(){
console.log('touchmove');
evX=event.targetTouches[0].clientX;
console.log(bgX-evX)
container.style.left=(bgX-evX)+'px'
console.log('left:'+container.style.left)
}
//内容器触摸结束回调函数
container.ontouchend=function(){
console.log('touchend')
}
$('.item').click(function(event){
$('.item').css({//每次点击前现回到原始字体颜色
color:'black'
})
var wid=this.style.width;
console.log('点击')
console.log(event)
var bX=event.clientX;
console.log(bX-344/2);
var lX= getStyle(container,'left');
console.log('lx:'+lX)
container.style.left=lX-(bX-344/2)+'px';
this.style.color='red' //点击对象跟换字体颜色
})
})
</script>
</html>
1024
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
