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. CSS中盒子模型和position（一）

    今天遇到几个css中的重要的知识点,记得这些都是以前看过的:margin.padding.border和position.可是用起来还是有很多的问题,以前自己看过去总是懒得记录,等到用起来了都不知道自 ...

  2. 【转】eclipse技巧1

    俗话说的好啊,“工于利启事,必先善其器”,如果说你的编程功底是一个枪法的话,那么强大的eclipse就是android战士们最好的武器. 这里,我们来总结eclipse的使用技巧,从而使我们的编程达到 ...

  3. PHP字符串处理常用方法

    strlen("字符串");//取字符串的长度 strcmp($a,$b);  //判断两个字符串是否相同,相同返回0,$a>$b返回1,$a<$b返回-1,区分大小写 ...

  4. 剑指offer--3题

    题目:输入一个整形数组,数组里有正数也有负数.数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和.求所有子数组的和的最大值.要求时间复杂度为O(n). 例如输入的数组为1, -2, 3, ...

  5. Leetcode#146 LRU Cache

    原题地址 以前Leetcode的测试数据比较弱,单纯用链表做也能过,现在就不行了,大数据会超时.通常大家都是用map+双向链表做的. 我曾经尝试用C++的list容器来写,后来发现map没法保存lis ...

  6. mysql导出导入某张表

    一般表数据少的话都用图形界面了,看着比较方便. 如果表中数据比较多,用图形界面极容易卡死,这个时候就要用到命令行了. 用命令行导出导入大量数据还是比较快的,方法如下: 导出库db1中的表table1: ...

  7. 研究AFIncrementalStore

    一.增量存贮(AFIncrementalStore:NSIncrementalStore)在CoreData中所处位置

  8. URL编码方法比较

    javascript中存在几种对URL字符串进行编码的方法:escape(),encodeURI(),以及encodeURIComponent().这几种编码所起的作用各不相同. escape() 方 ...

  9. eclipse git 整合

    最近朋友都推荐使用github管理自己的项目,而且免费用户可以有5个仓库,恰好我也想了解下git,借此机会学习一下.github官方指南使用独立第三方git工具来进行版本控制,并不借助于eclipse ...

  10. Python中编码问题？

    一.键盘输入 raw_input('请输入:'.decode('utf-8').encode('gbk'))raw_input(unicode('请输入:','utf-8').encode('gbk' ...