jquery 触屏手机滑动滚屏例子源码

基本信息

源码名称：jquery 触屏手机滑动滚屏例子源码

源码大小：0.04M

文件格式：.zip

开发语言：js

更新时间：2015-07-16

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　

源码介绍

请在手机模式下使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" />
<title>jQuery触摸手机全屏上下滑动滚屏特效</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript">
    $(document).ready(
        function() {
            var nowpage = 0;
            //给最大的盒子增加事件监听
            $(".container").swipe(
                {
                    swipe:function(event, direction, distance, duration, fingerCount) {
                         if(direction == "up"){
                            nowpage = nowpage   1;
                         }else if(direction == "down"){
                            nowpage = nowpage - 1;
                         }

                         if(nowpage > 4){
                            nowpage = 4;
                         }

                         if(nowpage < 0){
                            nowpage = 0;
                         }

                        $(".container").animate({"top":nowpage * -100   "%"},400);

                        $(".page").eq(nowpage).addClass("cur").siblings().removeClass("cur");
                    }
                }
            );
        }
    );
</script>
</head>
<body onmousewheel="return false;">
<h1 class="keTitle">jQuery触摸手机全屏上下滑动滚屏特效</h1>
<!--效果html开始-->
<div class="container">
  <div class="page page0 cur">
<h1>你好，我是0号屏幕，第一屏,鼠标单击向下拖动</h1>
</div>
  <div class="page page1">
<h1>你好，我是1号屏幕，鼠标单击向下/向上拖动</h1>
</div>
  <div class="page page2">
<h1>你好，我是2号屏幕，鼠标单击向下/向上拖动</h1>
</div>
  <div class="page page3">
<h1>你好，我是3号屏幕，鼠标单击向下/向上拖动</h1>
</div>
  <div class="page page4">
<h1>你好，我是4号屏幕，到底了，鼠标单击向上拖动</h1>
</div>
</div>
<!--效果html结束-->

</body>
</html>