文档章节

点击上下移动

史文帝
 史文帝
发布于 2017/01/15 14:11
字数 285
阅读 8
收藏 0

<!DOCTYPE html>

<html>

 

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

        <style>

            * {

                padding: 0;

                margin: 0;

            }

 

            .content {

                margin-top: 80px;

            }

 

            .box {

                width: 100px;

                height: 600px;

                border: 1px solid #000;

                overflow: hidden;

            }

 

            ul {

                list-style: none;

            }

 

            .top {

                width: 100px;

                height: 30px;

                margin-bottom: 10px;

                background-color: #FF4500;

                text-align: center;

                color: #fff;

            }

 

            .bottom {

                width: 100px;

                height: 30px;

                margin-top: 10px;

                background-color: slateblue;

                text-align: center;

                color: #fff;

            }

 

            .content_ul {

                width: 100%;

            }

 

            .li {

                width: 100%;

                height: 100px;

                text-align: center;

                font-size: 2rem;

                color: #fff;

            }

 

            .li:nth-of-type(odd) {

                background: #ff0000;

            }

 

            .li:nth-of-type(even) {

                background: #0000ff;

            }

        </style>

    </head>

 

    <body>

 

        <div class="content">

            <div class="top">TOP</div>

            <div class="box">

                <ul class="content_ul">

                    <li class="li">1</li>

                    <li class="li">2</li>

                    <li class="li">3</li>

                    <li class="li">4</li>

                    <li class="li">5</li>

                    <li class="li">6</li>

                    <li class="li">7</li>

                    <li class="li">8</li>

                </ul>

 

            </div>

            <div class="bottom">bottom</div>

        </div>

 

    </body>

 

</html>

<script>

    $(function() {

        var a = 0;

        var c = 100;

        $(".bottom ").click(function() {

            var box_coordinate = $(".box").offset(); //获取固定的盒子坐标

            var li_coordinate = $(".li:first").offset(); //获取第一个值的坐标

            var top = li_coordinate.top;

 

            if(parseInt(top)!=  parseInt(box_coordinate.top + 1)) {

                a += c;

                $(".content_ul").css("margin-top", a)

            } else {

                alert("已经到顶了哦")

            }

 

        })

 

        $(".top").click(function() {

            var box_coordinate = $(".box").offset(); //获取固定的盒子坐标

 

            var li_coordinate = $(".li:last").offset(); //获取最后一个值

            var top = li_coordinate.top;

 

            var height = $(".box").css("height");

            height = parseInt(height);

            if(parseInt(top) >= parseInt(height + box_coordinate.top +1) ) {

                a -= c;

                $(".content_ul").css("margin-top", a)

            } else {

                alert("已经到底了哦")

            }

 

        })

 

    })

</script>

© 著作权归作者所有

共有 人打赏支持
史文帝
粉丝 1
博文 24
码字总数 8566
作品 0
孝感
程序员
私信 提问
cordova怎么处理带上下左右和中间的确认键这种操作

本身的加载的html文件,怎么支持上下左右操作在html页面中移动光标,点击中间的确认按钮表示点击事件这种。 现在上下左右是当做html的滚动条来处理的,不是移动光标。

bluesky4485
2016/04/15
111
0
Unity - MeshMaker超强模型编辑器(二)之UV Exhibition

前言 为MeshMaker追加一个简易的UV编辑功能,但因为MeshMaker会替换掉所有共享顶点(位置相等,UV不等的顶点),所以UV必定会被打乱,所以这个其实很鸡肋,想要从无到有的实现展UV算法,但还...

qq992817263
2017/08/03
0
0
实在是不知道该怎么解决了。。。大家帮帮忙吧。。万分感谢。。。

由于 应用需要,该应用要在 机顶盒 上 使用,所以就 有 遥控器的 上下左右键 来选择view 移动焦点, 第一排 有 四个 spinner ,一个编辑框,和一个button ,现在想要实现 点击 键盘的 左键 ,...

黛曦葛溪
2012/08/07
386
3
RecyclerView进阶

上篇文章我们讲解了RecyclerView的基本使用,本篇就让我们承接上篇文章讲下RecyclerView的进阶使用。 没看过上篇的朋友可以点击右边的传送门:《RecyclerView基本使用》 背景 RecyclerView有...

安卓小哥
2017/12/26
0
0
MUI顶部选项卡,关于滑动的问题,求解答!

我用MUI框架写移动APP,用了一个顶部选项卡可以左右拖动的,在选项卡内部添加了一些内容之后导致选项卡的子页面可以上下滑动,同时还能左右滑动切换选项卡,按照正常逻辑来讲,当我们手指按下去上...

OSC_RHTnHb
2018/02/02
281
0

没有更多内容

加载失败,请刷新页面

加载更多

深入理解java虚拟机-垃圾收集器与内存分配策略

垃圾收集器与内存分配策略 引用计数法 就是给对象添加一个计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1,计数器为0的对象就是不可能再被使用的。 缺点:无法...

须臾之余
30分钟前
2
0
git 忽略不必要的文件

通过 git 的 ignore 策略来忽略一些不必要的或者是敏感的文件,达到加速开发和保护隐私的效果 文件中配置: 文件夹:/vendor 文件: .env通配符: src/*.js 注意: .gitignore文件只对还没...

echojson
36分钟前
0
0
Python+Appium自动化测试环境搭建

1.Android SDK 下载SDK并配置系统环境变量ANDROID_HOME。 2.Appium 2.1 直接下载安装 官网下载安装appium-desktop-setup.exe。 2.2 通过npm下载安装 appium本质是一个nodejs库所以要先安装n...

维他ViTa
今天
3
0
MacOS安装单机版HBase

MacOS安装HBase,必然是用于测试了,从简入手、从简配置。 直接通过brew安装即可: brew install hbase 成功安装后,验证是否成功,如果不出意外的话,应该有如下输出: RippleMBP:~ userna...

RippleChan
今天
4
0
linux下oracle随操作系统启动而启动

大家一定还记得,我们在windows下安装oracle后,重起windows,数据库会自动启动,但在linux下,如果我们重起了操作系统, 就会发现数据库需要手工去输入,这个本来有好处,让dba知道操作系统已经重起...

突突突酱
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部