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

JavaScript032

怎么用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对象,这个表达式怎么写都可以。

调用方法如下:

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

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

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

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

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

设置一个定时器,setInterval(fnSlide,'50'),后面一个参数是控制定时器执行间隔的。你可以定义一个函数 function fnSlide(){},在这个函数里面去去需要滑动的dom元素,每次把它的left 加或着减一个值,用if控制下终点。就可以了。比如是一个id为div1的div元素

var timer=setInterval(fnSlide,'50')//这里对定时器做一个标记

function fnSlide(){

var target=500//这里是定义的滑动终点的left值,假定是500

var oDiv=document.getElementById("div1")

var left=oDiv.offsetLeft

if(left<=target){

left+=5

}

else{

clearinterval(timer)//如果到终点就把定时器关掉

}

oDiv.style.left=left+'px'

}