js移动div怎么做出滑动的效果？

JavaScript07

js移动div怎么做出滑动的效果？,第1张

1：使用js的插件 目前主流的js库 比如jq 也有手势的插件，

2：还有移动端的zepto库 也有手势插件，

3：另外还有个叫QuoJS的手势插件 这个插件不依赖任何的库，

4：早期的应该是用wml语言支持的WMLScript实现。

5：举例：使用iscroll.js实现

1）下载iScroll.js，百度搜索iScroll.js下载即可

2）引入iScroll.js，在要使用滑动效果的地方，引入iScroll.js文件

3）编写规范的html格式

只有如下格式才能实现滑动效果

<div id="wrapper">

<div class="scroll">

这个区域可以滑动

</div>

</div>

如下格式不能滑动

<div id="wrapper">

<div class="other">这个区域可以滑动</div>

<div class="scroll">

这个区域不可以滑动了

</div>

</div>

只有wrapper的第一个子元素才能实现滑动效果。

4）编写js调用代码

var Scroll = new iScroll('wrapper',{hScrollbar:false, vScrollbar:false})

第一参数必需是滑动元素的父元素的id。

主要参数一览：

hScroll: true, 左右滑动，默认为true

vScroll: true,上下滑动

hScrollbar: true, 是否显示y轴滚动条，默认为显示

vScrollbar: true,是否显示X轴滚动条，默认为显示

在你原来的代码上进行了修改，加粗倾斜的部分是添加或者修改的位置

<script>

  var timer1 = null

  var el = null

  var left = 1

  function moveItRight() {

      if (parseInt(el.style.left) >(screen.width - 50)) //el.style.left = 0

        {

            left = -1

        }

        else if (parseInt(el.style.left) <= 0) {

            left = 1

        }

        el.style.left = parseInt(el.style.left) + 2 * left + 'px'//本题目最关键的一句代码，让el对象的左边距每次循环都增加2像素，也就是向右移动了2像素

      timer1 = setTimeout(moveItRight, 25)//隔25毫秒后运行一次moveItRight函数

  }

  window.onload = function () {

      el = document.getElementById("div1")

      el.style.left = '500px'

      moveItRight()

  }

</script>

<html>

<head>

<title>jquery或JS拖动DIV左右移动</title>

<script src="jquery-1.7.1.min.js"></script>

<style type="text/css">

    body {background-color: #fff }

    .win {position: absolute top: 0px left: 0pxwidth: 300pxheight: 222px}

    .title {height: 20pxwidth: 300px  position: absolutebackground-color: #0094ff float: inherit top: 0px left: 0px }

    .winCon { height: 200pxwidth: 298px position: absolute border: solid 

              border-width: 1px border-color: #0094ff border-top: none  float: inherit left: 0px top: 20px }

</style>

</head>

<body onload="showDiv(this,'test1')">

</body>

<script type="text/javascript">

    function showDiv(element, str) {

        $(document.body).append("<div class='win' id='win" + str + "'><div class='title' id='" + str + "'></div><div class='winCon'> 清新自在</div></div>")

        $("#" + str).mousedown(function (event) {

            var offset = $(this).offset()

            _x = event.clientX - offset.left

            _y = event.clientY + 20 - offset.top

            $("#win" + str).css({ "top": offset.top - 20 + "px" })

            $("#win" + str).mousemove(function (event) {

                _xx = event.clientX - _x

                _yy = event.clientY - _y

                this.style.left = _xx + "px"

                this.style.top = _yy + "px"

                this.style.zIndex = "100"

                return false

            })

            return false

        })

        $("#win" + str).mouseup(function () {

            $(this).unbind("mousemove")

            $(this).css({ "z-index": "-1" })

            return false

        })

    }

</script>

</html>