html5怎么实现页面左右滑动(下图区域),可以左右滑动但不需要换页

html-css013

html5怎么实现页面左右滑动(下图区域),可以左右滑动但不需要换页,第1张

1、创建两个html文件,一个test一个test2。

2、打开test页面,在里面创建一个div,并给其添加onmousedown与move方法。

3、打开后我们发现是一个棕绿的页面。

4、定义两个变量,startx为鼠标按下的坐标,endx为鼠标移动的坐标。

5、实现鼠标点击执行的down方法,在里面通过clientX获得鼠标按下坐标,并赋值给startx。

6、接着在实现鼠标移动的move方法,获得鼠标移动的坐标,并通过startx与endx相减判断是否向左边滑动大于30的距离,是的话就切换到test2页面。

7、现在我们打开test页面,向左滑动会提示切换页面(这个可以去除),确定后就切换到了test2页面,向右滑动切换的方法同理。

在html文件中添加一个事件,就是当鼠标滑动到submit按钮上时,设置鼠标样式即可,具体例子如下:

<html>

<body>

<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>

<span style="cursor:auto">

Default</span><br />

<span style="cursor:pointer">

Pointer</span><br />            <!--这个就是你需要的-->

<span style="cursor:move">

Move</span><br />

<span style="cursor:e-resize">

e-resize</span><br />

<span style="cursor:ne-resize">

ne-resize</span><br />

<span style="cursor:nw-resize">

nw-resize</span><br />

<span style="cursor:text">

text</span><br />

<span style="cursor:wait">

wait</span><br />

<span style="cursor:help">

help</span>

</body>

</html>

悬浮按钮只需要设置按钮positi的属性为fixed即可。

例子:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>浮动按钮</title>

    <style>

        *

        {

            margin: 0px

            padding: 0px

        }

        #container

        {

            width: 1000px

            height: 3000px

            background-color: #1b6d85

            margin: auto

        }

        #div1

        {

            height: 600px

            background-color: #255625

        }

        #div2

        {

            height: 600px

            background-color: #c0a16b

        }

        #div3

        {

            height: 600px

            background-color: #b92c28

        }

        #div4

        {

            height: 600px

            background-color: #449d44

        }

        #div5

        {

            height: 600px

            background-color: #999999

        }

        .btn-style

        {

            width: 30px

            height: 120px

            position: fixed/*此处即是固定按钮位置的属性。*/

            left: 1500px

            top: 400px

        }

    </style>

</head>

<body>

<button class="btn-style">这是一个浮动按钮</button>

<div id="container">

<div id="div1">第一节</div>

    <div id="div2">第二节</div>

    <div id="div3">第三节</div>

    <div id="div4">第四节</div>

    <div id="div5">第五节</div>

</div>

</body>

</html>

效果图: