前端开发移动端翻页组件

前端快速开发网站
前端开发技术视频网站
网站前端开发合同模板

javascript 代码片段

//@charset “utf-8”;
;(function($) {
    $.fn.touchMove = function() {
        var windowWidth = $(window).width(),
            size = $(this)
                .children()
                .size(),
            startX,
            moveX,
            bj,
            bjz,
            left
        $(this).css(‘width’, windowWidth * size)
        $(this).live(‘touchstart’, function(event) {
            startX = event.targetTouches[0].pageX
        })
        $(this).live(‘touchmove’, function(event) {
            moveX =
                parseFloat($(this).css(‘left’)) +
                event.targetTouches[0].pageX –
                startX
            startX = event.targetTouches[0].pageX
            if (moveX > 0) {
                //边界处理
                moveX = 0
            } else if (moveX < (size – 1) * -windowWidth) {
                moveX = (size – 1) * -windowWidth
            }
            $(this).css(‘left’, moveX)
        })
        $(this).live(‘touchend’, function(event) {
            bj = windowWidth + ($(this).position().left % windowWidth)
            bjz = windowWidth / 2 //滑过1/2翻页
            if (bj <= bjz) {
                left = $(this).position().left – bj
            } else {
                left = $(this).position().left + (windowWidth – bj)
            }
            $(this).animate({ left: left }, 200, function() {
                $(‘.nav’)
                    .children(‘li’)
                    .eq(Math.abs(left / windowWidth))
                    .addClass(‘on’)
                    .siblings()
                    .removeClass(‘on’) //tab切换效果
            })
        })
    }
})($)
$(‘.contentUl’).touchMove()

一个基于zetpo.js的小组件。

调用方法很简单,这是扩展源码的fn,所以和jq里面调用方法是一样的。上面的$(‘.contentUl’)就是要移动的元素,我这里采用的是移动父元素,不是移动子元素。
优化点:
1.边缘不可滑动
2.代码重用性高
3注意我这里因为在一个页面有多个touch事件,所以没有用event.preventDefault(),不知道这样写有没有bug,有的话希望指出;

前端开发有哪些网站可以看
网站前端程序制作开发
web前端是网站开发么
» 本文来自:前端开发者 » 《前端开发移动端翻页组件》
» 本文链接地址:https://www.rokub.com/7460.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!