关于IPHONE上面滑动特效的制作过程

首先IPHONE上面的移动事件，跟我们平时网页开发过程应用的MOVEEVENT是不一样的

他有自己一套游戏规则，他的触发事件有4种

 TOUCHSTART

TOUCHMOVE

TOUCHEND

TOUCHCANCEL

具体可查看此文章： 

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/handlingevents/handlingevents.html

 

 

下面记录一下我的滚屏滑动效果代码

 

//2011-11-23策划说把我这个好东西再拿出来献丑一下

//于是我又改了一点点，适应了IPHONE浏览器和FIREFOX浏览器

 

(function($) {
    $.fn.pandaTouch = function(options) {
        var element = $(this);
        var draging = false;
        var touchPageWrapper = $("#" + element[0].id + "Wrapper");
        var touchPageContent = $("#" + element[0].id + "  ." + element[0].id + "Content");
        var marginleft = 0;
        var touchPageContentWidth = touchPageContent.width();
        var startLeft, endLeft;
        var startX, startY;
        var point = { X: 0, Y: 0 };
        var currentIndex = 0;
        var direction = 0;
        var pageCount = touchPageContent.size();
        var brower = 0; //1iphone,0android
        var touchstart = "mousedown";
        var touchmove = "mousemove";
        var touchend = "mouseup";
        var agent = window.navigator.userAgent.toLowerCase();
        if (agent.indexOf("iphone") >= 0 || agent.indexOf("ipad") >= 0 || agent.indexOf("ipod") >= 0) {
            brower = 1;
            touchstart = "touchstart";
            touchmove = "touchmove";
            touchend = "touchend";
        }
        touchPageWrapper.width((pageCount + 1) * touchPageContentWidth);
        
        alert(brower);
        
        var defaults = {
            align: 'center',
            pager: '#pager',
            showmousePoint: false
        };
        var options = $.extend(defaults, options);
        (function init() {
            startLeft = 0;
            for (var i = 0; i < pageCount; i++) {
                if (i == 0)
                    $(options.pager + ">ul>a").before("<li class='current'>a</li>");
                else
                    $(options.pager + ">ul>a").before("<li >a</li>");
            }
        })();
        clearEvent = function() {
        }
        startDrag = function(event) {
            var offset = $(this).offset();
            startLeft = offset.left;
            if (brower == 1) {
                var ev = event.originalEvent;
                startX = ev.targetTouches[0].pageX;
            }
            else {
                startX = event.pageX;
            }
            $(this)
            .stop(true, false)
            .bind(touchmove, moveDrag)
            .css('cursor', 'move');
            draging = true;
        }
        var moveDrag = function(event) {
            var offset = $(this).offset();
            var movepx = 0;
            if (brower == 1) {
                var ev = event.originalEvent;
                movepx = ev.targetTouches[0].pageX - startX;
            }
            else {
                movepx = event.pageX - startX;
            }
            endLeft = startLeft + movepx;
            direction = 0;
            if (movepx > 0 && movepx >= (touchPageContentWidth / 6))
                direction = 1;
            else if (movepx < 0 && Math.abs(movepx) >= (touchPageContentWidth / 6))
                direction = -1;
            if (options.showmousePoint) $("#mousePoint").text("X=" + point.X + " Y=" + point.Y + " offset.left=" + movepx + " direction=" + direction);
            
            $(this).css("left", endLeft - marginleft);
            return true;
        }
        var endDrag = function(event) {
            if (draging) {
                $(touchPageWrapper)
                    .unbind(touchmove, moveDrag)
                    .css('cursor', 'auto');
                if (direction == 1)
                    currentIndex++
                else if (direction == -1)
                    currentIndex--;
                if (currentIndex == 1 && (direction == 1)) currentIndex = 0;
                if ((Math.abs(currentIndex) + 1) >= pageCount && (direction == -1)) { currentIndex = (-pageCount + 1); }
                $(touchPageWrapper).animate({ left: currentIndex * touchPageContentWidth }, "slow");
                var currentA = $(options.pager + " li");
                $(currentA).attr("class", "");
                //$(currentA).eq(Math.abs(currentIndex)).attr("class", "current");
                direction = 0;
                draging = false;
            }
        }
        return this.each(function() {
            var obj = $(this);

            obj.bind(touchmove, function(e) {
                point.X = e.pageX;
                point.Y = e.pageY;
            }).bind(touchend, endDrag);
            $(touchPageWrapper).bind(touchstart, startDrag)
                .bind("click", clearEvent)
                .bind("mouseup", endDrag).bind(touchend, endDrag);
        });
    };
})(jQuery);

 

 

 

 

 

 前端调用代码：

 

<script type="text/javascript">
    $(function() {
    $('#slidePage').pandaTouch({ align: 'center', pager: '#pager', showmousePoint: false });
    });

</script>






<!--专区触摸划屏-->
<div id="mousePoint"></div>
    <div class="pageWrapper">
        <div id="slidePage" class="clear clearfix">
            <div class="slidePage_left"><a href="">L</a></div>
            <div class="slidePage_right"><a href="">R</a></div>
            <div id="slidePageWrapper" class="clear clearfix">
                <div class="slidePageContent bgcolor0" >
                    <div class="pad-10">
                        <div class="cm_cate clear clearfix">
                            <ul class="cm_catelist clear clearfix">
                                <li><a class="cm_logo" href="../iPhoneCustom/SinaReader/SinaIndex.aspx"><img src="http://res.sj.91.com/mgt/Resources/Panda/Resources/IPhone/images/t_sina_logo40x23.gif" width="64" height="36" /></a><em>新浪专区</em></li>
                                <li><a class="cm_logo" href="../iPhoneCustom/FmxReader/FmxIndex.aspx"><img src="http://res.sj.91.com/mgt/Resources/Panda/Resources/IPhone/images/t_fmx_logo40x23.jpg" width="64" height="36" /></a><em>凤鸣轩专区</em></li>
                                <li><a class="cm_logo" href="../iPhoneCustom/HJSMReader/HJSMIndex.aspx"><img src="http://res.sj.91.com/mgt/Resources/Panda/Resources/IPhone/images/t_hjsm.png" width="64" height="36" /></a><em>幻剑书盟</em></li>
                                <li><a class="cm_logo" href="../iPhoneCustom/XxsyReader/XxsyIndex.aspx"><img src="http://res.sj.91.com/mgt/Resources/Panda/Resources/IPhone/images/t_xxsy.png" width="64" height="36" /></a><em>潇湘书院</em></li>
                            </ul>
                        </div>
                    </div>
                </div>
                            
                <div class="slidePageContent bgcolor1" >
                    <div class="pad-10">
                        <div class="cm_cate clear clearfix">
                            <ul class="cm_catelist clear clearfix">
                                <li><a class="cm_logo" href="../iPhoneCustom/3GReader/3GIndex.aspx"><img src="http://res.sj.91.com/mgt/Resources/Panda/Resources/IPhone/images/topbg_3gsc_detail.gif" width="64" height="36" /></a><em>3G书城</em></li>
                                <li><a class="cm_logo" href="../iPhoneCustom/JjwxReader/JjwxIndex.aspx"><img src="http://res.sj.91.com/mgt/Resources/Panda/Resources/IPhone/images/t_jjwxc.png" width="64" height="36" /></a><em>晋江文学</em></li>
                                <li><a class="cm_logo" href="../iPhoneCustom/MjscReader/MjscIndex.aspx"><img src="http://res.sj.91.com/mgt/Resources/Panda/Resources/IPhone/images/t_mjsc.png" width="64" height="36" /></a><em>满疆书城</em></li>
                                <li><a class="cm_logo" href="../iPhoneCustom/WxhlReader/WxhlIndex.aspx"><img src="http://res.sj.91.com/mgt/Resources/Panda/Resources/IPhone/images/t_wxhl.png" width="64" height="36" /></a><em>万卷书城</em></li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="slidePageContent bgcolor2" >
                    <div class="pad-10">
                        <div class="cm_cate clear clearfix">
                            <ul class="cm_catelist clear clearfix">
                                <li><a class="cm_logo" href="../iPhoneCustom/YiDong/YiDongIndex.aspx"><img src="http://res.sj.91.com/mgt/Resources/Panda/Resources/IPhone/images/t_ydzq.png" width="64" height="36" /></a><em>移动专区</em></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
    </div>
    <div id="pager"><ul><a></a></ul></div>
</div>
<!--专区触摸划屏-->