移动端自定义美观的滑动条-创新互联
html部分:
创新互联建站主要从事网站设计制作、成都做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务新建,十余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:028-86922220
css部分:
.m_i_c_con{ position: relative; height: 55px; }
.m_i_c_out{ position: absolute; overflow: hidden; left: -1px; top:8px; box-shadow: 0 1px 1px #e3e3e3; width: 100%; height: 12px; border: 1px solid #e7e7e7; border-radius:5px; background-color: #fff;}
.m_i_c_in{ height: 18px; width: 0%; background-color: #C1C1C1;}
.m_i_c_drag{position: absolute; z-index: 100; left: 0%; top: 0px; width: 46px; height: 56px; margin-left: -8%; line-height: 76px; background: url(../p_w_picpaths/tuodongqiu.png) no-repeat center 0px; background-size: 26px; text-align: center;color: #8a8b8b; font-size: 15px;}
Js部分:
$(function(){
var opts = {};
$('#dragBtn').bind('touchstart',function(e){
e.preventDefault();
opts.startX = e.originalEvent.changedTouches[0].pageX;
opts.offsetLeft = parseFloat($(this).css('left'));
});
$('#dragBtn').bind('touchmove',function(e){
e.preventDefault();
opts.moveEndX = e.originalEvent.changedTouches[0].pageX;
opts.X = opts.moveEndX - opts.startX;
opts.full = parseFloat($('#dragOut').width());
opts.newLeft = opts.X + opts.offsetLeft;
opts.perval = opts.newLeft / opts.full * 100;
if(opts.newLeft <= opts.full && opts.newLeft >= 0){
$('#dragBar').width(opts.perval.toFixed(0) + '%');
$(this).css({'left':opts.perval.toFixed(0) + '%'});
$(this).text(opts.perval.toFixed(0) + '%');
}
});
$('#dragBtn').bind('touchend',function(e){
e.preventDefault();
opts = {};
});
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
当前名称:移动端自定义美观的滑动条-创新互联
URL网址:http://myzitong.com/article/coojoi.html