
这样一个滑块,请问如何实现以下效果:
拖拽按钮到尾部时,滑块内的字变成“停止成功,并出现遮罩层,遮罩层上有确认取消按钮,点击确认,跳转到其他页面,点击取消,则滑块回复到最开始的样子
如果拖拽长度较小,则滑块会返回到原始位置
滑块不可点击,只能拖拽才能实现效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动停止充电</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
*{margin:0;padding:0}html,body{text-align:center;width:100%;height:100%}body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#slide-wrapper{width:360px;position:relative;padding:50px;background:#ecf0f1;margin:0 auto}#slider{padding:20px;position:relative;border-radius:2px;background-color:#fdeb9c;overflow:hidden;text-align:center}#slider.success{background-color:#e5ee9f}#label{width:40px;position:absolute;left:0;top:0;height:100%;background:#e67e22;z-index:999;cursor:pointer}#labelTip{z-index:9}#reset-btn{margin:20px 0 10px 0}@media screen and (max-width:640px){#slide-wrapper{width:64%}}p{padding:0 10px;word-wrap:break-word}
</style>
</head>
<body>
<div id="slide-wrapper">
<input type="hidden" value="" id="lockable"/>
<div id="slider">
<span id="label"></span>
<span id="lableTip">滑动停止充电</span>
</div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
"use strict";function SliderUnlock(g,c,f,e){var a=this;var b=a.checkElm(g)?$(g):$;var c=a.checkObj(c)?c:new Object();var f=a.checkFn(f)?f:function(){};var e=a.checkFn(e)?e:function(){};var d={labelTip:typeof(c.labelTip)!=="undefined"?c.labelTip:"Slide to Unlock",successLabelTip:typeof(c.successLabelTip)!=="undefined"?c.successLabelTip:"Success",duration:typeof(c.duration)!=="undefined"||!isNaN(c.duration)?c.duration:200,swipestart:typeof(c.swipestart)!=="undefined"?c.swipestart:false,min:typeof(c.min)!=="undefined"||!isNaN(c.min)?c.min:0,max:typeof(c.max)!=="undefined"||!isNaN(c.max)?c.max:b.width(),index:typeof(c.index)!=="undefined"||!isNaN(c.index)?c.index:0,IsOk:typeof(c.isOk)!=="undefined"?c.isOk:false,lableIndex:typeof(c.lableIndex)!=="undefined"||!isNaN(c.lableIndex)?c.lableIndex:0};a.elm=b;a.opts=d;a.swipestart=d.swipestart;a.min=d.min;a.max=d.max;a.index=d.index;a.isOk=d.isOk;a.lableIndex=d.lableIndex;a.success=f;a.always=e}SliderUnlock.prototype.checkElm=function(a){if($(a).length>0){return true}else{throw"this element does not exist."}};SliderUnlock.prototype.checkObj=function(a){if(typeof a==="object"){return true}else{throw"the params is not a object."}};SliderUnlock.prototype.checkFn=function(a){if(typeof a==="function"){return true}else{throw"the param is not a function."}};SliderUnlock.prototype.init=function(){var a=this;a.updateView();a.elm.find("#label").on("mousedown",function(b){var c=b||window.event;a.lableIndex=c.clientX-this.offsetLeft;a.handerIn()}).on("mousemove",function(b){a.handerMove(b)}).on("mouseup",function(b){a.handerOut()}).on("mouseout",function(b){a.handerOut()}).on("touchstart",function(b){var c=b||window.event;a.lableIndex=c.originalEvent.touches[0].pageX-this.offsetLeft;a.handerIn()}).on("touchmove",function(b){a.handerMove(b,"mobile")}).on("touchend",function(b){a.handerOut()})};SliderUnlock.prototype.handerIn=function(){var a=this;a.swipestart=true;a.min=0;a.max=a.elm.width()};SliderUnlock.prototype.handerOut=function(){var a=this;a.swipestart=false;if(a.index<a.max){a.reset()}};SliderUnlock.prototype.handerMove=function(c,b){var a=this;if(a.swipestart){c.preventDefault();var c=c||window.event;if(b=="mobile"){a.index=c.originalEvent.touches[0].pageX-a.lableIndex}else{a.index=c.clientX-a.lableIndex}a.move()}};SliderUnlock.prototype.move=function(){var a=this;if((a.index+0)>=a.max){a.index=a.max-0;a.swipestart=false;a.isOk=true}if(a.index<0){a.index=a.min;a.isOk=false}if(a.index==a.max&&a.max>0&&a.isOk){a.success()}a.backgroundTranslate();a.updateView()};SliderUnlock.prototype.reset=function(){var a=this;a.index=0;a.elm.find("#label").animate({left:a.index},a.opts.duration).next("#lableTip").animate({opacity:1},a.opts.duration);a.updateView()};SliderUnlock.prototype.backgroundTranslate=function(){var a=this;a.elm.find("#label").css("left",a.index+"px").next("#lableTip").css("opacity",1-(parseInt($("#label").css("left"))/a.max))};SliderUnlock.prototype.updateView=function(){var a=this;if(a.index==(a.max-0)){$("#lockable").val(1);var b={filter:"alpha(opacity=1)","-moz-opacity":"1",opacity:"1"};a.elm.addClass("success").find("#lableTip").html(a.opts.successLabelTip).css(b)}else{$("#lockable").val(0);a.elm.removeClass("success").find("#lableTip").html(a.opts.labelTip)}a.always()};
</script>
<script>
$(function () {
var slider = new SliderUnlock("#slider", {
labelTip:"滑动停止充电",
successLabelTip:"成功"
}, function(){
if(confirm("您确定要停止充电吗")){
location.assign("http://www.baidu.com");
}
else{
slider.reset();
}
},function(){});
slider.init();
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>index</title>
<style>
* {
margin: 0;
padding: 0;
}
body{background:#000;}
.box {
width: 250px;
height: 250px;
position: absolute;
overflow: hidden;
background:pink;
outline:rgba(252,156,27,0.8) solid 25px;
}
</style>
</head>
<body>
<div class="box" id="box">
</div>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function(){
var OclientX,
OclientY,
NclientX,
NclientY,
flag = false,
obj = $(".box");
obj.mousedown(function(e){
flag = true; //鼠标按下后改变可拖动状态
e = e || event;
OclientX = e.pageX - $(this).offset().left; //计算出按下后鼠标相对对象左上角左边的距离
OclientY = e.pageY - $(this).offset().top; //计算出按下后鼠标相对对象左上角上边的距离
return false;
});
obj.mousemove(function(e){
e = e || event;
NclientX = e.pageX;
NclientY = e.pageY;
if(flag){
clientX = (NclientX - OclientX); //鼠标左边位置减去相对左上角左边位置可得拖动对象left
clientY = (NclientY - OclientY); //鼠标上边位置减去相对左上角上边位置可得拖动对象top
$(this).css({"left":clientX+"px","top":clientY+"px"});
}
return false;
});
obj.mouseup(function(){
flag = false; //松开鼠标改变可拖动装状态
return false;
});
});
</script>
</body>
</html>
在HTML5之前,如果要实现拖放效果,一般会使用mousedown、mousemove和mouseup三个事件进行组合来模拟出拖拽效果,比较麻烦。而HTML5规范实现了原生拖放功能,使得元素拖放的实现更加方便和高效。 默认情况下,图像...
想要实现这个跟随鼠标移动的效果,必须要懂得什么是JS的事件; 咱们先看看这个效果,这个带透明度的罩罩只有在鼠标移入图片的时候才会出现,这就涉及到了一个鼠标移入事件(onmouseover) 先写个基本的布局: <!...
标题36-js事件实现拖拽效果 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;拖拽效果&...
首先,类比于电脑桌面的图标拖拽平移,鼠标按下时进入事件,记录鼠标相对元素位置,然后鼠标移动,动态改变元素定位,最后鼠标松开,位置不再改变。 用到绑定的事件有:onmousedown,onmousemove,onmouseup。 值得...
实现思路代码实现mousedown事件mousemove事件mouseup事件效果 预备知识 鼠标事件mousedown,mousemove,mouseup; 实现思路 1.当鼠标移入元素并且点击时,触发mousedown事件,让元素变为可移动状态; 2.当鼠标在移动时...
用javaScript实现鼠标拖拽事件
本文实例为大家分享了js实现鼠标拖拽事件的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; ...
HTML <body> <div></div> </body> CSS div{ position: absolute; width: 200px; height: 200px; background: #369 ...JS window....
在博客上看到有基于jquery实现的 ... 发现元素如果设置有margin时...改为js实现,并增加了对magin的兼容 js效果链接 jquery效果链接 <!DOCTYPE html> <html> <head> ...
前几篇博客一直在讲鼠标的移动事件相关的效果,今天再来讲一讲如何利用鼠标事件实现拖拽div块移动的效果。效果如图: HTML代码: <div id="box"></div> CSS代码: * { margin: 0; padding: 0; } ...
拖动事件与手指事件 顾名思义,就是通过不同的触发条件来达到你想实现的拖动效果,至于第三条的可移动范围,可以是 父级dom 的宽高,也可以是 可见的视口宽高,具体根据自己的需求定制,下面会提供对应获取方法 ...
拖拽的三大事件: onmousedown 鼠标按下 onmousemove 鼠标移动 onmouseup 鼠标释放 这3个事件写拖拽在PC上是需要嵌套的。 话不多说,送上2种方式的代码,如下: 第一种方法 原理 根据以上原理实现托拽的代码如下: ...
要想实现拖拽功能需要用到两个库文件 //THREE.TrackballControls()轨迹球控件,最常用的控件,可以使用鼠标轻松的移动、平移,缩放场景。 TrackballControls.js //DragControls包含两个事件:dragstart、dragend。...
【JavaScript】使用js实现拖拽元素 文章关键要点 1、三个事件 onmousedown、onmousemove、onmouseout (onmousemove、onmouseout都在鼠标按下事件中) 2、鼠标按下获取元素的offsetLeft、offsetTop,鼠标距离可视...
想把图片拉到删除框内,图片就会被删除,我在用了removeChild() ...附上实现拉图片到删除框的JS代码。 function enter(e){ //var three=document.getElementById('three'); var b=e.dataTransfer.getData('aa');...
实现拖拽效果方法:利用JS监听鼠标的三个事件,共同配合来实现这个操作 (鼠标按下事件、鼠标释放事件、鼠标按下移动事件) 实现原理: 使用on来监听事件, 例:onmousedown监听鼠标按下事件;onmousemove监听鼠标...
注意:jquery.min.js请自行添加(没有可以百度下载)--><script src="../jquery.min.js"></script> 效果图: <!doctype html> <html> <head>...JS拖拽div<...
addEventListener()方法用于指向元素添加事件,注意在IE8及更早版本,opera7.0及更早版本都不支持addEventListener(),但是可以使用attchEvent()方法来进行添加事件 提示:使用removeEventListener()来溢出...
最近做了一个需求,要求实现客服按钮的拖拽效果。 本来以为只是一个简单的拖拽效果,最后做起来却发现在拖拽结束的时候会触发按钮的点击事件。 查了一些文章后解决了这个问题,下面贴上代码: html: <div ...
1.效果图: 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <style type="text/css"> #div1 { width: 350px;......
如果要设置物体拖拽,那么必须使用三个事件,并且这三个事件的使用顺序不能颠倒。 1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件 重点: 1、一定要绝对定位,脱离文档流才...
盒子拖拽 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head lang=&amp;quot;en&amp;quot;&amp;amp;gt; ...
HTML <div class="box"></div> CSS .box{ width: 50px; height: 50px; position: absolute;...分为三个事件,鼠标点击下去(onmousedown),鼠标移动时候(onmousemove),鼠标松开(mouseup事
之前用原生js中的H5中的api:gragstart,graggover,drop写的拖拽发现不能微调位置,于是改为用原生js来写拖拽效果。 我们一共会用到三个事件:mosedown,mosemove以及moseup。 第一种理解方式:(更易于理解) ...
概述:实现拖拽工作流程配置,可以鼠标左右移动元素,鼠标双击可以删除元素。 基本原理:就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变...
//拖拽文件刚到目标上 $$('#app-form').on('dragenter', function () { console.log("dragenter"); }); //拖拽在目标上,一直执行 $$('#app-form').on('dragover', function () { console.log("dragover"); $$('#...
分享一个用原生JS实现的可拖拽照片墙,效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta ...原生JS实现拖拽照片墙,实现照...
知识储备: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title&... width:
dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件. dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮 dragover:...
这里写的是一个原生js实现拖拽的效果,首先: 1、实现拖拽的三大事件,是要首先清楚的 onmousedown (鼠标按下的时候)、onmousemove(鼠标移动的时候)、onmouseup(鼠标松开的时候) 2、给目标元素加上...