用js做一个可显示可拖动的缩放数值条

最新推荐文章于 2023-05-25 15:41:33 发布
最新推荐文章于 2023-05-25 15:41:33 发布
阅读量369 收藏 1
点赞数
分类专栏： 前端 文章标签： 1024程序员节 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44878999/article/details/127491130
版权

说明：可拖拽数值条进行值的变化；单击缩放按钮则+1（可设定）；长按则持续+5（可设定）；点击恢复则返回到最初值（可设定）；值的范围为0~100（可设定），超出则按0/100作为最终值；zoom.value内存放着值，可进行传参，应用于你的程序。

 

用js制作缩放拖动条

 controlCamera.js

/*用于云台控制界面
 * 主要功能有：	
 * 				传递方向控制参数、传递缩放参数（值为zoom.value内的值）
 * 				缩放点击效果（点击加1，长按连续加5）
 * 
 * */
				var oldvalue='';//为存放当前操作的id
		        let time="";//延时时间初始化
		        let lock=true;//锁，防止单击与长按相互冲突
				var minvalue=0;//设定范围最小值
				var maxvalue=100;//设定范围最大值
				var inivalue=50;//设定范围最初值
				var short=1;//短按增（减）量
				var long=5;//长按增（减）量

//减小数值，单击减1
			    function minus(){
			    	if(lock){
				    	var num=document.getElementById("zoom").value;
				    	if(num==minvalue){
				    		num=minvalue;
				    	}
				    	else{
				    		num=Number(num)-short;
				    	}
						document.getElementById("zoom").value=num;
						document.getElementById("showZoom").innerHTML=num;
			    	}
			    }
//减小数值，长按1s持续减5		    
				function downMinus(){
		            time=setInterval(()=>{
		            	lock=false;
				    	var num=document.getElementById("zoom").value;
				    	num=Number(num)-long;
				    	if(num<minvalue){
				    		num=minvalue;
				    	}
						document.getElementById("zoom").value=num;
						document.getElementById("showZoom").innerHTML=num;
		             },1000)
 
		        }			    
//恢复默认值			    
			    function repeat(){
			    	var num=inivalue;
					document.getElementById("zoom").value=num;
					document.getElementById("showZoom").innerHTML=num;
			    }
//增加数值，单击加1		
   			    function plus(){
		    		if(lock){
				    	var num=document.getElementById("zoom").value;
				    	if(num==maxvalue){
				    		num=maxvalue;
				    	}
				    	else{
				    		num=Number(num)+short;
				    	}
						document.getElementById("zoom").value=num;
						document.getElementById("showZoom").innerHTML=num;
			   	 	}
			    }
//增加数值，长按1s持续加5			    	    
				function downPlus(){
		            time=setInterval(()=>{
		            	lock=false;
				    	var num=document.getElementById("zoom").value;
				    	num=Number(num)+long;
				    	if(num>maxvalue){
				    		num=maxvalue;
				    	}
						document.getElementById("zoom").value=num;
						document.getElementById("showZoom").innerHTML=num;
		             },1000)
 
		        }
//松开鼠标计时器清零，重新计时
		        function up(){
		        
		            clearTimeout(time);
		        
                    setTimeout(()=>{
               			lock=true;
           			})
		        }
//将缩放值显示
		        function range(){
		        	document.getElementById("showZoom").innerHTML=document.getElementById("zoom").value;
		        }		        
//点击事件
			    document.getElementById("repeatbtn").addEventListener("click", function(){repeat()});

 可在此处进行数值范围的设定：

 id值图示：

 

 

main.html全部内容如下：

<!DOCTYPE html>
<html >
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--360浏览器优先以webkit内核解析-->
		<title>main</title>
		<link href="./css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
		<link href="./css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
		<link href="./css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
		<link href="./css/style.min.css" th:href="@{/css/ckplayer.css}" rel="stylesheet"/>

		<style type="text/css">
			.setpadding{
			padding-top:0px;
			padding-bottom:0px;
			padding-left:3px;
			padding-right:2px;

			}
			.clearmargin{
			margin-top:0px;
			margin-bottom:0px;
			margin-left:0px;
			margin-right:0px;

			}

		</style>
	</head>
	<body>
		 <div class="col-md-4 clearmargin setpadding" style="padding-top:25px">
			<form >
				<div class="col-md-3 clearmargin setpadding" style="width:25%">
					<button id="minusbtn" onmousedown="downMinus()" onmouseup="up()" onclick="minus()" class="btn btn-w-m btn-default" style="min-width:43px;font-size:20px;width:40px;height:40px;border-radius:100% 10% 10% 100%;padding-top:0px;margin-top:3px!important" type="button"><i class="fa fa-search-minus" style="padding-top:10px"></i></button>		         
				</div>
				<div class="col-md-2 " style="padding:0">
					<div id="showZoom" style="padding-top:10px;font-size:20px;" >50</div>
				</div>
				<div class="col-md-1 " style="padding:0;font-size:20px;margin-top:10px">%</div>
				<div class="col-md-3 clearmargin setpadding" style="width:25%">
					<button id="plusbtn" onmousedown="downPlus()" onmouseup="up()" onclick="plus()" class="btn btn-w-m btn-default" style="min-width:43px;font-size:20px;width:40px;height:40px;border-radius:10% 100% 100% 10%;padding-top:0px;margin-top:3px!important" type="button"><i class="fa fa-search-plus" style="padding-top:10px"></i></button>		         
				</div>
				<div class="col-md-3 clearmargin setpadding" style="width:25%">
					<button id="repeatbtn" class="btn btn-w-m btn-default" style="min-width:43px;font-size:20px;width:40px;height:40px;border-radius:100%;padding-top:0px;margin-top:3px!important" type="button"><i class="fa fa-repeat" style="padding-top:10px"></i></button>		         
				</div>
				<div class="col-md-12 clearmargin setpadding" style="margin-top:10px">
					<input type="range" id="zoom"  value="50" oninput="range()" >
				</div>
			</form>
		 </div>
		 <!--    云台控制功能 （上下左右及缩放）-->    
		<script src="./js/controlCamera.js"></script> 
	</body>
</html>

我的项目目录：

 

项目代码（百度云资源）：

链接：https://pan.baidu.com/s/1QIVypWhdFMEl2i3XA3W5gw?pwd=y4q5 
提取码：y4q5 
 

滔滔不会轻易狗带
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 实现 滑动条（一）
03-30
js 实现 滑动条（一）! 值得下载看看!资源免费,大家分享!!
拉动滚动条改变输入框的数值
weixin_52092911的博客
08-10 491
页面画布来布局这条代码的话就是那个滚动条了,高度24命名一个scrollBar1这个命名下面的输入框调用它,给滚动条宽度为237, Orientation有两个属性值Horizontal这个值是横排的意思还有一个竖排的,滚动条向左边移动103,滚动条向上51,滚动条初始值为1从一开始，最大值100就是滚动条从1开始可以拉到100, SmallChange="1"这个的话就是点上一页下一页那里的按钮点一次加一或者减一,拉的时候下面的输入框数字也跟着变化。上面的滚动条可以拉的。......
Android - SeekBar - 拖动条（拖动改变数值）
你的博客
07-23 1850
效果 布局 <TextView android:text="当前数值：" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <TextView android:text="20" android:layout_width="wrap_content" android:layout_
js左右拖动画布、js鼠标左右拖动改变滚动条位置
最新发布
李程程的博客
05-25 1171
js左右拖动画布、js鼠标左右拖动改变滚动条位置、中间绿色画布，鼠标左键长按可以左右拖动
js实现进度条的拖拽_☆*往事随風*☆的博客
☆往事随風☆的博客
06-14 2967
文章目录前言一、代码分析1.搭建一个进度条2.对进度条进行一定的样式修改3.对进度条应用js代码4.js整体代码5.运行结果总结 前言 利用js实现一个进度条拖拽的demo。 一、代码分析 1.搭建一个进度条 html代码如下（示例）： <!-- 外部容器 --> <div class="wrappers"> <!-- 包裹进度条 --> <div class="wrapper"> <
写了一个layout，拖动条连贯，内容区可为iframe
10-30
写了一个layout，拖动条连贯，内容区可为iframe
qt编写的点云显示工具可拖动缩放旋转
12-21
QGLWidget实现的点云显示工具，按住鼠标左键移动可实现旋转，按住鼠标右键移动可实现点云的拖动，滚动滚轮实现点云的缩放。开发环境：qtcreator4.8.2， qt版本5.12.2
JS+CSS实现可拖动的弹出提示框
10-24
主要介绍了JS+CSS实现可拖动的弹出提示框,涉及针对鼠标事件及html元素的操作技巧,非常具有实用价值,需要的朋友可以参考下
C#PictureBoxx显示图片，可鼠标拖动和缩放
11-03
C#PictureBox实现图片拖动和缩放，利用鼠标事件实现 VS2015 .net Framwork4.5.2
JS可拖动QQ在线客服代码
04-07
JS可拖动QQ在线客服代码，可自定义高度和自定义QQ号码，兼容主流浏览器IE、Chrome、Safair等。
js可拖动滚动条-插件
11-16
js实现简易可拖动滚动条，可自行修改样式和赋值，无需引入文件。 js实现简易可拖动滚动条，可自行修改样式和赋值，无需引入文件。 js实现简易可拖动滚动条，可自行修改样式和赋值，无需引入文件。
js滑动条（拖动条）源代码
03-20
NULL 博文链接：https://jlwangjinshuang-163-com.iteye.com/blog/790405
原生JS实现拖拽垂直进度条
weixin_60073892的博客
09-13 232
原生JS实现拖拽垂直进度条
JS特效代码大全（五）js滑动条（拖动条）效果
weixin_34226182的博客
12-28 127
大家都知道，大部分网站都选择了左侧菜单右侧内容这种普遍的做法。在屏幕比较小的情况下，如果右侧是大量的报表数据，你是不是很有冲动想把左侧的菜单向左拉或隐藏呢？在左侧菜单和右侧内容的大小都不是很固定的情况下，如果能有个滑动条（拖动条）可以左右调节宽度是很多设计人员希望达到的效果，对于编程人员来说可能会用滑动条控件来解决这个问题，但是对于前台设计人员来说很有难度的。那我这次共享的j...
原生JS实现拖拽进度条显示相应的内容
越陌度阡
08-10 1515
今天要分享的是运用原生JS实现拖拽进度条显示相应的内容，效果如下： 以下是代码实现，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&.........
JS拖拽的n种例子
Benxiaohai_311的博客
03-26 2263
一、第一种 <!DOCTYPE html> <!--create by ydj on 2018-08-12--> <html> <head> <meta charset="UTF-8"> <title>拖动的水平条</title> <style> *{ margin: 0; padding: 0; } .scroll{ width: 400px;
js window.print打印页面缩放
qq_38060935的博客
08-12 4722
javascirpt``` document.getElementsByTagName(‘body’)[0].style.zoom=0.8;
原生js拖拽滑动条
前端劝退工程师
09-28 1万+
【代码】原生js拖拽滑动条。
前端----HTML 拖动条的实现
热门推荐
nO0b
09-24 1万+
拖动条的实现是HTML5 对input标签 type值的新增项(新增项还有很多,比如颜色选择器,日期选择器等) 直接说怎么用: &lt;input type="range" min="0" max="100" step="5"/&gt; 效果如下:  拖动条当然是可以拖动的, 拖动的过程中会改变该input的 value值 而 min  max  step则设置了 最小值 最大值...
qt 创建一个roi模块，可旋转可拖动缩放
02-06
你好！为了创建一个可旋转可拖动缩放的ROI（区域感兴趣）模块，你可以使用Qt的QGraphicsView和QGraphicsScene模块。 具体来说，你可以在QGraphicsScene中创建一个QGraphicsEllipseItem或QGraphicsRectItem，然后设置它的flag为QGraphicsItem::ItemIsMovable和QGraphicsItem::ItemIsSelectable。这样，当你在QGraphicsView中点击并拖动这个图形时，就可以移动它。 为了实现旋转功能，你还需要设置它的flag为QGraphicsItem::ItemIsRotatable。这样，你就可以通过调用setRotation()函数来旋转这个图形了。 你还可以使用QGraphicsView的setTransformationAnchor()函数来设置缩放的锚点，然后调用setScale()函数来缩放图形。 希望这些信息对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值