js拖动滑块和点击水波纹效果实例代码


Posted in Javascript onOctober 16, 2018

拖动滑块效果:

先看看效果图:

js拖动滑块和点击水波纹效果实例代码

<!doctype html>
<html>
 
 <head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title>Document</title>
  <script type="text/javascript" src=""></script>
 
  <style type="text/css">
   input[type="range"] {
    width: 80%;
    background-color: red;
    border-radius: 15px;
    -webkit-appearance: none;
    height: 1px;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
   }
 
   input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: green;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    border: none;
    position: relative;
    z-index: 10;
   }
  </style>
  <script type="text/javascript">
   $(function() {
    $(".input_1").change(function() {
     $("p.p1").text($(this).val());
    })
 
    setInterval(function() {
     $("p.p2").text($(".input_2").val());
    }, 0.01)
   })
  </script>
 </head>
 
 <body>
  <p>添加change事件</p>
  <input type="range" step="0.01" min="0" max="5" value="0">
  <p>0</p>
  <p>添加定时器</p>
  <input type="range" step="0.01" min="0" max="5" value="0">
  <p>0</p>
 </body>
 
</html>

js拖动滑块和点击水波纹效果实例代码

<!DOCTYPE html>
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>鼠标拖动小方块</title>
<style type="text/css">
.lineDiv {
position: relative;
height: 5px;
background: red;
width: 300px;
margin: 50px auto;
}
 
.lineDiv .minDiv {
position: absolute;
top: -5px;
left: 0;
width: 15px;
height: 15px;
background: green;
cursor: pointer
}
 
.lineDiv .minDiv .vals {
position: absolute;
font-size: 20px;
top: -45px;
left: -10px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: blue;
}
 
.lineDiv .minDiv .vals:after {
content: "";
width: 0px;
height: 0px;
border-top: 6px solid blue;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
display: block;
margin-left: 11px;
}
</style>
</head>
 
<body>
<center>
<h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
</center>
<div id="lineDiv">
<div id="minDiv">
<div id="vals">0</div>
</div>
</div>
<script>
window.onload = function() {
 
var lineDiv = document.getElementById('lineDiv'); //长线条
var minDiv = document.getElementById('minDiv'); //小方块
var msg = document.getElementById("msg");
var vals = document.getElementById("vals");
var ifBool = false; //判断鼠标是否按下
 
//鼠标按下方块
minDiv.addEventListener("touchstart", function(e) {
e.stopPropagation();
ifBool = true;
console.log("鼠标按下")
});
 
//拖动
window.addEventListener("touchmove", function(e) {
console.log("鼠标拖动")
if(ifBool) {
var x = e.touches[0].pageX || e.touches[0].clientX; //鼠标横坐标var x
var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
var minDiv_left = x - lineDiv_left; //小方块相对于父元素(长线条)的left值 
if(minDiv_left >= lineDiv.offsetWidth - 15) {
minDiv_left = lineDiv.offsetWidth - 15;
}
if(minDiv_left < 0) {
minDiv_left = 0;
}
//设置拖动后小方块的left值
minDiv.style.left = minDiv_left + "px";
msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
}
});
//鼠标松开
window.addEventListener("touchend", function(e) {
console.log("鼠标弹起")
ifBool = false;
});
//获取元素的绝对位置
function getPosition(node) {
var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
var top = node.offsetTop;
current = node.offsetParent; // 取得元素的offsetParent
  // 一直循环直到根元素

while(current != null) {

left += current.offsetLeft;

top += current.offsetTop;

current = current.offsetParent;

}
return {
"left": left,
"top": top
};
}
}
</script>
</body>
 
</html>

兼容PC端和移动端

<!DOCTYPE html>
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>鼠标拖动小方块</title>
<style type="text/css">
.lineDiv {
position: relative;
height: 5px;
background: red;
width: 300px;
margin: 50px auto;
}
 
.lineDiv .minDiv {
position: absolute;
top: -5px;
left: 0;
width: 15px;
height: 15px;
background: green;
cursor: pointer
}
 
.lineDiv .minDiv .vals {
position: absolute;
font-size: 20px;
top: -45px;
left: -10px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: blue;
}
 
.lineDiv .minDiv .vals:after {
content: "";
width: 0px;
height: 0px;
border-top: 6px solid blue;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
display: block;
margin-left: 11px;
}
</style>
</head>
 
<body>
<center>
<h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
</center>
<div id="lineDiv">
<div id="minDiv">
<div id="vals">0</div>
</div>
</div>
<script>
window.onload = function() {
 
var lineDiv = document.getElementById('lineDiv'); //长线条
var minDiv = document.getElementById('minDiv'); //小方块
var msg = document.getElementById("msg");
var vals = document.getElementById("vals");
var ifBool = false; //判断鼠标是否按下
//事件
var start = function(e) {
e.stopPropagation();
ifBool = true;
console.log("鼠标按下")
}
var move = function(e) {
console.log("鼠标拖动")
if(ifBool) {
if(!e.touches) { //兼容移动端
var x = e.clientX;
} else {  //兼容PC端
var x = e.touches[0].pageX;
}
//var x = e.touches[0].pageX || e.clientX; //鼠标横坐标var x
var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
var minDiv_left = x - lineDiv_left; //小方块相对于父元素(长线条)的left值 
if(minDiv_left >= lineDiv.offsetWidth - 15) {
minDiv_left = lineDiv.offsetWidth - 15;
}
if(minDiv_left < 0) {
minDiv_left = 0;
}
//设置拖动后小方块的left值
minDiv.style.left = minDiv_left + "px";
msg.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
vals.innerText = parseInt((minDiv_left / (lineDiv.offsetWidth - 15)) * 100);
}
}
var end = function(e) {
console.log("鼠标弹起")
ifBool = false;
}
//鼠标按下方块
minDiv.addEventListener("touchstart", start);
minDiv.addEventListener("mousedown", start);
//拖动
window.addEventListener("touchmove", move);
window.addEventListener("mousemove", move);
//鼠标松开
window.addEventListener("touchend", end);
window.addEventListener("mouseup", end);
//获取元素的绝对位置
function getPosition(node) {
var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
var top = node.offsetTop;
current = node.offsetParent; // 取得元素的offsetParent
  // 一直循环直到根元素

while(current != null) {

left += current.offsetLeft;

top += current.offsetTop;

current = current.offsetParent;

}
return {
"left": left,
"top": top
};
}
}
</script>
</body>
 
</html>

设置滑块的滑动范围

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>鼠标拖动小方块</title>
<style type="text/css">
.lineDiv {
position: relative;
height: 5px;
background: red;
width: 95%;
margin: 50px auto;
}
 
.lineDiv .minDiv {
position: absolute;
top: -15px;
left: 0;
width: 35px;
height: 35px;
background: green;
cursor: pointer;
transition: all 0s;
}
 
.lineDiv .vals {
z-index: 100;
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 5px;
background: blue;
}
</style>
</head>
 
<body>
<center>
<h3>用鼠标拖动小方块<span id="msg">0</span>%</h3>
</center>
<div id="lineDiv">
<div id="vals"></div>
<!-- -->
<div id="minDiv"></div>
<!-- -->
</div>
<script>
window.onload = function() {
 
var lineDiv = document.getElementById('lineDiv'); //长线条
var minDiv = document.getElementById('minDiv'); //小方块
var minVals = document.getElementById('vals'); //左长线
var msg = document.getElementById("msg"); //最上面的信息
var ifBool = false; //判断滑块是否按下
 
var lineDiv_W = getPosition(lineDiv).width; //长线的长度
var lineDiv_L = getPosition(lineDiv).left; //长线距离html的left
 
var minDiv_W = getPosition(minDiv).width; //滑块的长度
var minDiv_L = getPosition(minDiv).left; //滑块距离html的left
 
var Slider_W_MAX = lineDiv_W - minDiv_W; //滑块可以滑动的最大值px,范围是0~Slider_W_MAX
 
var minNum = 0; //最小值
var maxNum = 500; //最大值
 
var startNum = 100; //起始值
var endNum = 400; //结束值
 
var min_Px = Slider_W_MAX / maxNum * startNum; //滑块可以滑动的最小px
var max_Px = Slider_W_MAX / maxNum * endNum; //滑块可以滑动的最大px
 
var minDiv_left=0; //当前滑块的位置
/*
 Slider_W_MAX  1元对应的px?     1
  maxNum    1   1px对应的金额?
*/
 
function initSlider(initPX) { //设置滑块的初始位置
console.log(initPX);
minDiv_left=initPX; //设置滑块的位置
minDiv.style.left = initPX + "px";
minVals.style.width = initPX + "px";
msg.innerText = parseInt(initPX / Slider_W_MAX * 100);
}
 
(function() { //初始化滑块位置
if(startNum >= 0) { //求出startNum对应的px
initSlider(Slider_W_MAX / maxNum * startNum)
}
})()
 
//事件
var start = function(e) {
ifBool = true;
//console.log("鼠标按下")
}
var move = function(e) {
//console.log("鼠标拖动")
if(ifBool) {
var x; //记录滑块距离html的距离left
if(!e.touches) { //兼容PC端
x = e.clientX;
} else { //兼容移动端
x = e.touches[0].pageX;
}
 
minDiv_left = x - lineDiv_L; //小方块相对于父元素(长线条)的left值 
if(minDiv_left >= Slider_W_MAX) {
minDiv_left = Slider_W_MAX;
}
if(minDiv_left < 0) {
minDiv_left = 0;
}
 
//设置拖动后小方块的left值
initSlider(minDiv_left)
 
}
}
var end = function(e) {
if(minDiv_left>max_Px){
initSlider(max_Px);
}
if(minDiv_left<min_Px){
initSlider(min_Px);
}
ifBool = false;
}
//鼠标按下方块
minDiv.addEventListener("touchstart", start);
minDiv.addEventListener("mousedown", start);
//拖动
window.addEventListener("touchmove", move);
window.addEventListener("mousemove", move);
//鼠标松开
window.addEventListener("touchend", end);
window.addEventListener("mouseup", end);
 
//获取元素的绝对位置
function getPosition(node) {
var width = node.offsetWidth; //元素宽度
var height = node.offsetHeight; //元素高度
var left = node.offsetLeft; //获取元素相对于其根元素的left值var left
var top = node.offsetTop; //获取元素相对于其根元素的top值var top
current = node.offsetParent; // 取得元素的offsetParent
 
// 一直循环直到根元素
while(current != null) {

left += current.offsetLeft;

top += current.offsetTop;

current = current.offsetParent;

}
return {
"width": width,
"height": height,
"left": left,
"top": top
};
}
}
</script>
</body>
 
</html>

点击水波纹效果:

js拖动滑块和点击水波纹效果实例代码

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>JS</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" rel="external nofollow" />
  <script type="text/javascript" src=""></script>
  <style type="text/css" media="screen">
   ul {
    font-size: 0;
    position: relative;
    padding: 0;
    width: 480px;
    margin: 40px auto;
    user-select: none;
   }
    
   li {
    display: inline-block;
    width: 160px;
    height: 60px;
    background: #E95546;
    font-size: 16px;
    text-align: center;
    line-height: 60px;
    color: white;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    cursor: pointer;
   }
    
   .slider {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: #1685D3;
    transition: all 0.5s;
   }
    
   .ripple {
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    position: absolute;
    opacity: 1;
   }
    
   .rippleEffect {
    -webkit-animation: rippleDrop .4s linear;
    animation: rippleDrop .4s linear;
   }
    
   @-webkit-keyframes rippleDrop {
    100% {
     -webkit-transform: scale(2);
     transform: scale(2);
     opacity: 0;
    }
   }
    
   @keyframes rippleDrop {
    100% {
     -webkit-transform: scale(2);
     transform: scale(2);
     opacity: 0;
    }
   }
  </style>
 
 </head>
 <body>
  <ul>
   <li>项目一</li>
   <li>项目二</li>
   <li>项目三</li>
   <li class="slider"></li>
  </ul>
 </body>
 <script>
  $("ul li").click(function(e) {
 
   if($(this).hasClass('slider')) {
    return;
   }
 
   var whatTab = $(this).index();
 
   var howFar = 160 * whatTab;
 
   $(".slider").css({
    left: howFar + "px"
   });
 
   $(".ripple").remove();
 
   var posX = $(this).offset().left,
    posY = $(this).offset().top,
    buttonWidth = $(this).width(),
    buttonHeight = $(this).height();
   console.log(posX, posY, buttonWidth, buttonHeight)
 
   $(this).append("<span class='ripple'></span>");
 
   if(buttonWidth >= buttonHeight) {
    buttonHeight = buttonWidth;
   } else {
    buttonWidth = buttonHeight;
   }
 
   var x = e.pageX - posX - buttonWidth / 2;
   var y = e.pageY - posY - buttonHeight / 2;
 
   $(".ripple").css({
    width: buttonWidth,
    height: buttonHeight,
    top: y + 'px',
    left: x + 'px'
   }).addClass("rippleEffect");
 
  });
 </script>
 
</html>
Javascript 相关文章推荐
JS input 数字验证代码
Jul 30 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
Jan 03 Javascript
浅谈javascript中的instanceof和typeof
Feb 27 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
JavaScript中Window对象的属性及事件
Dec 25 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
jquery实现简单实用的轮播器
May 23 jQuery
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
vue等两个接口都返回结果再执行下一步的实例
Sep 08 Javascript
js实现简易点击切换显示或隐藏
Nov 29 Javascript
ajax与jsonp的区别及用法
Oct 16 #Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 #Javascript
QRCode.js二维码生成并能长按识别
Oct 16 #Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 #Javascript
JavaScript实现表单注册、表单验证、运算符功能
Oct 15 #Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 #Javascript
jQuery轻量级表单模型验证插件
Oct 15 #jQuery
You might like
php 中的str_replace 函数总结
2007/04/27 PHP
PHP编码规范的深入探讨
2013/06/06 PHP
php二分查找二种实现示例
2014/03/12 PHP
非常全面的php日期时间运算汇总
2015/11/04 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
JavaScript中Math对象使用说明
2008/01/16 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
js触发select onchange事件的小技巧
2014/08/05 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
JavaScript面试开发常用的知识点总结
2016/08/08 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
2020/11/16 Javascript
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
python中使用smtplib和email模块发送邮件实例
2014/04/22 Python
用pycharm开发django项目示例代码
2018/10/24 Python
python实现三次样条插值
2018/12/17 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
python实现复制大量文件功能
2019/08/31 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
python输出数学符号实例
2020/05/11 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
解决pycharm导入numpy包的和使用时报错:RuntimeError: The current Numpy installation (‘D:\\python3.6\\lib\\site-packa的问题
2020/12/08 Python
埃弗顿足球俱乐部官方网上商店:Everton Direct
2018/01/13 全球购物
应届毕业生自荐信例文
2014/02/26 职场文书
关于感谢信的范文
2015/01/23 职场文书
公司庆典欢迎词
2015/01/26 职场文书
简单的辞职信模板
2015/05/12 职场文书
2015年教学管理工作总结
2015/05/20 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python