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 学习的更多相关文章

  1. IOS开发之XCode学习011：UISwitch控件

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能:  1.定义UIswitch控件,添加UIswitc ...

  2. 移动开发之h5学习大纲

    移动开发学习形式:授课.自学 1.html5 css3 htm5shiv.js response.js 2.流式布局 自适应布局 盒模型 弹性盒模型 响应式布局3.iscroll swiper boo ...

  3. iOS开发之git学习

    本人是参考廖雪峰的git学习的.他写的非常详细,我在这里就是把我学习中的总结以及碰到的坑写出来. /* 初始化git仓库:git init */ /* 添加文件到git仓库 */ 分两步: 第一步:追 ...

  4. IOS开发之XCode学习012：Slider和ProgressView

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能:  1.定义UISlider和UIProgressV ...

  5. IOS开发之XCode学习010：定时器和视图对象

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 1.通过点击"启动定时器"按钮 ...

  6. IOS开发之XCode学习009：UIViewController使用

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能: 通过点击屏幕事件,调用ViewController ...

  7. IOS开发之XCode学习008：UIViewController基础

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 红色框选部分用A代替,AppDelegate类在程序框架启动时,如果在i ...

  8. IOS开发之XCode学习007：UIWindow对象

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm #import "AppDelegate.h" @i ...

  9. IOS开发之XCode学习013：步进器和分栏控件

    此文学习来源为:http://study.163.com/course/introduction/1002858003.htm 此工程文件实现功能:  1.定义UIStepper和UISegmente ...

随机推荐

  1. SQL Server 执行计划中的扫描方式举例说明

    SQL Server 执行计划中的扫描方式举例说明 原文地址:http://www.cnblogs.com/zihunqingxin/p/3201155.html 1.执行计划使用方式 选中需要执行的 ...

  2. 设计模式之中介者模式(Mediator)

    中间者模者模式原理:中介者维持所有要交互对象的指针或者对象,所有对象维持一个中介者的指针或者对象. #include <iostream> #include <string> ...

  3. jQuery(Keep for myself)

    jQuery API : http://www.w3cschool.cc/manual/jquery/ 1. jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的 ...

  4. 社区O2O，才是未来10年移动互联网最赚钱的项目

    原文:http://blog.sina.com.cn/s/blog_70e76a920102uyoi.html 8月12日  上海  晴 从深圳回来后,一直和郭老师探讨一个问题:新媒体营销未来最大的市 ...

  5. 负MARGIN之讲解

    css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果.很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的. ...

  6. Xamarin 中开发Android实现全屏或者不显示标题栏的方法-宋兴柱

    using System; using Android.App; using Android.Content; using Android.Runtime; using Android.Views; ...

  7. Apache CXF实现Web Service（1）——不借助重量级Web容器和Spring实现一个纯的JAX-WS web service

    废话少说,先在Eclipse中新建一个Java Project (可以不是WTP的Dynamic Web Project) 选择Java Project 再看pom.xml 我们使用cxf 3.1.4 ...

  8. BZOJ1191: [HNOI2006]超级英雄Hero

    这题标解是改一下匈牙利算法,显然,像我这种从不用匈牙利的人,会找个办法用网络流… 具体做法是这样,二分最后的答案ans,然后对前ans个问题建图跑网络流,看最大流能不能到ans. /********* ...

  9. this的使用、继承、super

    1.this的使用 1)可以用于区分局部变量 Person(int age,string name) { this.age=age; this.name=name; } 2)构造方法中,用this调用 ...

  10. 【译】C++工程师需要掌握的10个C++11特性

    原文标题:Ten C++11 Features Every C++ Developer Should Use 原文作者:Marius Bancila 原文地址:codeproject 备注:非直译,带 ...