一个简单的拖动杆html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta name="format-detection" content="telephone=no"/>
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="pragram" content="no-cache">
<title></title>
<!--css重置-->
<link rel="stylesheet" type="text/css" href="css/css_reset.css">
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/rem.js"></script>
<style type="text/css">
.section-content .demonstration_box{
width: 6.9rem;
padding: 20px 0;
margin: 10px auto 0 auto;
background-color: #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
position: relative;
}
.section-content .demonstration_box .ageDemonstration_box{
width: 6.9rem;
height: 24px;
margin: 0 auto;
display: -webkit-flex;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.section-content .demonstration_box .ageDemonstration_box .ageCont_box{
float: left;
padding: 0 30px;
height: 24px;
background-color: #fff5f5;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
font-size: 12px;
line-height: 24px;
text-align: left;
color: #4c4c4c;
position: relative;
}
.section-content .demonstration_box .ageDemonstration_box .ageCont_box .spanColor{
color: #ff0000;
}
.section-content .demonstration_box .ageDemonstration_box .ageCont_box .dotBox{
width: 4px;
height: 4px;
background-color: #464646;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
position: absolute;
top: 10px;
}
.section-content .demonstration_box .ageDemonstration_box .ageCont_box .dotBox.dotLeft{
left: 15px;
}
.section-content .demonstration_box .ageDemonstration_box .ageCont_box .dotBox.dotRight{
right: 15px;
}
.section-content .demonstration_box .demonstrationRod_box{
width: 6.3rem;
height: 30px;
margin: 28px auto 0 auto;
position: relative;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb{
width: 6.3rem;
margin: 0 auto;
border-collapse: collapse;
position: relative;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb tr td{
height: 30px;
position: relative;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb tr td.slidingRodBtn{
width: 47px;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb tr td .slidingRodBtn_box{
width: 30px;
height: 30px;
position: absolute;
top: 0;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb tr td .slidingRodBtn_box.reduceClass{
left: 0;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb tr td .slidingRodBtn_box.plusClass{
right: 0;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb tr td .slidingRodBtn_box img{
width: 30px;
height: 30px;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb tr td .progressBar_box{
width: 100%;
height: 30px;
padding: 12px 0;
margin: 0 0;
position: relative;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb tr td .progressBar_box .totalProgressBar{
width: 100%;
height: 6px;
background-color: #e6e6e6;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 0 0;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb tr td .progressBar_box .totalProgressBar .progressBar{
width: 0;
height: 6px;
background-color: #8f8f8f;
padding: 0 0;
margin: 0 0;
position: absolute;
left: 0;
top: 0;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb tr td .progressBar_box .progressBarIcon{
width: 34px;
height: 30px;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.section-content .demonstration_box .demonstrationRod_box table.demonstrationRod_tb tr td .progressBar_box .progressBarIcon img.pointImg{
width: 34px;
height: 30px;
}
</style>
</head>
<body>
<div class="reset">
<div class="reset_box">
<div id="section1" class="section-content">
<div class="demonstration_box">
<div class="ageDemonstration_box">
<div class="ageCont_box">
<div class="dotBox dotLeft"></div>
按<span class="spanColor" id="ageId">0</span><span class="spanColor">岁</span>时的保单利益演示
<div class="dotBox dotRight"></div>
</div>
</div>
<div class="demonstrationRod_box">
<table class="demonstrationRod_tb">
<tr>
<td class="slidingRodBtn">
<div class="slidingRodBtn_box reduceClass" id="minus">
<img src="img/detailedProposal_img3.png" alt=""/>
</div>
</td>
<td class="slidingRodBox">
<div class="progressBar_box" id="rangeGrey">
<div class="totalProgressBar">
<div class="progressBar" id="rangeBg"></div>
</div>
<div class="progressBarIcon" id="rangeBtn">
<img class="pointImg" src="img/detailedProposal_img5.png" alt=""/>
</div>
</div>
</td>
<td class="slidingRodBtn">
<div class="slidingRodBtn_box plusClass" id="aadd">
<img src="img/detailedProposal_img4.png" alt=""/>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
//滑动年龄变动
$(function(){
var minAge = "20"; //最小年龄
var maxAge = "30"; //最大年龄
$("#ageId").html(minAge);//显示初始年龄为最小年龄
var beginAge = parseInt(minAge); // 最小值
var nowAge = beginAge;
var nowleft,nowpr;
var bigAge = parseInt(maxAge); // 最大值
var groupingNum = bigAge - beginAge; //分布区间
var ageIdVal = parseInt($("#ageId").html());
var a = ageIdVal - beginAge;
var b = parseInt(a/groupingNum*100);
var moveW = $("#rangeBtn").width(); //按钮宽度
var rangeGreyW = $("#rangeGrey").width(); //总宽度
var addW = moveW/2;
var maxWidth = rangeGreyW - moveW;
$("#rangeBg").css({"width": maxWidth*b/100 + addW +"px","backgroundColor":"#8f8f8f"});
$("#rangeBtn").css("margin-left", maxWidth*b/100 + "px");
var obj = $("#rangeBtn")[0];
var flag = false; // 标记是否拖动开始
//点击触发
//电脑触发
obj.addEventListener('mousedown', start, false);
//手机触发
obj.addEventListener('touchstart', start, false);
// 开始拖动
//电脑鼠标拖动
document.addEventListener('mousemove', move, false);
//手机手势拖动
document.addEventListener('touchmove', move, false);
// 拖动结束
//电脑拖动结束
document.addEventListener('mouseup', end, false);
//手机拖动结束
document.addEventListener('touchend', end, false);
//触发效果
function start(event){
flag = true;
var touch = event.touches ? event.touches[0].clientX : event.clientX;
//alert(touch);
disX= touch-obj.offsetLeft;
event.preventDefault();
return false;
}
//拖动效果
function move(event){
if(flag){
var touch = event.touches ? event.touches[0].clientX : event.clientX;
var left = touch - disX;
left = left <= 0?0:left;
left = left >= maxWidth?maxWidth:left;
var percent = parseInt(left/maxWidth*100)/100;
//console.log(percent);
$("#rangeBtn").css({"margin-left":left+"px"});
$("#rangeBg").css({"width":percent*maxWidth + addW +"px","backgroundColor":"#8f8f8f"});
var setAge = parseInt((bigAge - beginAge)*percent);
nowAge= setAge + beginAge;
nowleft = left;
nowpr = percent*100;
//event.preventDefault();
$("#ageId").html(nowAge);
}
}
//拖动结束
function end(){
flag = false;
}
//年龄增减按钮
//年龄递增按钮
$("#aadd").click(function(){
var age = parseInt($("#ageId").html());
if(age < bigAge) {
age = age + 1
age = age >= bigAge+beginAge ? bigAge+beginAge:age;
//console.log(age);
var agePercent=parseInt((age-beginAge)/(bigAge-beginAge)*100);
$("#rangeBg").css({"width":agePercent+"%","backgroundColor":"#8f8f8f"});
var left = parseInt((maxWidth+1)*agePercent/100);
$("#rangeBtn").css("margin-left",left+"px");
nowAge = age;
$("#ageId").html(nowAge);
}
});
//年龄递减按钮
$("#minus").click(function(){
var age=parseInt($("#ageId").html());
if(age > beginAge) {
age = age - 1;
age=age>=bigAge-1+beginAge?bigAge-1+beginAge:age;
var agePercent=parseInt((age-beginAge)/(bigAge-beginAge)*100);
$("#rangeBg").css({"width":agePercent+"%","backgroundColor":"#8f8f8f"});
var left=parseInt((maxWidth+1)*agePercent/100);
$("#rangeBtn").css("margin-left",left+"px");
nowAge=age;
$("#ageId").html(nowAge);
}
});
});
</script>
</body>
</html>
引用的重置样式
css_reset.css
@charset "utf-8";
/* =reset 网页样式重置
------------------------------------------------------------------------------------------------------------------------------*/
*{ margin:0; padding:0;-webkit-tap-highlight-color:rgba(255,255,255,0)}
html {
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-tap-highlight:rgba(0,0,0,0);
-webkit-text-size-adjust:none;
overflow:-moz-scrollbars-vertical;/*强制firefox出现滑动条*/
}
li{ list-style:none}
img{display:block}
a{text-decoration: none;}
img{
border: 0;
}
a, abbr, acronym, address, applet, article, aside, audio, b, blockquote,
big, body,button, center, canvas, caption, cite, code, command,
datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset,
figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6,
header, hgroup, html, i, iframe, img, ins,input, kbd, keygen, label,
legend, li, meter, nav, menu, object, ol, output, p, pre, progress,
q, s, samp, section, small, span, source, strike, strong, sub,
sup, table, tbody, tfoot, thead, th, tr, td,video, tt,
u, ul, var {
margin:0;
padding:0;
font-family:"Arial","Microsoft YaHei" , "微软雅黑" ,"宋体";
-webkit-text-size-adjust: 100%;
}
table {
width:100%;
border-spacing:0;
border:0;
}
table th, table td {
border:0;
}
.reset{
position: relative;
width: 100%;
max-width: 750px;
min-width: 320px;
margin: 0 auto;
}
.reset .reset_box{
width: 7.5rem;
margin: auto;
position: relative;
}
jQuery文件引用现流行的jQuery版本就行
引用的rem.js
/*
* Resets the unit of the page used for mobile phone (WeChat)
* The screen benchmark is 750 pixels
* Date: Tue Dec 18 2018 18:01:03 GMT+0800
* */
(function(designWidth, maxWidth) {
var doc = document,
win = window;
var docEl = doc.documentElement;
var tid;
var rootItem,rootStyle;
function refreshRem() {
/*获取移动设备的宽度*/
var width = docEl.getBoundingClientRect().width;
if (!maxWidth) {
maxWidth = 540;
}
if (width > maxWidth) {
width = maxWidth;
}
/*与淘宝做法不同，直接采用简单的rem换算方法1rem=100px*/
/*rem的值等于(设备的宽度)x100/(设计稿宽度)*/
var rem = width * 100 / designWidth;
/*兼容UC开始*/
rootStyle="html{font-size:"+rem+'px !important}';
rootItem = document.getElementById('rootsize') || document.createElement("style");
if(!document.getElementById('rootsize')){
document.getElementsByTagName("head")[0].appendChild(rootItem);
rootItem.id='rootsize';
}
if(rootItem.styleSheet){
rootItem.styleSheet.disabled||(rootItem.styleSheet.cssText=rootStyle)
}else{
try{rootItem.innerHTML=rootStyle}catch(f){rootItem.innerText=rootStyle}
}
/*兼容UC结束*/
/*设置html的字号为rem的值*/
docEl.style.fontSize = rem + "px";
}
refreshRem();
win.addEventListener("resize", function() {
/*防止执行两次*/
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
/*浏览器后退的时候重新计算*/
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function(e) {
doc.body.style.fontSize = "16px";
}, false);
}
})(750, 750);
$(function(){
var u = navigator.userAgent;
var interval;
//安卓手机
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
}
//苹果手机
else if (u.indexOf('iPhone') > -1) {
//连续点击input时布尔值
var bfscrollboolean = false;
//获取软键盘唤起前浏览器滚动部分的高度
var bfscrolltop = document.body.scrollTop;
$("input[type='text'], input[type='tel'], input[type='number'], input[type='password'], textarea, select").focus(function(){
//获取焦点时触发事件
//设置一个计时器，时间设置与软键盘弹出所需时间相近
interval = setInterval(function(){
//获取焦点后将浏览器内所有内容高度赋给浏览器滚动部分高度
bfscrolltop = document.body.scrollTop;
},100);
bfscrollboolean = true;
}).blur(function(){//设定输入框失去焦点时的事件
//清除计时器
clearInterval(interval);
bfscrollboolean = false;
setTimeout(function(){
if(!bfscrollboolean){
//将软键盘唤起前的浏览器滚动部分高度重新赋给改变后的高度
document.body.scrollTop = bfscrolltop;
}
},100)
});
}
//winphone手机
else if (u.indexOf('Windows Phone') > -1) {
}
})
效果图
