weui样式库weui.css和example.css请前往https://github.com/weui/weui下载。记得是最新版本，不要下载错了.
在做本案例的时候本作者着实费了一番功夫，主要因为HTML5的touchstart changedTouches[0]一直报错 ,导致滑块效果无法实现，调试了一番之后终于实现了，具体实现如下
一，引入css文件
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
记得html设置成移动浏览
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"
二、滑块Slider的html代码
在<body></body>之间添加如下代码
<div class="page__hd"> <h1 class="page__title">Slider</h1> <p class="page__desc">滑块</p> </div> <div class="page__bd page__bd_spacing"> <div class="weui-slider"> <div class="weui-slider__inner"> <div style="width: 0;" class="weui-slider__track"></div> <div style="left: 0;" class="weui-slider__handler"></div> </div> </div> <br> <div class="weui-slider-box"> <div class="weui-slider"> <div id="sliderInner" class="weui-slider__inner"> <div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div> <div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div> </div> </div> <div id="sliderValue" class="weui-slider-box__value">50</div> </div> </div> <div class="page__ft"> <a href="javascript:home()"><img src="https://weui.io/images/icon_footer_link.png" /></a> </div> </div>
三，js实现滑块效果(手动拉滑块)
<script type="text/javascript">
$(function(){
var $sliderTrack = $('#sliderTrack'),
$sliderHandler = $('#sliderHandler'),
$sliderValue = $('#sliderValue');
var totalLen = $('#sliderInner').width(),
startLeft = 0,
startX = 0;
$sliderHandler
.on('touchstart', function (e) {
//alert("----"+changedTouches[0]);
startLeft = parseInt($sliderHandler.css('left')) * totalLen / 100;
startX = e.changedTouches[0].clientX;
//alert(startX);
})
.on('touchmove', function(e){
var dist = startLeft + e.changedTouches[0].clientX - startX,
percent;
dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;
percent = parseInt(dist / totalLen * 100);
$sliderTrack.css('width', percent + '%');
$sliderHandler.css('left', percent + '%');
$sliderValue.text(percent);
e.preventDefault();
})
;
});
</script>注意touchstart 和touchmove
四、效果
用谷歌浏览器打开页面，然后切换到手机模式下，默认情况下滑块位于50%处。
把鼠标箭头放到拉线处拉动，，效果如下
如上图所示，我们已经把滑块滑动到65%处了。
五、完整html代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>www.vxzsk.comV型知识库</title>
</head>
<link rel="stylesheet" href="https://weui.io/weui.css">
<link rel="stylesheet" href="https://weui.io/example.css">
<script src="https://weui.io/zepto.min.js"></script>
<body>
<div class="page__hd">
<h1 class="page__title">Slider</h1>
<p class="page__desc">滑块</p>
</div>
<div class="page__bd page__bd_spacing">
<div class="weui-slider">
<div class="weui-slider__inner">
<div style="width: 0;" class="weui-slider__track"></div>
<div style="left: 0;" class="weui-slider__handler"></div>
</div>
</div>
<br>
<div class="weui-slider-box">
<div class="weui-slider">
<div id="sliderInner" class="weui-slider__inner">
<div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div>
<div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
</div>
</div>
<div id="sliderValue" class="weui-slider-box__value">50</div>
</div>
</div>
<div class="page__ft">
<a href="javascript:home()"><img src="https://weui.io/images/icon_footer_link.png" /></a>
</div>
</div>
<script type="text/javascript">
$(function(){
//www.vxzsk.com V型知识库 原创
var $sliderTrack = $('#sliderTrack'),
$sliderHandler = $('#sliderHandler'),
$sliderValue = $('#sliderValue');
var totalLen = $('#sliderInner').width(),
startLeft = 0,
startX = 0;
$sliderHandler
.on('touchstart', function (e) {
//alert("----"+changedTouches[0]);
startLeft = parseInt($sliderHandler.css('left')) * totalLen / 100;
startX = e.changedTouches[0].clientX;
//alert(startX);
})
.on('touchmove', function(e){
var dist = startLeft + e.changedTouches[0].clientX - startX,
percent;
dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;
percent = parseInt(dist / totalLen * 100);
$sliderTrack.css('width', percent + '%');
$sliderHandler.css('left', percent + '%');
$sliderValue.text(percent);
e.preventDefault();
})
;
});
</script>
</body>
</html>
此文章本站原创，地址 https://www.vxzsk.com/772.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：jquery 层次选择器
下一篇：css padding属性
^