Authored by weiqingting

重构slide切换

... ... @@ -52,12 +52,16 @@
{{> index/girl-recommend}}
{{/ recommend}}
{{! 手风琴}}
{{# accordion}}
{{> index/slide-accordion}}
{{/ accordion}}
{{! 单品/广告}}
{{# singlehot}}
{{> index/girl-singlehot}}
{{/ singlehot}}
{{! 新品上架}}
{{# newArrivls}}
{{> index/commodity}}
... ...
... ... @@ -16,6 +16,11 @@
{{> index/category-floor}}
{{/ category}}
{{! 手风琴}}
{{# accordion}}
{{> index/slide-accordion}}
{{/ accordion}}
{{! 单品/广告}}
{{# singlehot}}
{{> index/girl-singlehot}}
... ...
{{> index/floor-header}}
<div class="slide-accordion">
<div class="slide-list">
<ul>
{{#each slide}}
<li><a title="{{name}}" href="{{href}}"><img class="lazy" data-original="{{img}}"/></a></li>
{{/each}}
</ul>
</div>
</div>
... ...
var Slide = require('./yohoui/YH.slide');
var $ = require('yoho.jquery');
var $contain = $('.slide-list','.slide-accordion');
var $item = $contain.find('li');
var $width = 650;
var slide;
function switchfun(to){
$item.each(function(index){
if(index<=to){
$(this).stop().animate({
"left":index*(120+5)
});
}else{
$(this).stop().animate({
"left":(to)*(120+5)+$width+(120+5)*(index-to-1)
});
}
});
}
switchfun(0);
slide=new Slide({ length: 5, loop: false, auto: false, timeout: 2,index: 3});
slide.on('change', function (data) {
switchfun(data.to);
});
$item.mouseover(function () {
slide.go($(this).index());
});
slide.init();
\ No newline at end of file
... ...
var classtype = {
"[object Array]": "array",
"[object Boolean]": "boolean",
"[object Date]": "date",
"[object Function]": "function",
"[object Number]": "number",
"[object Object]": "object",
"[object RegExp]": "regexp",
"[object String]": "string"
};
var me = {
__Index: 0,
list: new Array(),
get: function(id) {
return id === undefined ? this.list : this.list[id];
},
fn: new Function(),
inherit: function(childClass, parentClass) {
var Constructor = new Function();
Constructor.prototype = parentClass.prototype;
childClass.prototype = new Constructor();
childClass.prototype.constructor = childClass;
childClass.superclass = parentClass.prototype;
if (childClass.prototype.constructor == Object.prototype.constructor) {
childClass.prototype.constructor = parentClass;
}
},
extend: function(obj, newProperties) {
var key;
for (key in newProperties) {
if (newProperties.hasOwnProperty(key)) {
obj[key] = newProperties[key];
}
}
return obj;
},
copy: function(targetClass, obj, newProperties) {
if (typeof obj !== 'object') {
return obj;
}
var value = obj.valueOf();
if (obj != value) {
return new obj.constructor(value);
}
var o;
if (obj instanceof obj.constructor && obj.constructor !== Object) {
if (targetClass) {
o = new targetClass();
} else {
o = me.clone(obj.constructor.prototype);
}
for (var key in obj) {
if (targetClass || obj.hasOwnProperty(key)) {
o[key] = obj[key];
}
}
} else {
o = {};
for (var key in obj) {
o[key] = obj[key];
}
}
if (newProperties) {
for (var key in newProperties) {
o[key] = newProperties[key];
}
}
return o;
},
clone: function(obj) {
me.__cloneFunc.prototype = obj;
return new me.__cloneFunc();
},
__cloneFunc: function() {
},
delegate: function(func, scope) {
scope = scope || window;
if (arguments.length > 2) {
var args = Array.prototype.slice.call(arguments, 2);
return function() {
return func.apply(scope, args);
}
} else {
return function() {
return func.call(scope);
}
}
},
dom: function($select, classCss) {
var wrap = $select;
var name, DOM = {
wrap: $(wrap)
},
els = wrap[0].getElementsByTagName("*"),
elsLen = els.length;
for (var i = 0; i < elsLen; i++) {
name = els[i].className;
if (name.indexOf(classCss) > -1) {
name = name.split(classCss)[1];
}
if (name) {
DOM[name] = $(els[i], wrap)
}
}
return DOM
},
//模板引擎
template: function() {
var args = arguments, result;
if (args.length > 0) {
if (me.isString(args[0])) {
result = args[0];
if (args.length == 2 && me.isObject(args[1])) {
for (var key in args[1]) {
if (args[1][key] != undefined) {
var reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[1][key]);
}
}
} else {
for (var i = 1; i < args.length; i++) {
if (args[i] != undefined) {
var reg = new RegExp("({[" + (i - 1) + "]})", "g");
result = result.replace(reg, args[i]);
}
}
}
}
}
return result;
},
__type: function(obj) {
return obj == null ? String(obj) : classtype[Object.prototype.toString.call(obj)] || "object";
},
isObject: function(obj) {
return this.isFunction(obj) || !!(obj && 'object' === typeof obj);
},
isFunction: function(obj) {
return this.__type(obj) === "function";
},
isArray: Array.isArray || function(obj) {
return this.__type(obj) === "array";
},
isNum: function(obj) {
return !isNaN(parseFloat(obj)) && isFinite(obj);
},
isString: function(obj) {
return this.__type(obj) === "string";
},
each: function(data, callback, args) {
var i, len;
if (me.isArray(data)) {
for (i = 0, len = data.length; i < len; i++) {
if (callback.call(data[i], i, data[i], args) === false) {
break;
}
}
} else {
for (i in data) {
if (callback.call(data[i], i, data[i], args) === false) {
break;
}
}
}
},
funManager: {
__loadList: {},
__loadFun: function(item, callback, win) {
if (item.methord && me.isFunction(item.methord())) {
win = win || window;
item.methord()(item, function() {
callback();
}, win);
}
},
load: function(fns, statechange, win, __index) {
__index = __index || 0;
if (fns[__index]) {
me.funManager.__loadFun(fns[__index], function() {
me.funManager.load(fns, statechange, win, __index + 1);
}, win);
}
statechange(__index, win);
},
get: function(id) {
return this.__loadList[id];
}
},
log: function(msg) {
var console = window.console || { log: function() { } };
console.log(msg);
},
Event: {
mousewheel: function(e) {
var _eoe = e.originalEvent;
var _de = _eoe.detail ? _eoe.detail * -1 : _eoe.wheelDelta / 40;
var _direction = _de < 0 ? -1 : 1;
return {
direction: _direction,
unit: _de
}
},
__: function(_e, el, event, handle) {
for (var key in _e) {
if (win[_e[key].validator]) {
el[_e[key].validator](_e[key].prefix + event, handle, false);
break;
}
}
},
add: function(el, event, handle) {
var _e = [
{ validator: 'addEventListener', prefix: '' },
{ validator: 'attachEvent', prefix: 'on' }
];
this.__(_e, el, event, handle);
},
remove: function(el, event, handle) {
var _e = [
{ validator: 'removeEventListener', prefix: '' },
{ validator: 'detachEvent', prefix: 'on' }
];
this.__(_e, el, event, handle);
}
},
getUid: function(_name) {
return me.template("me-{0}{1}-{2}", _name, new Date().getTime(), me.__Index++)
},
Browser: {
isTouch: function() {
var msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture;
return (("ontouchstart" in window) || msGesture || window.DocumentTouch && document instanceof DocumentTouch) ? true : false;
},
Prefix: function() {
var props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
var obj = document.createElement('div');
for (var i in props) {
if (obj.style[props[i]] !== undefined) {
return me.template("-{0}-", props[i].replace('Perspective', '').toLowerCase());
}
}
},
parseURL: function(url) {
var a = document.createElement('a');
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':', ''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function() {
var ret = {},
seg = a.search.replace(/^\?/, '').split('&'),
len = seg.length, i = 0, s;
for (; i < len; i++) {
if (!seg[i]) { continue; }
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [, ''])[1],
hash: a.hash.replace('#', ''),
path: a.pathname.replace(/^([^\/])/, '/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [, ''])[1],
segments: a.pathname.replace(/^\//, '').split('/')
};
}
},
Array: {
indexOf: function(array, val) {
for (var i = 0; i < array.length; i++) {
if (this[i] == val) return i;
}
return -1;
},
remove: function(array, val) {
var index = this.indexOf(array, val);
if (index > -1) {
array.splice(index, 1);
}
return array;
}
}
}
var assembly = function(options) {
this.initialized = false;
this.registerEvent = {
before: [],
change: [],
after: []
};
this.options = options;
this.init(options);
}
assembly.output = function() {
me.log(me.list);
}
assembly.prototype.oninit = me.fn;
assembly.prototype.init = function(cfg) {
this.initialized = true;
// function _getClassName(_constructor, _constr) {
// var _constr = _constr || "";
// if (_constructor.superclass) {
// var args = /(\w+)\.superclass/.exec(_constructor.arguments.callee);
// if (args != null) {
// _constr += args[1] + "-";
// // return _getClassName(_constructor.superclass.constructor, _constr);
// }
// }
// return _constr;
// }
this.__Uid = me.getUid('me');
this.oninit(cfg);
me.list[this.__Uid] = this;
};
assembly.prototype.destory = function() {
this.initialized = false;
delete me.list[this.__Uid];
};
assembly.prototype.getUid = function() {
return this.__Uid;
}
assembly.prototype.getOptions = function() {
return this.options;
}
assembly.prototype.config = function() {
if (arguments.length > 0) {
if (typeof (arguments[0]) === "string") {
if (arguments.length > 1) {
this.options[arguments[0]] = arguments[1];
} else {
return this.options[name];
}
}
} else {
return this.options;
}
};
assembly.prototype.on = function(name, callback) {
var __self = this;
var _e = __self.registerEvent[name];
if (_e) {
_e.push(callback);
}
return _e;
};
assembly.prototype.off = function(name, callback) {
var __self = this;
var _e = __self.registerEvent[name];
var e = [];
me.each(_e, function(name, _callback) {
if (_callback === callback) {
e.push(name);
}
});
me.each(e.reverse(), function(name, _callback) {
_e.splice(_callback, 1);
});
};
me.assembly = assembly;
module.exports =me;
\ No newline at end of file
... ...
var me = require('./YH.base');
var slide = function (options) {
this.__lastTime = null;
this.__isStop = false;
options = me.extend(this.defaults, options);
slide.superclass.constructor.call(this, options);
}
me.inherit(slide, me.assembly);
slide.prototype.oninit = function () {
var __self = this, _o = __self.options;
if (_o.auto) {
__self.play();
}
__self.go(_o.index);
return this;
}
slide.prototype.go = function (_to, _from) {
var __self = this, _o = __self.options;
if (__self.__lastTime) {
clearTimeout(__self.__lastTime);
__self.__lastTime = null;
}
_from = "undefined" == typeof _from ? _o.index : _from;
var _direction = _to === _from ? 0 : _to > _from ? 1 : -1;
var _loop = _o.loop, _index = _o.length - 1, _originalto = _to;
if (_loop) {
if (_to > _index) {
_to = _to - _index - 1;
} else {
if (0 > _to) {
_to = _to + _index + 1;
} else {
_to = _to;
}
}
} else {
if (_to > _index) {
_to = _index;
} else {
if (0 > _to) {
_to = 0;
} else {
_to = _to;
}
}
}
var _current = _o.index = _to;
var o = {
from: _from,
to: _to,
originalto: _originalto,
direction: _direction
}
for (var key in __self.registerEvent) {
if (__self.registerEvent[key].length > 0) {
for (_e in __self.registerEvent[key]) {
__self.registerEvent[key][_e](o);
}
}
}
if (_current !== _index || _to) {
if (!__self.__isStop && _o.auto) {
__self.play();
}
} else {
if (__self.__lastTime) {
clearTimeout(__self.__lastTime);
}
}
}
slide.prototype.play = function () {
var __self = this, _o = __self.options;
__self.__lastTime = setTimeout(function () {
__self.next();
}, 1000 * _o.timeout);
return this;
}
slide.prototype.next = function () {
var __self = this, _o = __self.options;
var _from = _o.index;
var _to = _from + _o.step;
__self.go(_to, _from);
}
slide.prototype.prev = function () {
var __self = this, _o = __self.options;
var _from = _o.index;
var _to = _from - _o.step;
__self.go(_to, _from);
}
slide.prototype.pause = function () {
var __self = this, _o = __self.options;
if (__self.__lastTime) {
clearTimeout(__self.__lastTime);
}
__self.__isStop = true;
}
slide.prototype.resume = function () {
var __self = this, _o = __self.options;
__self.__isStop = false;
__self.play();
}
slide.prototype.defaults = {
index: 0,
timeout: 5,
step: 1,
per: 1,
auto: false,
loop: false
}
module.exports =slide;
\ No newline at end of file
... ...
... ... @@ -13,6 +13,9 @@ var $ = require('yoho.jquery'),
require('../common/slider');
require('../common/slider2');
require('../common/accordion');
require('../common/new-arrivls')($data.url, {
pageCount: $data.pageCount,
flag: $data.flag
... ...
... ... @@ -82,3 +82,4 @@
width: 100% !important;
}
}
@import "_slide-accordion";
\ No newline at end of file
... ...
... ... @@ -582,7 +582,7 @@
.commodity{
position: relative;
width: 1160px;
width: 1150px;
margin-bottom:80px;
.commodity-list{
margin-left: -10px;
... ... @@ -623,6 +623,7 @@
}
}
.commodity-brands{
margin-left: -8px;
a{
float: left;
margin-left: 8px;
... ...
.slide-accordion{
.slide-list{
width: 1150px;
height: 400px;
overflow: hidden;
position: relative;
}
ul{
position: absolute;
left: -5px;
}
li{
position: absolute;
width: 650px;
height: 400px;
display: block;
border-left: 5px solid #fff;
}
}
... ...
... ... @@ -383,6 +383,19 @@ class GirlsController extends AbstractAction
'recommend'=>$tpldata
),
array(
'accordion'=>array(
'name' => '新品牌入驻 NEW',
'navs' => array(
array(
'id' => '',
'href' => '',
'name' => 'MORE'
)
),
'slide'=>array( $name_href_img,$name_href_img,$name_href_img,$name_href_img,$name_href_img)
)
),
array(
'singlehot'=>array(
'name' => '单品 HOT',
'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),
... ... @@ -439,7 +452,7 @@ class GirlsController extends AbstractAction
);
$result=array(
'code'=>200,
'commodity'=>array($data,$data,$data,$data,$data)
'commodity'=>array($data,$data,$data,$data)
);
} while (false);
... ...
... ... @@ -508,6 +508,19 @@ class LifestyleController extends AbstractAction
)
),
array(
'accordion'=>array(
'name' => '新品牌入驻 NEW',
'navs' => array(
array(
'id' => '',
'href' => '',
'name' => 'MORE'
)
),
'slide'=>array( $name_href_img,$name_href_img,$name_href_img,$name_href_img,$name_href_img)
)
),
array(
'singlehot'=>array(
'name' => '人气单品 TOP100',
'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),
... ...