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. Excel下用SQL语句实现AVEDEV函数功能

    Excel下AVEDEV函数返回一组数据点到其算术平均值的绝对偏差的平均值. AVEDEV 是对一组数据中变化性的度量.最常见的应用就是统计平均分差. 但是如果在Excel中写SQL进行一些复杂的统计 ...

  2. 【Search a 2D Matrix】cpp

    题目: Write an efficient algorithm that searches for a value in an m x n matrix. This matrix has the f ...

  3. 《Soft Skill》一书中的好句子

    The biggest mistake that you can make is to believe that you are working for somebody else. Job secu ...

  4. Oracle Goldengate和Oracle Data Integrator的初步认识

    免责声明:     本文中使用的部分图片来自于网络,如有侵权,请联系博主进行删除 1. Oracle Glodengate是什么? GoldenGate是oracle的一种基于数据库日志的数据同步软件 ...

  5. html公用库

    <script src="http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js" language="javascr ...

  6. 《JavaScript高级程序设计》

    第二章在html中使用Javascript2.1<script>在使用<script>嵌入JS代码时,不要再代码中的任何地方出现"</script>&qu ...

  7. nodejs快速入门

    目录: 编写第一个Node.js程序: 异步式I/O和事件循环: 模块和包: 调试. 1. 编写第一个Node.js程序: Node.js 具有深厚的开源血统,它诞生于托管了许多优秀开源项目的网站—— ...

  8. HDU4831&&4832&&4834

    好久没打代码啦,今天lu一发百度之星,感觉还是学到不少东西的,写点收获. 第一题就是现在的HDU4831啦,题意很清楚,我一开始以为休息区也可以变为风景区,所以就不敢敲了,后来才得知数据里只会改风景区 ...

  9. 屏蔽wordpress升级提示

    根据自己的需要,挑选适合的代码放在主题的functions.php文件中就可以了 /* 去除 WordPress 後台升級提示 */ // 2.8 ~ 2.9: add_filter('pre_tra ...

  10. java系统属性

    java系统属性 1. java.runtime.name:java的运行环境名称. 2. sun.boot.library.path:jdk\jre中的bin的路径 3. java.vm.versi ...