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(); }());