开发者社区> 芝麻软件> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介: 1.效果 在该区域内,手按住拖动,该模块可上下滑动,至最顶或最底部,滑动出现空白区域将自动缩回 2.代码 首页 .area-item { height: 100px; line-...
+关注继续查看

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,局部商品列表信息滚动(局部滚动条) 1.通过jq设置subCategoryScroll的高度为屏幕显示高度(假设为100),设置productlist的高度为列表信息的实际高度(假设为300) 商品信息区域 2.
819 0
奇妙的滚动css+html
GetUserMedia实例 #test {height: 60px;width: 40px;margin: 0 0 0 150px;overflow: hidden;background-color: #32db64;position:...
723 0
《HTML 5与CSS 3权威指南 》 (第2版·下册)——第19章 19.3.5
本节书摘来自华章出版社HTML 5与CSS 3权威指南(第2版·下册)——第19章 19.3.5 ,作者: 陆凌牛著.更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1128 0
【HTML、JAVASCRIPT、CSS】2、HTML语言入门2
1、HTML中实现超链接 超链接以标签实现,具体方法如: 无标题文档 打开百度 执行后发现网页中出现了“打开百度”的链接并链接到标签中的网址。
927 0
+关注
芝麻软件
编程语言,框架相关专家
579
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载