HTML5商城开发二 通过位移实现拖动效果
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>
