fe / YOHOBUYPC · Commits

Go to a project

Authored by wangqing
Commit 436070c64fe1b8d9d16f9967e3e039c6528e860c 1 parent 4a64283e

修改公共部分的类名

Inline Side-by-side
Showing 6 changed files with 235 additions and 170 deletions
... ... @@ -38,7 +38,7 @@
<link rel="stylesheet" href="http://webstatic.dev.yohobuy.com/css/index.css">
</head>
<body>
'.''.Plugin\LCRun3::debug('[headerdata]', 'sec', $cx, Plugin\LCRun3::debug('[headerdata]', 'v', $cx, $in, array('headerdata')), $in, false, function($cx, $in) {return '<div class="header-page yoho-page">
'.''.Plugin\LCRun3::debug('[headerdata]', 'sec', $cx, Plugin\LCRun3::debug('[headerdata]', 'v', $cx, $in, array('headerdata')), $in, false, function($cx, $in) {return '<div class="yoho-header">
<div class="header-topwrapper clearfix">
<div class="header-top">
<div class="leftpart float-left">
... ... @@ -554,7 +554,7 @@
</div>'.'';}).'';}).'
</div>
'.''.' <div class="footer-page yoho-page">
'.''.' <div class="yoho-footer">
<div class="footertop">
<div class="index-foot">
<dl class="clearfix screen">
... ...
<div class="footer-page yoho-page">
<div class="yoho-footer">
<div class="footertop">
<div class="index-foot">
<dl class="clearfix screen">
... ...
{{#headerdata}}
<div class="header-page yoho-page">
<div class="yoho-header">
<div class="header-topwrapper clearfix">
<div class="header-top">
<div class="leftpart float-left">
... ...
... ... @@ -6,36 +6,39 @@
var $ = require('jquery');
/**
* 获取顶部banner的回调函数
* @param {[type]} data [description]
*/
window.JsonPCallBack = function(data) {
var noticeSuccess = false;
function JsonPCallBack(data) {
var topbanner;
if (+data.code === 200) {
if (typeof data.data === 'object') {
var topbanner = '<a target="_blank" href="' + data.data.url + '" class="page-top-banner" style="height:50px;border:none;background-image:url(' + window.unescape(data.data.src) + ');background-position: center;display:block;background-color:#ff5409;">&nbsp;</a>';
topbanner = '<a target="_blank" href="' + data.data.url + '" class="page-top-banner"' +
'style="height:50px;border:none;background-image:url(' + window.unescape(data.data.src) + ');' +
'background-position: center;display:block;background-color:#ff5409;">&nbsp;</a>';
$('body').prepend(topbanner);
}
}
}
var noticeSuccess = false;
/**
* 获取公告的回调函数
*/
window.NoticeCallBack = function(data) {
function NoticeCallBack(data) {
if (+data.code === 200) {
noticeSuccess = true;
}
}
window.JsonPCallBack = JsonPCallBack;
window.NoticeCallBack = NoticeCallBack;
/**
* 检测是否获得公告
* @return {[type]} [description]
*/
function checkNotice() {
var noticeinner;
if (!noticeSuccess) {
var noticeinner = '<div class="noticewrapper">' +
noticeinner = '<div class="noticewrapper">' +
'<div class="noticecontainer">' +
'<h1 class="noticetitle">关于系统升级的公告</h1>' +
'<div class="noticecontent">' +
... ... @@ -57,9 +60,11 @@ function checkNotice() {
* @return {[type]} [description]
*/
function getBannerData(code) {
var script = document.createElement("script");
script.src = 'http://new.yohobuy.com/resource/getbanner?content_code=' + code + '&client_type=web&callback=JsonPCallBack';
document.getElementsByTagName("head")[0].appendChild(script);
var script = document.createElement('script');
script.src = 'http://new.yohobuy.com/resource/getbanner?content_code=' +
code + '&client_type=web&callback=JsonPCallBack';
document.getElementsByTagName('head')[0].appendChild(script);
}
/**
* 获取公告的jsonp请求
... ... @@ -67,9 +72,11 @@ function getBannerData(code) {
* @return {[type]} [description]
*/
function getNoticeData(code) {
var script = document.createElement("script");
script.src = 'http://new.yohobuy.com/resource/getbanner?content_code=' + code + '&client_type=web&callback=NoticeCallBack';
document.getElementsByTagName("head")[0].appendChild(script);
var script = document.createElement('script');
script.src = 'http://new.yohobuy.com/resource/getbanner?content_code=' +
code + '&client_type=web&callback=NoticeCallBack';
document.getElementsByTagName('head')[0].appendChild(script);
window.setTimeout(checkNotice, 5000); //5s后检测是否成功
}
/**
... ... @@ -79,18 +86,21 @@ function getNoticeData(code) {
* @return {[type]} [description]
*/
function toggleDisplay(sourceClass, targetClass) {
var $that,
targetobj;
$(sourceClass).hover(function(e) {
e.preventDefault();
var that = $(this),
target_obj = $(targetClass)[0];
if (target_obj.style.display === '') {
that.addClass('acttags');
target_obj.style.display = "block";
$that = $(this);
targetobj = $(targetClass)[0];
if (targetobj.style.display === '') {
$that.addClass('acttags');
targetobj.style.display = 'block';
} else {
that.removeClass('acttags');
target_obj.style.display = "";
$that.removeClass('acttags');
targetobj.style.display = '';
}
})
});
}
/**
... ... @@ -99,15 +109,18 @@ function toggleDisplay(sourceClass, targetClass) {
*/
function actionTopTagToggle() {
var tags = [{
sourceClass: '.myyoho',
targetClass: '.myyoho-info'
}, {
sourceClass: '.phone',
targetClass: '.qr'
}];
for (var i = 0; i < tags.length; i++) {
var obj = tags[i];
toggleDisplay(obj.sourceClass, obj.targetClass)
sourceClass: '.myyoho',
targetClass: '.myyoho-info'
}, {
sourceClass: '.phone',
targetClass: '.qr'
}],
obj,
i;
for (i = 0; i < tags.length; i++) {
obj = tags[i];
toggleDisplay(obj.sourceClass, obj.targetClass);
}
}
/**
... ... @@ -115,14 +128,16 @@ function actionTopTagToggle() {
* @return {[type]} [description]
*/
function actionYoHoGroup() {
var $this;
$('.yohogroup').mouseenter(function() {
var $this = $(this);
$this = $(this);
$this.text($this.attr('cn'));
})
});
$('.yohogroup').mouseleave(function() {
var $this = $(this);
$this = $(this);
$this.text($this.attr('en'));
})
});
}
/**
... ... @@ -130,8 +145,11 @@ function actionYoHoGroup() {
* @return {Boolean} [description]
*/
function isSupportCss3Animation() {
var prefixList = ['webkit', 'moz', 'ms'];
for (var i = 0; i < prefixList.length; i++) {
var thisFunc,
prefixList = ['webkit', 'moz', 'ms'],
i;
for (i = 0; i < prefixList.length; i++) {
thisFunc = prefixList[i] + 'RequestAnimationFrame';
if (window[thisFunc]) {
return true;
... ... @@ -141,91 +159,104 @@ function isSupportCss3Animation() {
}
}
/**
* css3动画闭包
* css3动画
* @param {Array} ) { var thisFunc, prefixList [description]
* @return {[type]} [description]
*/
var requestFrame = (function() {
var thisFunc, prefixList = ['webkit', 'moz', 'ms'];
for (var i = 0; i < prefixList.length; i++) {
thisFunc = prefixList[i] + 'RequestAnimationFrame';
if (window[thisFunc]) {
return function(callback) {
window['requestAnimationFrame'](callback);
}
}
function requestFrameCloser() {
var prefixList = ['webkit', 'moz', 'ms'];
var func1 = prefixList[0] + 'RequestAnimationFrame';
var func2 = prefixList[1] + 'RequestAnimationFrame';
var func3 = prefixList[2] + 'RequestAnimationFrame';
if (window[func1]) {
return function(callback) {
window[func1](callback);
};
}
if (window[func2]) {
return function(callback) {
window[func2](callback);
};
}
if (window[func3]) {
return function(callback) {
window[func3](callback);
};
}
return function(callback) {
window.setTimeout(callback, 67);
}
})();
};
}
window.requestFrame = requestFrameCloser();
window.start = 0;
window.$logotrans = $('.icon-logo');
window.isen = true;
var start = 0,
logotrans = $('.icon-logo');
var isen = true;
/**
* css3动画
* @return {[type]} [description]
*/
function tsAnimate() {
start = start + 10;
logotrans.css({
"transform": 'rotateX(' + start + 'deg)',
"-webkit-transform": 'rotateX(' + start + 'deg)',
"-moz-transform": 'rotateX(' + start + 'deg)'
window.start += 10;
window.$logotrans.css({
transform: 'rotateX(' + window.start + 'deg)',
'-webkit-transform': 'rotateX(' + window.start + 'deg)',
'-moz-transform': 'rotateX(' + window.start + 'deg)'
});
if (start / 90 % 2 == 1) { //
if (isen) {
logotrans.css("background-image", 'url(http://static.yohobuy.com/newheader/img/logo1.png)');
isen = false;
if (window.start / 90 % 2 === 1) {
if (window.isen) {
window.$logotrans.css('background-image', 'url(http://static.yohobuy.com/newheader/img/logo1.png)');
window.isen = false;
} else {
logotrans.css("background-image", 'url(http://static.yohobuy.com/newheader/img/logo_e.png)');
isen = true;
window.$logotrans.css('background-image', 'url(http://static.yohobuy.com/newheader/img/logo_e.png)');
window.isen = true;
}
}
if (start / 90 % 2 == 0 && start % 360 !== 0) {
if (window.start / 90 % 2 === 0 && window.start % 360 !== 0) {
window.setTimeout(tsAnimate, 3000);
} else {
if (start % 360 === 0) {
if (window.start % 360 === 0) {
window.setTimeout(tsAnimate, 1 * 60 * 1000);
} else {
requestFrame(function() {
window.requestFrame(function() {
tsAnimate();
})
});
}
}
}
var loopdurationtime = 500;
var globaltimeout;
window.loopdurationtime = 500;
window.globaltimeout;
window.onetimeoout;
/**
* 淡出
* @return {[type]} [description]
*/
function fadeAnimate() {
if (globaltimeout) {
window.clearTimeout(globaltimeout);
if (window.globaltimeout) {
window.clearTimeout(window.globaltimeout);
}
logotrans.fadeOut(loopdurationtime, function() {
isen = false;
logotrans.css("background-image", 'url(http://static.yohobuy.com/newheader/img/logo.png)');
logotrans.fadeIn(loopdurationtime, function() {
var onetimeoout = window.setTimeout(function() {
logotrans.fadeOut(loopdurationtime, function() {
window.clearTimeout(onetimeoout);
isen = true;
logotrans.css("background-image", 'url(http://static.yohobuy.com/newheader/img/logo_e.png)');
logotrans.fadeIn(loopdurationtime, function() {
globaltimeout = window.setTimeout(fadeAnimate, 1 * 60 * 1000);
})
})
}, 3000)
})
})
window.logotrans.fadeOut(window.loopdurationtime, function() {
window.isen = false;
window.logotrans.css('background-image', 'url(http://static.yohobuy.com/newheader/img/logo.png)');
window.logotrans.fadeIn(window.loopdurationtime, function() {
window.onetimeoout = window.setTimeout(function() {
window.logotrans.fadeOut(window.loopdurationtime, function() {
window.clearTimeout(window.onetimeoout);
window.isen = true;
window.logotrans.css('background-image', 'url(http://static.yohobuy.com/newheader/img/logo_e.png)');
window.logotrans.fadeIn(window.loopdurationtime, function() {
window.globaltimeout = window.setTimeout(fadeAnimate, 1 * 60 * 1000);
});
});
}, 3000);
});
});
}
/**
* 执行头部logo动画
... ... @@ -243,57 +274,74 @@ function actionTopLogoAnimate() {
* @return {[type]} [description]
*/
function actionAddKeyWords() {
var keywords = $('#nav_keyword').text();
var $keywords = $('#nav_keyword').text();
var defaultsearch = 'vans';
var $query_key = $('#query_key');
if (keywords !== '') {
$query_key.css({
'color': '#000'
var $querykey = $('#query_key');
if ($keywords !== '') {
$querykey.css({
color: '#000'
});
$query_key.val(keywords);
$querykey.val($keywords);
} else {
$query_key.css({
'color': '#e0e0e0'
$querykey.css({
color: '#e0e0e0'
});
$query_key.val(defaultsearch);
$query_key.on('focus', function(e) {
$query_key.css({
'color': '#000'
$querykey.val(defaultsearch);
$querykey.on('focus', function(e) {
$querykey.css({
color: '#000'
});
$query_key.val('');
})
$querykey.val('');
});
}
}
window.dataLayer = [];
function getSource(column, postition, event) {
try {
window.dataLayer.push({
louceng: column,
weizhi: postition,
event: event
});
} catch (e) {}
}
/**
* 搜寻的时候过滤非法字符（+-/:等非法字符单独出现）
* @type {RegExp}
*/
var reg = /^[\^\!\+\-\(\)\:\[\]\\\{\}\~\*\?\|\&\;\/\s]{0,}$/g;
var keyword = '';
var link = '';
window.reg = /^[\^\!\+\-\(\)\:\[\]\\\{\}\~\*\?\|\&\;\/\s]{0,}$/g;
window.keyword = '';
window.link = '';
window.submitSearch = function() {
var keyword_input = $('#query_key').val().replace("'", "\'");
var $keywordinput = $('#query_key').val();
var column = 'Search';
var postition = 'Head Search';
var event = 'Search';
var $formatkeyword,
$formatkeywordinput;
$formatkeyword = $.trim(window.keyword.toLowerCase());
$formatkeywordinput = $.trim($keywordinput.toLowerCase());
getSource(column, postition, event);
if ((link != '') && (keyword != '') && ($.trim(keyword.toLowerCase()) == $.trim(keyword_input.toLowerCase()))) {
location.href = link.replace("\'", "'");
if (window.link !== '' && window.keyword !== '' && $formatkeyword === $formatkeywordinput) {
location.href = window.link.replace('\'', '');
} else {
if (reg.test(keyword_input)) {
location.href = 'http://search.yohobuy.com/error?query=' + keyword_input + '&result=error';
if (window.reg.test($keywordinput)) {
location.href = 'http://search.yohobuy.com/error?query=' + $keywordinput + '&result=error';
} else {
$('#searchForm').submit();
return false;
}
}
}
};
/**
* banner和地址的映射
* @type {Object}
*/
var bannerMap = {
window.bannerMap = {
listboys: '4f78b0f418fc42314d8b6e791cfb7fa8',
listgirls: '00c1f025a51b6b597dc37925951ea27d',
listkids: 'b02df11184727701ade1b6de9737d08c',
... ... @@ -331,88 +379,112 @@ var bannerMap = {
* cookie集合
* @type {Object}
*/
var cookieMap = {};
window.cookieMap = {};
function exeCookieMap() {
function actionExeCookieMap() {
var cookies = document.cookie;
var cookiearr = cookies.split(';');
for (var i = 0; i < cookiearr.length; i++) {
var temparr = cookiearr[i].split('=');
var key = temparr[0].replace(/\s/g, '');
cookieMap[key] = temparr[1];
var i;
var temparr;
var key;
for (i = 0; i < cookiearr.length; i++) {
temparr = cookiearr[i].split('=');
key = temparr[0].replace(/\s/g, '');
window.cookieMap[key] = temparr[1];
}
}
/**
* 获得banner & 异常通知
* @return {[type]} [description]
*/
function actionGetBannerAndNotice() {
var INDEXKIDS = 'indexkids',
INDEXLIFESTYLE = 'indexlifestyle',
INDEXBOYS = 'indexboys',
INDEXWOMAN = 'indexgirls',
UNIQUEBRAND = 'uniquebrand';
var url = window.location.href;
var host = window.location.host;
var code = '';
var firstarea;
if (url.indexOf('search') !== -1) {
code = bannerMap['search' + cookieMap._Channel];
code = window.bannerMap['search' + window.cookieMap._Channel];
}
if (url.indexOf('list') !== -1) {
code = bannerMap['list' + cookieMap._Channel];
code = window.bannerMap['list' + window.cookieMap._Channel];
}
if (url.indexOf('brands') !== -1) {
code = bannerMap['brands' + cookieMap._Channel];
code = window.bannerMap['brands' + window.cookieMap._Channel];
}
if (url.indexOf('new') !== -1) {
code = bannerMap['new' + cookieMap._Channel];
code = window.bannerMap['new' + window.cookieMap._Channel];
}
if (url.indexOf('sale') !== -1) {
code = bannerMap['sale' + cookieMap._Channel];
code = window.bannerMap['sale' + window.cookieMap._Channel];
}
if (url.indexOf('home') !== -1) {
code = bannerMap['home' + cookieMap._Channel];
code = window.bannerMap['home' + window.cookieMap._Channel];
}
if (url.indexOf('kids') !== -1) {
code = bannerMap['indexkids'];
code = window.bannerMap[INDEXKIDS];
}
if (url.indexOf('woman') !== -1) {
code = bannerMap['indexgirls'];
code = window.bannerMap[INDEXWOMAN];
}
if (url.indexOf('lifestyle') !== -1) {
code = bannerMap['indexlifestyle'];
code = window.bannerMap[INDEXLIFESTYLE];
}
if (url.indexOf('www.yohobuy.com') !== -1 && window.location.pathname === '/') {
code = bannerMap['indexboys'];
code = window.bannerMap[INDEXBOYS];
}
var firstarea = host.split('.')[0];
if (firstarea !== 'list' && firstarea !== 'search' && firstarea !== 'www' && firstarea !== 'new' && firstarea !== 'item' && firstarea !== 'guang') {
code = bannerMap['uniquebrand' + cookieMap._Channel];
firstarea = host.split('.')[0];
if (firstarea !== 'list' && firstarea !== 'search' && firstarea !== 'www' &&
firstarea !== 'new' && firstarea !== 'item' && firstarea !== 'guang') {
code = window.bannerMap[UNIQUEBRAND + window.cookieMap._Channel];
}
getBannerData(code); //获得banner信息
getNoticeData(code); //获得公告信息
}
function brandSwitch(index) {
$('.hot-brands').find('ul').stop().animate({
opacity: 0,
'z-index': 1
}, 200).eq(index).animate({
opacity: 1,
'z-index': 2
}, 200);
}
/**
* 品牌左右切换
* @return {[type]} [description]
*/
function actionBrandChange() {
//品牌栏目切换js
var activeIndex = 0,
swiperLen;
if ($('.hot-brands').size() > 0) {
var activeIndex = 0,
swiperLen = $('.hot-brands').find('ul').size();
swiperLen = $('.hot-brands').find('ul').size();
$('.hot-brands').find('ul').eq(0).css({
'opacity': 1,
opacity: 1,
'z-index': 2
})
});
$('.brands-control').on('click', '.next', function() {
if (activeIndex == swiperLen - 1) {
activeIndex = 0
if (activeIndex === swiperLen - 1) {
activeIndex = 0;
} else {
activeIndex++;
}
brandSwitch(activeIndex);
});
$('.brands-control').on('click', '.prev', function() {
if (activeIndex == 0) {
if (activeIndex === 0) {
activeIndex = swiperLen - 1;
} else {
activeIndex--;
... ... @@ -420,15 +492,7 @@ function actionBrandChange() {
brandSwitch(activeIndex);
});
function brandSwitch(index) {
$('.hot-brands').find('ul').stop().animate({
'opacity': 0,
'z-index': 1
}, 200).eq(index).animate({
'opacity': 1,
'z-index': 2
}, 200);
}
}
}
/**
... ... @@ -436,10 +500,11 @@ function actionBrandChange() {
* @return {[type]} [description]
*/
exports.init = function() {
actionYoHoGroup(); //执行顶部群组鼠标交互
actionTopTagToggle(); //执行顶部显示和隐藏
actionTopLogoAnimate(); //执行头部logo动画
actionGetBannerAndNotice();//获取顶部banner&服务器异常通知
actionBrandChange();//品牌左右切换
actionAddKeyWords(); //查询跳转后保留关键字
}
\ No newline at end of file
actionExeCookieMap();
actionYoHoGroup();
actionTopTagToggle();
actionTopLogoAnimate();
actionGetBannerAndNotice();
actionBrandChange();
actionAddKeyWords();
};
\ No newline at end of file
... ...
... ... @@ -8,7 +8,7 @@
font-weight: normal;
font-style: normal;
}
.footer-page {
.yoho-footer {
font-size: 12px;
/*----文字颜色----*/
.red{
... ... @@ -377,7 +377,7 @@
}
}
@media (max-width:1310px){
.footer-page{
.yoho-footer{
.return-top{
left: 100%;
right: 20px;
... ... @@ -388,7 +388,7 @@
}
@media (min-width:1310px){
.footer-page{
.yoho-footer{
.return-top{
left: 50%;
margin-left: 595px;
... ... @@ -396,7 +396,7 @@
}
}
@media (max-width:1180px){
.footer-page {
.yoho-footer {
.screen{
width: 990px;
margin-left: auto;
... ... @@ -476,7 +476,7 @@
}
}
@media (min-width:1180px){
.footer-page{
.yoho-footer{
.screen{
width: 1150px;
margin-left: auto;
... ...
.header-page {
.yoho-header {
.header-topwrapper {
width: 100%;
background-color: #f4f4f4;
... ...