JS——jquery UI
2024-10-20 03:50:55
1. draggable()
滑动条demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.con{
width:300px;
height:300px;
border:1px solid #000;
margin:50px auto 0;
} .box{
width:50px;
height:50px;
background-color:hotpink;
cursor:pointer;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
//使得box可以鼠标拖动
$('.box').draggable({
//约束元素在父级内拖动
containment:'parent',
//约束元素只能横向拖动
axis:'x',
//元素拖动时透明度变为0.6
opacity:0.6,
//ui里面有什么可以用console.log(ui)查看
drag:function (ev,ui) {
var nowleft = ui.position.left;
}
});
})
</script>
</head>
<body>
<div class="con">
<div class="box"></div>
</div>
</body>
</html>
最新文章
- HTML5笔记:跨域通讯、多线程、本地存储和多图片上传技术
- ubuntu入门
- RDLC隔行变色的实现
- SqlServer性能优化 自定义动化性能收集(四)
- LaTeX学习教程
- iOS7初体验(3)——图像资源Images Assets
- Facebook开源项目:我们为什么要用Fresco框架?
- java异常分类(运行时异常,可检查异常)
- C++ 泛型编程/模板 泛函编程/Lambda/λ演算
- mysql查询结果写入文件
- 【USACO】草地排水
- 14. leetcode 383. Ransom Note
- springboot 问题总结
- Setup Mission End
- linux虚拟机网络服务问题
- FortiGate抓包 Sniffer
- JDK源码核心包
- 2019/3/19 wen 运算符
- [UE4]使用UnrealVS扩展快速编译C++代码
- Delphi 7~XE系列升级安装Indy10.6
热门文章
- plsql developer v12.1的使用
- puppet插件fact和hiera(puppet自动化系列3)
- BarTender SDK 实现调用模板条码打印
- webStorage
- error C2144: 语法错误:“int”的前面应有“;”
- 决策树算法原理及JAVA实现(ID3)
- 1、转载 bwa的使用方法
- Linux 启动顺序
- 8、泛型程序设计与c++标准模板库4.标准c++库中的算法
- Java 散列表的实现