前言
在开始上代码之前想实现一个简单的利用滚轮滚动的效果，顺便把裸露的丑陋滚动条给遮掉。
鼠标滚动代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title></title>
<style>
body,html{ margin: 0; padding:0; }
.img_scroll{
height: 200px;
width: 100%;
overflow: hidden;
}
.img_box{
width: 100%;
height: 240px;
overflow-y: hidden;
white-space: nowrap;
}
.img_box div{
width: 200px;
height: 200px;
background-size: cover;
background-position: center;
margin-right: 15px;
display: inline-block;
}
</style>
</head>
<body>
<div class="img_scroll">
<div class="img_box">
</div>
</div>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script>
var data = [
'img/03_05.png',
'img/03_06.png',
'img/04_01.png',
'img/04_02.png',
'img/04_03.png',
'img/04_04.png',
'img/04_05.png',
'img/04_06.png',
'img/04_07.png'
];
var str = '';
$.each(data, function(i, item){
str += '<div style="background-image: url('+item+')"></div>'
})
$(".img_box").append(str);
</script>
</body>
</html>
touch事件滚动代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title></title>
<style>
body,html{ margin: 0; padding:0; }
.img_scroll{
height: 160px;
width: 100%;
overflow: hidden;
}
.img_box{
width: 100%;
padding-left: 15px;
height: 200px;
display: -webkit-box;
font-size: 0;
}
.img_box div{
width: 160px;
height: 160px;
background-size: cover;
background-position: center;
margin-right: 15px;
}
</style>
</head>
<body>
<div class="img_scroll">
<div class="img_box">
</div>
</div>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script>
(function(){
var data = [
'img/03_05.png','img/03_06.png','img/04_01.png',
'img/04_02.png','img/04_03.png','img/04_04.png',
'img/04_05.png','img/04_06.png','img/04_07.png'
];
var str = '';
$.each(data, function(i, item){
str += '<div style="background-image: url('+item+')"></div>'
})
$(".img_box").append(str);
//以下代码建议封装一下，太多变量了
var len = data.length * (160+15) + 15; //
var d = window.screen.width - len;
var startX = 0; //相对于屏幕开始所处位置
var iX = 0; //移动了多少位置
var isStartX = 0; //相对于父元素开始所处位置
var dist = 0; //移动的距离
$('.img_scroll').on('touchstart','.img_box',function(e){
e.stopPropagation();
$('.img_box').css('-webkit-transition',"none");
startX = e.touches[0].pageX;
iStartX = iX;
}).on('touchmove','.img_box',function(e){
e.stopPropagation();
dist = e.touches[0].pageX - startX;
iX = iStartX + dist;
if( iX>=0 ){
iX = 0;
}else if( iX<=d ){
iX = d;
}
ruleMove()
}).on('touchend','.img_box',function(e){
$('.img_box').css('-webkit-transition',"all 0.5s");
e.stopPropagation();
ruleMove();
}).on('touchcancel', '.img_box',function(e){
ruleMove();
})
function ruleMove(){
$('.img_box').css('-webkit-transform', 'translate3d(' + iX + 'px,0,0)');
}
})()
</script>
</body>
</html>
结束语
touch事件在移动端的使用比较常见，代码实现原理和上述类似，但是用的过程中还是要注意性能优化和流畅性。比较常见的有swiper场景，有兴趣的同学可以自己手动操作，有时间我也会补充。
