weui Slider滑块效果实例
1，新建demo.html
引入weui样式库
<link rel="stylesheet" href="https://weui.io/weui.css"> <link rel="stylesheet" href="https://weui.io/example.css">
2，添加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>
3,js实现滑块效果(手动拉滑块)，如果是PC端浏览器一定要切换到手机模式，否则滑块效果无法触发。
<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>// V型知识库原创四、效果
用谷歌浏览器打开页面，然后切换到手机模式下，默认情况下滑块位于50%处。
5，完整代码
<!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/1381.html
转载请注明出处！谢谢！
感觉本站内容不错，读后有收获？小额赞助,鼓励网站分享出更好的教程
上一篇：9.5、CSS盒模型--边框（二）
下一篇：9.6、CSS盒模型--宽度和高度
^