滚动条

最新推荐文章于 2024-03-27 10:30:00 发布

风的中心

最新推荐文章于 2024-03-27 10:30:00 发布

阅读量220

点赞数

本文链接：https://blog.csdn.net/u013716510/article/details/51943181

版权

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="device-width=1.0,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,target-densitydpi = medium-dpi">
<meta name="format-detection" content="telephone=no">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-capable" content="yes">
<style type="text/css">
* {
padding: 0;
margin: 0;
}

html,
body {
width: 100%;
height: 100%;
}

.prg {
width: 100%;
position: relative;
top: 50px;
}

.prg .line {
height: 1px;
background-color: #ccc;
}

.prg #slider {
position: absolute;
width: 10px;
height: 10px;
background-color: yellow;
border-radius: 100% 100%;
top: -5px;
left: 0px;
}

.t1 {
width: 100%;
text-align: center;
}

#slider:after {
content: '';
visibility: hidden;
clear: both;
}

li {
list-style: none;
}

.m-slider {
margin: 0 15px;
overflow: hidden;
height: 100%;
}

.m-slider .cnt {
position: relative;
left: 0;
top: 0;
width: 1000%;
height: 562px;
}

.m-slider .cnt li {
float: left;
width: 10%;
}

.m-slider .cnt img {
display: block;
width: 100%;
height: 627px;
}

.m-slider .cnt p {
margin: 20px 0;
}

.m-slider .icons {
text-align: center;
color: #000;
}

.m-slider .icons span {
margin: 0 5px;
}

.m-slider .icons .curr {
color: red;
}

.f-anim1 {
-webkit-transition: left .2s linear;
}

.f-anim2 {
-webkit-transition: top .2s linear;
}
</style>
</head>

<body>
<div class="prg">
<div class="line"></div>
<div class="r" id="slider"></div>
</div>
<div class="t1">0%</div>
<script src="../js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var slider = function() {
var sq = 0;
var events = {
index: {
x: 0,
obj_y: [{
y: 0
}]
}, //显示元素的索引
slider: document.getElementById('slider'),
strat_left: 0,
sq: 0,
sc_width: parseFloat($("body").css("width"), 10),
handleEvent: function(event) {
console.log('events');
if (event.type == 'touchstart') {
this.start(event);
} else if (event.type == 'touchmove') {
this.move(event);
} else if (event.type == 'touchend') {
this.end(event);
}
},
//滑动开始
start: function(event) {
event.preventDefault();
console.log('strat');
this.strat_left = parseFloat($("#slider").css("left"), 10);
var touch = event.targetTouches[0]; //touches数组对象获得屏幕上所有的touch，取第一个touch
startPos = {
x: touch.pageX,
y: touch.pageY,
time: +new Date
}; //取第一个touch的坐标值
isScrolling = 0; //这个参数判断是垂直滚动还是水平滚动
this.slider.addEventListener('touchmove', this, false);
this.slider.addEventListener('touchend', this, false);
},
//移动
move: function(event) {
console.log('move');
//当屏幕有多个touch或者页面被缩放过，就不执行move操作
if (event.targetTouches.length > 1 || this.scale && this.scale !== 1) return;
var touch = event.targetTouches[0];
endPos = {
x: touch.pageX - startPos.x,
y: touch.pageY - startPos.y
};
isScrolling = Math.abs(endPos.x) < Math.abs(endPos.y) ? 1 : 0; //isScrolling为1时，表示纵向滑动，0为横向滑动
console.log('开始水平滑动');
event.preventDefault(); //阻止触摸事件的默认行为，即阻止滚屏
this.slider.className = 'cnt';
sq = this.strat_left + endPos.x;
if (sq < 0) {
sq = 0
} else if (sq > this.sc_width) {
sq = this.sc_width - 10;
}
this.slider.style.left = sq + "px";
document.getElementsByClassName("t1")[0].innerHTML = (sq / (this.sc_width - 10) * 100).toFixed(2) + "%";
console.log(this.strat_left + endPos.x);

},
//滑动释放
end: function(event) {
event.preventDefault();
console.log('end');
this.slider.removeEventListener('touchmove', this, false);
this.slider.removeEventListener('touchend', this, false);
}
},
init = function() {
var touch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
dem = document.getElementById('slider');
if (!!touch) {
dem.addEventListener('touchstart', events, false);
console.log('支持');
}
};
init();
};

$(function() {
slider();
});
</script>
</script>
</body>

</html>