本篇文章就给大家介绍js实现拖动滑块效果和点击水波纹效果的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

拖动滑块效果：

先看看效果图：

Document

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;

}

$(function() {

$(".input_1").change(function() {

$("p.p1").text($(this).val());

})

setInterval(function() {

$("p.p2").text($(".input_2").val());

}, 0.01)

})

添加change事件

0

添加定时器

0

鼠标拖动小方块

.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;

}

用鼠标拖动小方块0%

0

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

};

}

}

兼容PC端和移动端

鼠标拖动小方块

.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;

}

用鼠标拖动小方块0%

0

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

};

}

}

设置滑块的滑动范围

鼠标拖动小方块

.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;

}

用鼠标拖动小方块0%

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

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

};

}

}

点击水波纹效果：

JS

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;

}

}

  • 项目一
  • 项目二
  • 项目三

$("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("");

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");

});

总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程，jQuery视频教程，bootstrap教程！

html实现鼠标移动波纹效果,js实现拖动滑块和点击水波纹效果相关推荐

  1. android水波纹动画制作,Framer之事件 | 如何制作安卓点击水波纹效果？

    之前的 Framer 教程都是按照个人喜好去写的,没有按照难易程度形成系列.为了让大家能更好地入门,我准备由易到难写一个系列教程,尽量保持在每周一篇的频率. 导读:事件是 Framer 中的一个重要概 ...

  2. android水波纹点击动画,android 控件点击水波纹效果的几种方案

    目前我所知道的至少有三种可以实现点击水波纹的效果 第一种:安卓自带的方法 在安卓中有自带的一种属性,可以实现水波纹的效果,就是在所需要点击的控件属性加上如下代码: android:background ...

  3. Android点击水波纹扩散效果整理（附带一个自定义的水波纹效果控件）

    很久很久没有写博客了,说来也有点惭愧.正好最近整理自己的项目工程目录,看到一些值得分享的控件,准备在之后的几篇博客中准备把它们陆续搬运上来. 这篇博客准备整理一下Android Material De ...

  4. Flutter 点击水波纹 效果

    FlatButton 原本已经包含了 点击水波纹 效果 不过目前已经弃用,由TextButton 代替,但 TextButton 的效果感觉没有 FlatButton 的好,另外 MaterialBu ...

  5. Flutter TabBar 标签栏背景颜色、点击水波纹颜色配置

    题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精. Flutter是谷歌推出的最新的移动开发框架. [x1]微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注 [x2] ...

  6. 点击水波纹效果html5,使用CSS实现逼真的水波纹点击效果

    这篇文章特别介绍如何使用CSS来完成水波纹的效果. div的层层叠叠 虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往 ...

  7. css的滑动门效果,JS+CSS实现简易实用的滑动门菜单效果

    本文实例讲述了JS+CSS实现简易实用的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一个简洁实用的CSS+JavaScript滑动门导航菜单,写时候,我尽量用最少的代码写出兼容性好的代码,希 ...

  8. 原生js实现拖动滑块验证

    拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...

  9. 纯HTML和JS实现拖动滑块验证效果

    效果展示: 代码: index.html <!DOCTYPE html> <html lang="en"><head><meta char ...

最新文章

  1. 启动tomcat时jmx port被占用
  2. MapReduce的编程规范
  3. 计算机网络——TCP/IP参考模型和五层参考模型
  4. pythonsql注入步骤_防止SQL注入解决方案
  5. JavaScript自适应图片大小的弹出窗口
  6. 【windows核心编程】线程局部存储TLS
  7. 图像处理中的差分求导计算和相应的卷积核(filter)
  8. 下载sqlserver2012 试用_大肥虫助手app下载-大肥虫助手最新版本下载v7.0.4
  9. 如何使用视频剪辑软件将qsv格式视频转换为MP4格式
  10. 【SaaS播客】onboard4. 连线硅谷顶尖Product-Led Growth公司产品经理，聊聊如何打造一流PLG产品
  11. 继勒索病毒“永恒之蓝”445端口被封之后，在公网实现smb文件共享
  12. LeetCode 6009. 使两字符串互为字母异位词的最少步骤数
  13. （10月25日）云服务器搭建青龙面板保姆级教程
  14. 显示器是个人计算机上的一个重要输出设备,东大17秋学期《计算机应用基础》在线作业123满分答案...
  15. (一)软件测试专题——之Linux常用命令篇01
  16. java 如何上传文件_java如何上传文件 | 快速入门
  17. 【51单片机】普中A2开发板 模块化编程 单片机入门 实例教学目录
  18. 【前端：css画三角形】
  19. 巧妇能为少米之炊（3）——压缩饼干（ZRAM）
  20. 做人的基本原则（看完终身受益）

热门文章

  1. graphpad两组t检验_SCI科研写作：如何利用GraphPadprism 8.0进行成组t检验
  2. 整理一下：遇到的Java服务故障问题及排查方案
  3. 【阿里巴巴】职级、薪酬、绩效全认知
  4. STM32F1xx HAL库 中文详解 之 综合概述（一）
  5. 机器视觉 脸部关键点检测（脸部识别）安卓应用App（Face Mesh）基于mediapipe。
  6. 基带、基带信号和基带传输（附带频带和宽带）
  7. 金蝶云星空-重构管理中心与数据库
  8. 区块链是如何演化的？
  9. laya开发游戏框架--UIMgr
  10. 苹果计算机 win10,苹果手机如何投屏到win10电脑上？iPhone投屏到win10电脑方法步骤...