一、所需的css和js文件
drag.css
#drag{
position: relative;
background-color: #e8e8e8;
width: 550px;
height: 60px;
margin-left: 90px;
line-height: 60px;
text-align: center;
}
#drag .handler{
position: absolute;
top: 0px;
left: 0px;
width: 40px;
height: 58px;
border: 1px solid #ccc;
cursor: move;
}
.handler_bg{
background: #fff no-repeat center;
}
.handler_ok_bg{
background: #fff no-repeat center;
}
#drag .drag_bg{
background-color: #7ac23c;
height: 60px;
width: 0px;
}
#drag .drag_text{
position: absolute;
top: 0px;
width: 550px;
color:#9c9c9c;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
-o-user-select:none;
-ms-user-select:none;
font-size: 38px;
}
drag.js
/**
* Created by shuai_wy on 2017/3/14.
*/
$.fn.drag = function(options) {
var x, drag = this, isMove = false, defaults = {
};
var options = $.extend(defaults, options);
var handler = drag.find('.handler');
var drag_bg = drag.find('.drag_bg');
var text = drag.find('.drag_text');
var maxWidth = drag.width() - handler.width(); //能滑动的最大间距
//鼠标按下时候的x轴的位置
handler.mousedown(function(e) {
isMove = true;
x = e.pageX - parseInt(handler.css('left'), 10);
});
//鼠标指针在上下文移动时，移动距离大于0小于最大间距，滑块x轴位置等于鼠标移动距离
$(document).mousemove(function(e) {
var _x = e.pageX - x;// _x = e.pageX - (e.pageX - parseInt(handler.css('left'), 10)) = x
if (isMove) {
if (_x > 0 && _x <= maxWidth) {
handler.css({'left': _x});
drag_bg.css({'width': _x});
} else if (_x > maxWidth) { //鼠标指针移动距离达到最大时清空事件
dragOk();
}
}
}).mouseup(function(e) {
isMove = false;
var _x = e.pageX - x;
if (_x < maxWidth) { //鼠标松开时，如果没有达到最大距离位置，滑块就返回初始位置
handler.css({'left': 0});
drag_bg.css({'width': 0});
}
});
//清空事件
function dragOk() {
handler.removeClass('handler_bg').addClass('handler_ok_bg');
text.removeClass('slidetounlock').text('验证通过').css({'color':'#fff'}); //modify
// drag.css({'color': '#fff !important'});
handler.css({'left': maxWidth}); // add
drag_bg.css({'width': maxWidth}); // add
handler.unbind('mousedown');
$(document).unbind('mousemove');
$(document).unbind('mouseup');
}
};
以及jqery包一个。自行下载即可
二、html代码
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>发送邮件进行咨询</title>
</head>
<link rel="stylesheet" href="./css/drag.css">
<script src="./js/jquery-1.11.1.min.js"></script>
<script src="./js/drag.js"></script>
<style type="text/css">
/* Basic Grey */
.basic-grey {
margin-left: auto;
margin-right: auto;
/* max-width: 500px; */
max-width: 100%;
height: 70%;
background: #F7F7F7;
padding: 25px 15px 25px 10px;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #888;
text-shadow: 1px 1px 1px #FFF;
border: 1px solid #E4E4E4;
}
.basic-grey h1 {
font-size: 85px;
padding: 0px 0px 20px 120px;
display: block;
border-bottom: 1px solid #E4E4E4;
margin: -10px -15px 30px -10px;
; color: #888;
}
.basic-grey h1>span {
display: block;
font-size: 45px;
}
.basic-grey label {
display: block;
margin: 0px;
font-size: 45px;
}
.basic-grey label>span {
display:inline-block;
font-size: 40px;
float: left;
width: 50%;
text-align: left;
margin-left: 90px;
padding-right: 10px;
padding-left: 10px;
margin-top: 10px;
color: #888;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
border: 1px solid #DADADA;
color: #888;
height: 60px;
margin-bottom: 16px;
margin-right: 5px;
margin-top: 2px;
margin-left: 90px;
outline: 0 none;
padding: 3px 3px 3px 10px;
width: 80%;
font-size: 40px;
line-height: 42px;
box-shadow: inset 0px 1px 4px #ECECEC;
-moz-box-shadow: inset 0px 1px 4px #ECECEC;
-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea {
padding: 5px 3px 3px 5px;
}
.basic-grey select {
background: #FFF url('down-arrow.png') no-repeat right;
background: #FFF url('down-arrow.png') no-repeat right);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
line-height: 25px;
}
.basic-grey textarea {
height: 100px;
}
.basic-grey .button {
width: 280px;
padding:8px;
background: #E27575;
color: #FFF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */
text-align: center;
vertical-align: middle;
border: 1px solid transparent;
font-weight: 900;
font-size:36px;
margin-left: -260px;
}
.basic-grey .button:hover {
background: #CF7A7A
}
.slidetounlock{
font-size: 12px;
background:-webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
-webkit-animation:slidetounlock 3s infinite;
-webkit-text-size-adjust:none
}
@-webkit-keyframes slidetounlock{0%{background-position:-200px 0} 100%{background-position:200px 0}}
.center{
text-align:center;
}
</style>
<body>
<form action="" method="post" class="basic-grey">
<h1>
咨询函
<span>请填写以下信息并提交咨询，我们会尽快与您取得联系！</span>
</h1>
<label>
<span>您的联络邮箱 :</span>
<br/>
<input id="mailAddress" type="email" name="mailAddress" placeholder="您的联络邮箱"/>
</label>
<label>
<span>防伪识别码 :</span>
<br/>
<input id="snno" type="text" name="snno" placeholder="请输入对象产品防伪识别码中的8位编码"/>
</label>
<div id="wrapper">
<div id="drag">
<div class="drag_bg"></div>
<div class="drag_text slidetounlock" onselectstart="return false;" unselectable="on" style="color:#000">
请按住滑块，拖动到最右边
</div>
<div class="handler handler_bg"></div>
</div>
</div>
<br/>
<label>
<span> </span>
<input type="button" class="button" value="提交"/>
</label>
</form>
<script>
$('#drag').drag();
</script>
</body>
</html>
效果图如下：
手机端：
网页端：
总结
但是有个问题，在网页端功能没有问题，手机上滑动无反应。如需手机端实现的请另寻方法。
转载请声明出处。
扫一扫
1213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
