jquery如何实现点击一个按钮 div框从右→左，再点击按钮 div框从刚刚的位置移动回原来的位置？

JavaScript014

jquery如何实现点击一个按钮 div框从右→左，再点击按钮 div框从刚刚的位置移动回原来的位置？,第1张

1、新建一个html文件，命名为test.html。

2、在test.html文件内，使用div标签创建一行文字，文字内容为“小明”。

3、在test.html文件内，设置div标签的id属性为mytext，主要用于下面通过该id获得div对象。

4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“切换内容”。

5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行func（）函数。

6、在js标签中，创建func()函数，在函数内，通过id(mytext)获得div对象，通过html()方法获得div内的文本内容，使用if语句判断获得的文字内容是否为指定的文本内容，如果不是，则通过html()方法改变文本内容。

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

<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>