webapp 开发之iScroll 学习

demo.html

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>Document</title>

    <script src="lib/jquery.js"></script>

    <script src="lib/iScroll.js"></script>

    <script src="js/demo8.js"></script>

    <style>

        /******************reset****************************/

        body{font-family: 'Microsoft Yahei';background: #eee;}

        *{margin:0;padding: 0;}

        h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;font-style: normal;}

        ul li{list-style: none;}

        /*****************common*****************************/

        .mb20{margin-bottom: 20px;}

        .clearfix{*zoom:1;}

        .clearfix:before,

        .clearfix:after{display: table;line-height: 0;content: '';}

        .clearfix:after{clear: both;}

        /******************layout****************************/

        .header{position: absolute;top: 0;height: 30px;line-height: 1.5;text-align: center;width: 100%;background: brown;color: white;}

        .section{position: absolute;top: 30px;bottom: 30px;overflow: auto;width: 100%;}

        .footer{position: absolute;bottom: 0;height: 30px;line-height: 1.5;text-align: center;width: 100%;background: brown;color: white;}

        .app-wrapper{height: 100%;}

        /**

         * 滚动图片

         */

        .prod-scro-list{background: #fff;padding: 10px;}

        .prod-wrapper{width: 300px;background: pink;margin: 0 auto;}

        .prod-wrapper .prod-container{width: 1200px;}

        .prod-wrapper .prod-container ul {}

        .prod-wrapper .prod-container ul li{width: 280px;height: 100px;padding: 10px;float: left;}

        .scro-nav-bar {width: 100px;margin: 0 auto;}

        .scro-nav-bar ul {}

        .scro-nav-bar ul li{float: left;width: 23px;text-align: center;display: block;}

        .scro-nav-bar ul li.active{background: brown;color: white;}

        /**

         * 产品详情介绍

         */

        .prod-detail-intr{background: #fff;}

        .prod-detail-intr article{padding: 20px;}

        /**

         * 产品规格

         */

        .prod-format{background: #fff;padding: 10px;}

        .prod-format-wrapper{overflow: hidden;width: 300px;background: pink;margin: 0 auto;}

        .prod-format-wrapper .prod-format-list{overflow: hidden;width: 900px;}

        .prod-format-wrapper .prod-format-list ul{}

        .prod-format-wrapper .prod-format-list ul li{width: 280px;height: 100px;padding: 10px;float: left;}

        nav.prod-format-nav-bar{}

        nav.prod-format-nav-bar ul {width: 250px;margin: 0 auto;}

        nav.prod-format-nav-bar ul li {float: left;width: 80px;text-align: center;display: block;}

        nav.prod-format-nav-bar ul li.active{background: brown;color: white;}

    </style>

</head>

<body>

    <header class="header"><h1>Header</h1></header>

    <section class="section">

        <div id="app-wrapper" class="app-wrapper">

            <div class="app-container">

                <div class="prod-scro-list mb20">

                    <div id="prod-wrapper" class="prod-wrapper">

                        <div class="prod-container">

                            <ul class="clearfix">

                                <li>this is prod 1 pic</li>

                                <li>this is prod 2 pic</li>

                                <li>this is prod 3 pic</li>

                                <li>this is prod 4 pic</li>

                            </ul>

                        </div>

                    </div>

                    <nav class="scro-nav-bar">

                        <ul class="clearfix">

                            <li class="active">1</li>

                            <li>2</li>

                            <li>3</li>

                            <li>4</li>

                        </ul>

                    </nav>

                </div>

                <div class="prod-detail-intr mb20">

                    <article>

                        <h1>this is prod title</h1>

                        <p>this is introduction paragraph!</p>

                    </article>

                </div>

                <div class="prod-format mb20">

                    <nav class="prod-format-nav-bar">

                        <ul class="clearfix">

                            <li class="active">产品名称</li>

                            <li>产品参数</li>

                            <li>商品价值</li>

                        </ul>

                    </nav>

                    <div id="prod-format-wrapper" class="prod-format-wrapper">

                        <div class="prod-format-list">

                            <ul class="clearfix">

                                <li>this is format 1</li>

                                <li>this is format 2</li>

                                <li>this is format 3</li>

                            </ul>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </section>

    <footer class="footer"><p>Footer</p></footer>

</body>

</html>

demo6.js

;(function () {

    'use strict';

    var ProdDetailApp = function () {

        var sectScrol = null,

            prodScrol = null,

            prodFormScrol = null;

        this.run = function () {

            // console.log('running!');

            $(window).load(function () {

                sectScrol = new iScroll('app-wrapper');

                prodScrol = new iScroll('prod-wrapper', {

                    snap: true,

                    momentum: false,

                    hScrollbar: false,

                    onScrollEnd: function () {

                        document.querySelector('.scro-nav-bar ul li.active').className = '';

                        document.querySelector('.scro-nav-bar ul li:nth-child('+(this.currPageX+1)+')').className='active';

                    }

                });

                prodFormScrol = new iScroll('prod-format-wrapper', {

                    snap: true,

                    momentum: false,

                    hScrollbar: false,

                    onScrollEnd: function () {

                        document.querySelector('.prod-format-nav-bar ul li.active').className = '';

                        document.querySelector('.prod-format-nav-bar ul li:nth-child('+(this.currPageX+1)+')').className='active';

                    }

                });

            });

            $(document).delegate('.prod-format-nav-bar ul li', 'click', navScrolAction);

            function navScrolAction (e) {

                var $this = $(e.target),

                    index = $this.index();

                prodFormScrol.scrollToPage(index, 1);

            }

        }

    }

    var prodDetailApp = new ProdDetailApp();

    prodDetailApp.run();

}());

webapp 开发之iScroll 学习的更多相关文章

IOS开发之XCode学习011：UISwitch控件
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.定义UIswitch控件,添加UIswitc ...
移动开发之h5学习大纲
移动开发学习形式:授课.自学 1.html5 css3 htm5shiv.js response.js 2.流式布局自适应布局盒模型弹性盒模型响应式布局3.iscroll swiper boo ...
iOS开发之git学习
本人是参考廖雪峰的git学习的.他写的非常详细,我在这里就是把我学习中的总结以及碰到的坑写出来. /* 初始化git仓库:git init */ /* 添加文件到git仓库 */ 分两步: 第一步:追 ...
IOS开发之XCode学习012：Slider和ProgressView
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.定义UISlider和UIProgressV ...
IOS开发之XCode学习010：定时器和视图对象
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.通过点击"启动定时器"按钮 ...
IOS开发之XCode学习009：UIViewController使用
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 通过点击屏幕事件,调用ViewController ...
IOS开发之XCode学习008：UIViewController基础
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 红色框选部分用A代替,AppDelegate类在程序框架启动时,如果在i ...
IOS开发之XCode学习007：UIWindow对象
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm #import "AppDelegate.h" @i ...
IOS开发之XCode学习013：步进器和分栏控件
此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.定义UIStepper和UISegmente ...

随机推荐

常见的百度蜘蛛IP
根据不同的IP我们可以分析网站是个怎样的状态, 以下常见的百度蜘蛛IP: 123.125.68.*这个蜘蛛经常来,别的来的少,表示网站可能要进入沙盒了,或被者降权. 220.181.68.*每天这个I ...
Tomcat性能参数设置
Tomcat性能参数设置 Tomcat性能参数设置博客分类: Java LinuxTomcat网络应用多线程Socket 默认参数不适合生产环境使用,因此需要修改一些参数 1.修改启动时内存参数.并 ...
vasprintf的实现
有些系统,例如AIX,没有vasprintf和asprintf ,如果是做porting,有时需要写一个简单的代替. 代码如下: #if !defined(HAVE_VASPRINTF) #if de ...
BZOJ 3223 文艺平衡树 [codevs3303翻转区间]
AC通道:http://www.lydsy.com/JudgeOnline/problem.php?id=3223 通道2:http://codevs.cn/problem/3303/ 题目分析: 我 ...
【BZOJ】【4004】【JLOI2015】装备购买
拟阵/贪心题解戳这里:http://blog.csdn.net/popoqqq/article/details/45148309 思路: 裸拟阵…… 维护线性基,将武器按价格排序,从小到大塞进去,如 ...
【BZOJ】【2038】小Z的袜子
填个坑吧,学习了莫队算法.我也忘记是看的哪位大牛的博客&代码学习的了T_T,如果您发现了的话请私信我,我会注明学自您的代码. 另外感谢@PoPoQQQ大神好,进入正文,莫队算法,也算是一种暴 ...
【bzoj1007】[HNOI2008]水平可见直线
1007: [HNOI2008]水平可见直线 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 5932 Solved: 2254[Submit][Sta ...
【转载】c/c++在windows下获取时间和计算时间差的几种方法总结
一.标准C和C++都可用 1.获取时间用time_t time( time_t * timer ),计算时间差使用double difftime( time_t timer1, time_t time ...
（摘抄）HTTP 协议详解
这个是从网上摘抄下来的,原文链接在最底下,原文写的比较详细,我这里只取了一部分自己想要的什么是HTTP协议协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超 ...
[ActionScript 3] 本地安全沙箱问题最快解决方法
使用FLex4.0时, Chrome等浏览器会报安全水箱问题..... 解决方案: 打开flash全局安全配置面板并在页面中的配置面板中添加可信任的swf文件或者文件夹: 若是记不住全局安全配置 ...

webapp 开发之iScroll 学习

webapp 开发之iScroll 学习的更多相关文章

随机推荐

热门专题