怎么用js实现类似手机切屏的左右滑动的效果

JavaScript010

怎么用js实现类似手机切屏的左右滑动的效果,第1张

这是自己封装的原生js方法,为了偷懒,用了电jqurey。调用方法如下:

touchs._left(object)//往左滑动,

touchs._right(object)//往右滑动

touchs._top(object)//往上滑动

touchs._bottom(object)//往下滑动

说明:object的取值可以是一个id("#id")表达式,或者是一个样式表达式(".class"),或者标签的属性表达式("div[id=id]")等,只要可以用jqurey通过这个表达式获取到dom对象,这个表达式怎么写都可以。

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

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

function showImg(index){

var adWidth = $(".content_right .ad").width()

$(".slider").stop(true,false).animate({left : -adWidth*index},1000)

$(".num li").removeClass("on")

.eq(index).addClass("on")

}

当然你也要调整样式的