jQuery-UI拖拽特效

最新推荐文章于 2023-11-17 19:41:30 发布

小歘欻

最新推荐文章于 2023-11-17 19:41:30 发布

阅读量261

点赞数

分类专栏： HTML 文章标签： html5 css javascript jquery

本文链接：https://blog.csdn.net/qq_33840688/article/details/118973677

版权

HTML 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="jquery-ui.js"></script>
		<script>
			$(function(){
				// 拖拽函数
				$('#a').draggable({
					// 限定x轴拖拽
					// axis:'x',
					// 限定不能超出父级元素 高度等同与父级没必要设定x
					containment:'parent',
					// 设置拖动时的透明度
					opacity:0.6,
					
					drag:function(ev,ui){
						// 显示移动的距离
						$('#c').val(parseInt(100*ui.position.left/750))
						// 设置拖动时后面变灰
						$('.grey').css({'width':ui.position.left})
					}
				})
			})
		</script>
		<style>
			.div1{
				margin: 0 auto;
				height: 50px;
				width: 900px;
				position: relative;
			}
			#b{
				height: 50px;
				width: 800px;
				border: 1px solid #000;
				background-color: white;
				font-size: 0px;
			}
			.grey{
				position: absolute;
				left: 1px;
				height: 50px;
				background-color: #888888;
				opacity: 0.2;
			}
			#c{
				height: 48px;
				width: 50px;
				position: absolute;
				right: 20px;
				top: 0px;
				font-size: 30px;
				line-height: 48px;
				text-align: center;
			}
			#a{
				height: 50px;
				width: 50px;
				background-color: gold;
			}
		</style>
	</head>
	<body>
		<div class="div1">
			<div id="b">
				<span class="grey">
					
				</span>
				<div id="a">
				
				</div>
			</div>
			<input type="text" name="" id="c" value="0" />
		</div>
	</body>
</html>

ui.position.left:获取当前距离左边移动了多少像素。

小歘欻

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-UI拖拽特效

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery-ui.js"></s.
复制链接

扫一扫

专栏目录