您的位置：首页 > Web前端 > HTML5

HTML5商城开发二通过位移实现拖动效果

2015-11-05 02:09 405 查看

1.效果

在该区域内，手按住拖动，该模块可上下滑动，至最顶或最底部，滑动出现空白区域将自动缩回

2.代码

<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<style type="text/css">
.area-item {
height: 100px;
line-height:100px;
border-bottom: 1px solid #333;
font-size: 50px;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src='js/jquery.mobile.custom.js'></script>
<script type="text/javascript">
$(function () {
$("#AreaList").height(2121);
$("#AreaScroll").height(1000);

//位置偏移量=真实高度-显示高度
var endPos = $("#AreaList").height() - $("#AreaScroll").height();

if (endPos > 0) {
var startY = 0;
var pos = 0;//真实位置
$("#AreaScroll").on("vmousemove", function (event) {
$("#AreaList").css("transform", "translateY(" + (event.clientY - startY - pos) + "px)");
});

$("#AreaScroll").on("vmousedown", function (event) {
startY = event.clientY;
});
$("#AreaScroll").on("vmouseup", function (event) {
//判断正反方向并求位移
var posi = -pos + event.clientY - startY;

if (posi > 0) {
pos = 0;
$("#AreaList").css("transform", "translateY(0px)");
}
if (posi < 0 && posi >= -endPos) {
pos = -posi;
$("#AreaList").css("transform", "translateY(" + posi + "px)");
}
if (posi < -endPos) {
pos = endPos;
$("#AreaList").css("transform", "translateY(" + (-endPos) + "px)");
}
});
}
});
</script>
</head>
<body>

<div id="AreaScroll" style="overflow: hidden;">
<div id="AreaList" style="transform: translateY(0px);">
<div class="area-item">0级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">11级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">12级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">13级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">一级台风</div>
<div class="area-item">2级台风</div>
</div>
</div>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

HTML5商城开发二 通过位移实现拖动效果

HTML5商城开发二通过位移实现拖动效果