Authored by weiqingting

重构slide切换

@@ -52,12 +52,16 @@ @@ -52,12 +52,16 @@
52 {{> index/girl-recommend}} 52 {{> index/girl-recommend}}
53 {{/ recommend}} 53 {{/ recommend}}
54 54
  55 + {{! 手风琴}}
  56 + {{# accordion}}
  57 + {{> index/slide-accordion}}
  58 + {{/ accordion}}
  59 +
55 {{! 单品/广告}} 60 {{! 单品/广告}}
56 {{# singlehot}} 61 {{# singlehot}}
57 {{> index/girl-singlehot}} 62 {{> index/girl-singlehot}}
58 {{/ singlehot}} 63 {{/ singlehot}}
59 64
60 -  
61 {{! 新品上架}} 65 {{! 新品上架}}
62 {{# newArrivls}} 66 {{# newArrivls}}
63 {{> index/commodity}} 67 {{> index/commodity}}
@@ -16,6 +16,11 @@ @@ -16,6 +16,11 @@
16 {{> index/category-floor}} 16 {{> index/category-floor}}
17 {{/ category}} 17 {{/ category}}
18 18
  19 + {{! 手风琴}}
  20 + {{# accordion}}
  21 + {{> index/slide-accordion}}
  22 + {{/ accordion}}
  23 +
19 {{! 单品/广告}} 24 {{! 单品/广告}}
20 {{# singlehot}} 25 {{# singlehot}}
21 {{> index/girl-singlehot}} 26 {{> index/girl-singlehot}}
  1 +{{> index/floor-header}}
  2 +<div class="slide-accordion">
  3 + <div class="slide-list">
  4 + <ul>
  5 + {{#each slide}}
  6 + <li><a title="{{name}}" href="{{href}}"><img class="lazy" data-original="{{img}}"/></a></li>
  7 + {{/each}}
  8 + </ul>
  9 + </div>
  10 +</div>
  11 +
  1 +var Slide = require('./yohoui/YH.slide');
  2 +var $ = require('yoho.jquery');
  3 +
  4 +var $contain = $('.slide-list','.slide-accordion');
  5 +var $item = $contain.find('li');
  6 +
  7 +var $width = 650;
  8 +var slide;
  9 +
  10 +function switchfun(to){
  11 + $item.each(function(index){
  12 +
  13 + if(index<=to){
  14 + $(this).stop().animate({
  15 + "left":index*(120+5)
  16 + });
  17 + }else{
  18 + $(this).stop().animate({
  19 + "left":(to)*(120+5)+$width+(120+5)*(index-to-1)
  20 + });
  21 + }
  22 + });
  23 +}
  24 +
  25 +switchfun(0);
  26 +
  27 +slide=new Slide({ length: 5, loop: false, auto: false, timeout: 2,index: 3});
  28 +
  29 +slide.on('change', function (data) {
  30 + switchfun(data.to);
  31 +});
  32 +
  33 +$item.mouseover(function () {
  34 + slide.go($(this).index());
  35 +});
  36 +
  37 +slide.init();
  1 +var classtype = {
  2 + "[object Array]": "array",
  3 + "[object Boolean]": "boolean",
  4 + "[object Date]": "date",
  5 + "[object Function]": "function",
  6 + "[object Number]": "number",
  7 + "[object Object]": "object",
  8 + "[object RegExp]": "regexp",
  9 + "[object String]": "string"
  10 + };
  11 +var me = {
  12 + __Index: 0,
  13 + list: new Array(),
  14 + get: function(id) {
  15 + return id === undefined ? this.list : this.list[id];
  16 + },
  17 + fn: new Function(),
  18 + inherit: function(childClass, parentClass) {
  19 +
  20 + var Constructor = new Function();
  21 + Constructor.prototype = parentClass.prototype;
  22 +
  23 + childClass.prototype = new Constructor();
  24 + childClass.prototype.constructor = childClass;
  25 + childClass.superclass = parentClass.prototype;
  26 +
  27 + if (childClass.prototype.constructor == Object.prototype.constructor) {
  28 + childClass.prototype.constructor = parentClass;
  29 + }
  30 + },
  31 + extend: function(obj, newProperties) {
  32 + var key;
  33 +
  34 + for (key in newProperties) {
  35 +
  36 + if (newProperties.hasOwnProperty(key)) {
  37 + obj[key] = newProperties[key];
  38 + }
  39 + }
  40 + return obj;
  41 + },
  42 + copy: function(targetClass, obj, newProperties) {
  43 +
  44 + if (typeof obj !== 'object') {
  45 + return obj;
  46 + }
  47 + var value = obj.valueOf();
  48 +
  49 + if (obj != value) {
  50 + return new obj.constructor(value);
  51 + }
  52 +
  53 + var o;
  54 +
  55 + if (obj instanceof obj.constructor && obj.constructor !== Object) {
  56 + if (targetClass) {
  57 + o = new targetClass();
  58 + } else {
  59 + o = me.clone(obj.constructor.prototype);
  60 + }
  61 +
  62 + for (var key in obj) {
  63 + if (targetClass || obj.hasOwnProperty(key)) {
  64 + o[key] = obj[key];
  65 + }
  66 + }
  67 + } else {
  68 + o = {};
  69 + for (var key in obj) {
  70 + o[key] = obj[key];
  71 + }
  72 + }
  73 +
  74 + if (newProperties) {
  75 + for (var key in newProperties) {
  76 + o[key] = newProperties[key];
  77 + }
  78 + }
  79 +
  80 + return o;
  81 + },
  82 + clone: function(obj) {
  83 + me.__cloneFunc.prototype = obj;
  84 + return new me.__cloneFunc();
  85 + },
  86 + __cloneFunc: function() {
  87 + },
  88 + delegate: function(func, scope) {
  89 + scope = scope || window;
  90 +
  91 + if (arguments.length > 2) {
  92 + var args = Array.prototype.slice.call(arguments, 2);
  93 + return function() {
  94 + return func.apply(scope, args);
  95 + }
  96 + } else {
  97 + return function() {
  98 + return func.call(scope);
  99 + }
  100 + }
  101 + },
  102 + dom: function($select, classCss) {
  103 + var wrap = $select;
  104 + var name, DOM = {
  105 + wrap: $(wrap)
  106 + },
  107 + els = wrap[0].getElementsByTagName("*"),
  108 + elsLen = els.length;
  109 +
  110 + for (var i = 0; i < elsLen; i++) {
  111 + name = els[i].className;
  112 + if (name.indexOf(classCss) > -1) {
  113 + name = name.split(classCss)[1];
  114 + }
  115 + if (name) {
  116 + DOM[name] = $(els[i], wrap)
  117 + }
  118 + }
  119 + return DOM
  120 + },
  121 + //模板引擎
  122 + template: function() {
  123 + var args = arguments, result;
  124 +
  125 + if (args.length > 0) {
  126 +
  127 + if (me.isString(args[0])) {
  128 + result = args[0];
  129 +
  130 + if (args.length == 2 && me.isObject(args[1])) {
  131 +
  132 + for (var key in args[1]) {
  133 +
  134 + if (args[1][key] != undefined) {
  135 + var reg = new RegExp("({" + key + "})", "g");
  136 + result = result.replace(reg, args[1][key]);
  137 + }
  138 + }
  139 + } else {
  140 +
  141 + for (var i = 1; i < args.length; i++) {
  142 +
  143 + if (args[i] != undefined) {
  144 + var reg = new RegExp("({[" + (i - 1) + "]})", "g");
  145 + result = result.replace(reg, args[i]);
  146 + }
  147 + }
  148 + }
  149 + }
  150 + }
  151 + return result;
  152 + },
  153 + __type: function(obj) {
  154 + return obj == null ? String(obj) : classtype[Object.prototype.toString.call(obj)] || "object";
  155 + },
  156 + isObject: function(obj) {
  157 + return this.isFunction(obj) || !!(obj && 'object' === typeof obj);
  158 + },
  159 + isFunction: function(obj) {
  160 + return this.__type(obj) === "function";
  161 + },
  162 + isArray: Array.isArray || function(obj) {
  163 + return this.__type(obj) === "array";
  164 + },
  165 + isNum: function(obj) {
  166 + return !isNaN(parseFloat(obj)) && isFinite(obj);
  167 + },
  168 + isString: function(obj) {
  169 + return this.__type(obj) === "string";
  170 + },
  171 + each: function(data, callback, args) {
  172 + var i, len;
  173 +
  174 + if (me.isArray(data)) {
  175 +
  176 + for (i = 0, len = data.length; i < len; i++) {
  177 +
  178 + if (callback.call(data[i], i, data[i], args) === false) {
  179 + break;
  180 + }
  181 + }
  182 + } else {
  183 +
  184 + for (i in data) {
  185 +
  186 + if (callback.call(data[i], i, data[i], args) === false) {
  187 + break;
  188 + }
  189 + }
  190 + }
  191 + },
  192 + funManager: {
  193 + __loadList: {},
  194 + __loadFun: function(item, callback, win) {
  195 +
  196 + if (item.methord && me.isFunction(item.methord())) {
  197 + win = win || window;
  198 + item.methord()(item, function() {
  199 + callback();
  200 + }, win);
  201 + }
  202 + },
  203 + load: function(fns, statechange, win, __index) {
  204 + __index = __index || 0;
  205 +
  206 + if (fns[__index]) {
  207 + me.funManager.__loadFun(fns[__index], function() {
  208 + me.funManager.load(fns, statechange, win, __index + 1);
  209 + }, win);
  210 + }
  211 + statechange(__index, win);
  212 + },
  213 + get: function(id) {
  214 + return this.__loadList[id];
  215 + }
  216 + },
  217 + log: function(msg) {
  218 + var console = window.console || { log: function() { } };
  219 + console.log(msg);
  220 + },
  221 + Event: {
  222 + mousewheel: function(e) {
  223 + var _eoe = e.originalEvent;
  224 + var _de = _eoe.detail ? _eoe.detail * -1 : _eoe.wheelDelta / 40;
  225 + var _direction = _de < 0 ? -1 : 1;
  226 + return {
  227 + direction: _direction,
  228 + unit: _de
  229 + }
  230 + },
  231 + __: function(_e, el, event, handle) {
  232 +
  233 + for (var key in _e) {
  234 +
  235 + if (win[_e[key].validator]) {
  236 + el[_e[key].validator](_e[key].prefix + event, handle, false);
  237 + break;
  238 + }
  239 + }
  240 + },
  241 + add: function(el, event, handle) {
  242 + var _e = [
  243 + { validator: 'addEventListener', prefix: '' },
  244 + { validator: 'attachEvent', prefix: 'on' }
  245 + ];
  246 + this.__(_e, el, event, handle);
  247 + },
  248 + remove: function(el, event, handle) {
  249 + var _e = [
  250 + { validator: 'removeEventListener', prefix: '' },
  251 + { validator: 'detachEvent', prefix: 'on' }
  252 + ];
  253 + this.__(_e, el, event, handle);
  254 + }
  255 + },
  256 + getUid: function(_name) {
  257 + return me.template("me-{0}{1}-{2}", _name, new Date().getTime(), me.__Index++)
  258 + },
  259 + Browser: {
  260 + isTouch: function() {
  261 + var msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture;
  262 + return (("ontouchstart" in window) || msGesture || window.DocumentTouch && document instanceof DocumentTouch) ? true : false;
  263 + },
  264 + Prefix: function() {
  265 + var props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
  266 + var obj = document.createElement('div');
  267 +
  268 + for (var i in props) {
  269 +
  270 + if (obj.style[props[i]] !== undefined) {
  271 + return me.template("-{0}-", props[i].replace('Perspective', '').toLowerCase());
  272 + }
  273 + }
  274 + },
  275 + parseURL: function(url) {
  276 + var a = document.createElement('a');
  277 + a.href = url;
  278 + return {
  279 + source: url,
  280 + protocol: a.protocol.replace(':', ''),
  281 + host: a.hostname,
  282 + port: a.port,
  283 + query: a.search,
  284 + params: (function() {
  285 + var ret = {},
  286 + seg = a.search.replace(/^\?/, '').split('&'),
  287 + len = seg.length, i = 0, s;
  288 + for (; i < len; i++) {
  289 + if (!seg[i]) { continue; }
  290 + s = seg[i].split('=');
  291 + ret[s[0]] = s[1];
  292 + }
  293 + return ret;
  294 + })(),
  295 + file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
  296 + hash: a.hash.replace('#', ''),
  297 + path: a.pathname.replace(/^([^\/])/, '/$1'),
  298 + relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
  299 + segments: a.pathname.replace(/^\//, '').split('/')
  300 + };
  301 + }
  302 + },
  303 + Array: {
  304 + indexOf: function(array, val) {
  305 +
  306 + for (var i = 0; i < array.length; i++) {
  307 + if (this[i] == val) return i;
  308 + }
  309 + return -1;
  310 + },
  311 + remove: function(array, val) {
  312 + var index = this.indexOf(array, val);
  313 +
  314 + if (index > -1) {
  315 + array.splice(index, 1);
  316 + }
  317 + return array;
  318 + }
  319 + }
  320 +}
  321 +var assembly = function(options) {
  322 + this.initialized = false;
  323 + this.registerEvent = {
  324 + before: [],
  325 + change: [],
  326 + after: []
  327 + };
  328 + this.options = options;
  329 +
  330 + this.init(options);
  331 +}
  332 +assembly.output = function() {
  333 + me.log(me.list);
  334 +}
  335 +assembly.prototype.oninit = me.fn;
  336 +assembly.prototype.init = function(cfg) {
  337 + this.initialized = true;
  338 +
  339 + // function _getClassName(_constructor, _constr) {
  340 + // var _constr = _constr || "";
  341 + // if (_constructor.superclass) {
  342 + // var args = /(\w+)\.superclass/.exec(_constructor.arguments.callee);
  343 + // if (args != null) {
  344 + // _constr += args[1] + "-";
  345 + // // return _getClassName(_constructor.superclass.constructor, _constr);
  346 + // }
  347 + // }
  348 + // return _constr;
  349 + // }
  350 + this.__Uid = me.getUid('me');
  351 + this.oninit(cfg);
  352 + me.list[this.__Uid] = this;
  353 +};
  354 +assembly.prototype.destory = function() {
  355 + this.initialized = false;
  356 + delete me.list[this.__Uid];
  357 +};
  358 +assembly.prototype.getUid = function() {
  359 + return this.__Uid;
  360 +}
  361 +assembly.prototype.getOptions = function() {
  362 + return this.options;
  363 +}
  364 +assembly.prototype.config = function() {
  365 +
  366 + if (arguments.length > 0) {
  367 +
  368 + if (typeof (arguments[0]) === "string") {
  369 +
  370 + if (arguments.length > 1) {
  371 + this.options[arguments[0]] = arguments[1];
  372 + } else {
  373 + return this.options[name];
  374 + }
  375 + }
  376 + } else {
  377 + return this.options;
  378 + }
  379 +};
  380 +assembly.prototype.on = function(name, callback) {
  381 + var __self = this;
  382 + var _e = __self.registerEvent[name];
  383 +
  384 + if (_e) {
  385 + _e.push(callback);
  386 + }
  387 + return _e;
  388 +};
  389 +assembly.prototype.off = function(name, callback) {
  390 + var __self = this;
  391 + var _e = __self.registerEvent[name];
  392 + var e = [];
  393 + me.each(_e, function(name, _callback) {
  394 +
  395 + if (_callback === callback) {
  396 + e.push(name);
  397 + }
  398 + });
  399 + me.each(e.reverse(), function(name, _callback) {
  400 + _e.splice(_callback, 1);
  401 + });
  402 +};
  403 +me.assembly = assembly;
  404 +
  405 +module.exports =me;
  1 +var me = require('./YH.base');
  2 +
  3 +var slide = function (options) {
  4 + this.__lastTime = null;
  5 + this.__isStop = false;
  6 + options = me.extend(this.defaults, options);
  7 + slide.superclass.constructor.call(this, options);
  8 +}
  9 +
  10 +me.inherit(slide, me.assembly);
  11 +
  12 +slide.prototype.oninit = function () {
  13 + var __self = this, _o = __self.options;
  14 + if (_o.auto) {
  15 + __self.play();
  16 + }
  17 + __self.go(_o.index);
  18 + return this;
  19 +}
  20 +
  21 +slide.prototype.go = function (_to, _from) {
  22 + var __self = this, _o = __self.options;
  23 + if (__self.__lastTime) {
  24 + clearTimeout(__self.__lastTime);
  25 + __self.__lastTime = null;
  26 + }
  27 + _from = "undefined" == typeof _from ? _o.index : _from;
  28 + var _direction = _to === _from ? 0 : _to > _from ? 1 : -1;
  29 + var _loop = _o.loop, _index = _o.length - 1, _originalto = _to;
  30 + if (_loop) {
  31 + if (_to > _index) {
  32 + _to = _to - _index - 1;
  33 + } else {
  34 + if (0 > _to) {
  35 + _to = _to + _index + 1;
  36 + } else {
  37 + _to = _to;
  38 + }
  39 + }
  40 + } else {
  41 + if (_to > _index) {
  42 + _to = _index;
  43 + } else {
  44 + if (0 > _to) {
  45 + _to = 0;
  46 + } else {
  47 + _to = _to;
  48 + }
  49 + }
  50 + }
  51 + var _current = _o.index = _to;
  52 +
  53 + var o = {
  54 + from: _from,
  55 + to: _to,
  56 + originalto: _originalto,
  57 + direction: _direction
  58 + }
  59 + for (var key in __self.registerEvent) {
  60 + if (__self.registerEvent[key].length > 0) {
  61 + for (_e in __self.registerEvent[key]) {
  62 + __self.registerEvent[key][_e](o);
  63 + }
  64 + }
  65 + }
  66 +
  67 + if (_current !== _index || _to) {
  68 + if (!__self.__isStop && _o.auto) {
  69 + __self.play();
  70 + }
  71 + } else {
  72 + if (__self.__lastTime) {
  73 + clearTimeout(__self.__lastTime);
  74 + }
  75 + }
  76 +}
  77 +
  78 +slide.prototype.play = function () {
  79 + var __self = this, _o = __self.options;
  80 + __self.__lastTime = setTimeout(function () {
  81 + __self.next();
  82 + }, 1000 * _o.timeout);
  83 + return this;
  84 +}
  85 +
  86 +slide.prototype.next = function () {
  87 + var __self = this, _o = __self.options;
  88 + var _from = _o.index;
  89 + var _to = _from + _o.step;
  90 + __self.go(_to, _from);
  91 +}
  92 +
  93 +slide.prototype.prev = function () {
  94 + var __self = this, _o = __self.options;
  95 + var _from = _o.index;
  96 + var _to = _from - _o.step;
  97 + __self.go(_to, _from);
  98 +}
  99 +
  100 +slide.prototype.pause = function () {
  101 + var __self = this, _o = __self.options;
  102 + if (__self.__lastTime) {
  103 + clearTimeout(__self.__lastTime);
  104 + }
  105 + __self.__isStop = true;
  106 +}
  107 +
  108 +slide.prototype.resume = function () {
  109 + var __self = this, _o = __self.options;
  110 + __self.__isStop = false;
  111 + __self.play();
  112 +}
  113 +
  114 +slide.prototype.defaults = {
  115 + index: 0,
  116 + timeout: 5,
  117 + step: 1,
  118 + per: 1,
  119 + auto: false,
  120 + loop: false
  121 +}
  122 +
  123 +module.exports =slide;
@@ -13,6 +13,9 @@ var $ = require('yoho.jquery'), @@ -13,6 +13,9 @@ var $ = require('yoho.jquery'),
13 require('../common/slider'); 13 require('../common/slider');
14 require('../common/slider2'); 14 require('../common/slider2');
15 15
  16 +require('../common/accordion');
  17 +
  18 +
16 require('../common/new-arrivls')($data.url, { 19 require('../common/new-arrivls')($data.url, {
17 pageCount: $data.pageCount, 20 pageCount: $data.pageCount,
18 flag: $data.flag 21 flag: $data.flag
@@ -82,3 +82,4 @@ @@ -82,3 +82,4 @@
82 width: 100% !important; 82 width: 100% !important;
83 } 83 }
84 } 84 }
  85 +@import "_slide-accordion";
@@ -582,7 +582,7 @@ @@ -582,7 +582,7 @@
582 582
583 .commodity{ 583 .commodity{
584 position: relative; 584 position: relative;
585 - width: 1160px; 585 + width: 1150px;
586 margin-bottom:80px; 586 margin-bottom:80px;
587 .commodity-list{ 587 .commodity-list{
588 margin-left: -10px; 588 margin-left: -10px;
@@ -623,6 +623,7 @@ @@ -623,6 +623,7 @@
623 } 623 }
624 } 624 }
625 .commodity-brands{ 625 .commodity-brands{
  626 + margin-left: -8px;
626 a{ 627 a{
627 float: left; 628 float: left;
628 margin-left: 8px; 629 margin-left: 8px;
  1 +.slide-accordion{
  2 + .slide-list{
  3 + width: 1150px;
  4 + height: 400px;
  5 + overflow: hidden;
  6 + position: relative;
  7 + }
  8 + ul{
  9 + position: absolute;
  10 + left: -5px;
  11 + }
  12 + li{
  13 + position: absolute;
  14 + width: 650px;
  15 + height: 400px;
  16 + display: block;
  17 + border-left: 5px solid #fff;
  18 + }
  19 +}
  20 +
@@ -382,6 +382,19 @@ class GirlsController extends AbstractAction @@ -382,6 +382,19 @@ class GirlsController extends AbstractAction
382 array( 382 array(
383 'recommend'=>$tpldata 383 'recommend'=>$tpldata
384 ), 384 ),
  385 + array(
  386 + 'accordion'=>array(
  387 + 'name' => '新品牌入驻 NEW',
  388 + 'navs' => array(
  389 + array(
  390 + 'id' => '',
  391 + 'href' => '',
  392 + 'name' => 'MORE'
  393 + )
  394 + ),
  395 + 'slide'=>array( $name_href_img,$name_href_img,$name_href_img,$name_href_img,$name_href_img)
  396 + )
  397 + ),
385 array( 398 array(
386 'singlehot'=>array( 399 'singlehot'=>array(
387 'name' => '单品 HOT', 400 'name' => '单品 HOT',
@@ -439,7 +452,7 @@ class GirlsController extends AbstractAction @@ -439,7 +452,7 @@ class GirlsController extends AbstractAction
439 ); 452 );
440 $result=array( 453 $result=array(
441 'code'=>200, 454 'code'=>200,
442 - 'commodity'=>array($data,$data,$data,$data,$data) 455 + 'commodity'=>array($data,$data,$data,$data)
443 ); 456 );
444 } while (false); 457 } while (false);
445 458
@@ -508,6 +508,19 @@ class LifestyleController extends AbstractAction @@ -508,6 +508,19 @@ class LifestyleController extends AbstractAction
508 ) 508 )
509 ), 509 ),
510 array( 510 array(
  511 + 'accordion'=>array(
  512 + 'name' => '新品牌入驻 NEW',
  513 + 'navs' => array(
  514 + array(
  515 + 'id' => '',
  516 + 'href' => '',
  517 + 'name' => 'MORE'
  518 + )
  519 + ),
  520 + 'slide'=>array( $name_href_img,$name_href_img,$name_href_img,$name_href_img,$name_href_img)
  521 + )
  522 + ),
  523 + array(
511 'singlehot'=>array( 524 'singlehot'=>array(
512 'name' => '人气单品 TOP100', 525 'name' => '人气单品 TOP100',
513 'imgHot' => array( $name_href_name_price_tip,$name_href_name_price_tip,$name_href_name_price_tip,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price), 526 'imgHot' => array( $name_href_name_price_tip,$name_href_name_price_tip,$name_href_name_price_tip,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price,$name_href_img_price),