yohoHomedown.html
9.85 KB
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="yes" name="apple-touch-fullscreen">
<meta content="telephone=no" name="format-detection">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<title>YOHO!</title>
<meta name="keywords" content="yoho潮流志,yoho,有货 ,街拍,搭配,yoho有货,潮牌,潮品,潮人,潮流,潮货,滑板,街拍,街拍,原宿,陈冠希 ,CLOT,VISVIM,藤原浩neighborhood,EVISU,日本,东京,大阪,Bape,李灿森subcrew,牛仔裤,卫衣, outdoor,街头,vintage,流行,明星" />
<meta name="description" content="YOHO.CN潮流分享社区,全球潮流风向标！了解国内外最前沿的潮流资讯,预览当季至IN流行时尚街拍,分享你的购物经验,记录你的潮流生活！" />
<meta name="author" content="yoho.cn">
<link rel="dns-prefetch" href="//cdn.yoho.cn">
<link rel="dns-prefetch" href="//img01.res.yoho.cn">
<link rel="dns-prefetch" href="//img02.res.yoho.cn">
<link rel="stylesheet" href="http://cdn.yoho.cn/yohocn/160315/css/swiper.css">
<link rel="stylesheet" href="http://cdn.yoho.cn/yohocn/160315/css/mobile.css">
<style>
.swiper-yoho{background:url(http://img03.res.yoho.cn/blogimg/2016/07/27/14/012e0b81e91bc6bf405343e1ba6d3e38e6.png) no-repeat}
</style>
<script type="text/javascript">
if (document.documentElement.clientWidth < 640) {
document.getElementsByTagName("html")[0].style.fontSize = document.documentElement.clientWidth / 640 * 40 + 'px';
} else {
document.getElementsByTagName("html")[0].style.fontSize = '40px';
}
function updateOrientation() {
location.reload();
}
function getQueryString() {
var vars = [],
hash,
i;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1);
return hashes;
}
</script></head><body onorientationchange="updateOrientation();" class="disable-default-action"><div class="container">
<div class="banner"></div>
<div class="main">
<div class="slide-box">
<div class="swiper-wrapper clearfix">
<div class="swiper-slide yohobuy" tag="0">
<div class="swiper-yohobuy bg"></div>
<div class="ewm-area">
<img src="http://cdn.yoho.cn/yohocn/160315/images/ewm-yohobuy.png" />
<div class="ewm-info"></div>
</div>
<span class="download-btn">点击下载 · Yoho!Buy有货</span>
</div>
<div class="swiper-slide yohoboy" tag="1">
<div class="swiper-yoho bg"></div>
<div class="ewm-area">
<div class="left ewm-yoho" style="margin-left: 1.135rem; margin-right: 0.665rem;">
<img src="http://img03.res.yoho.cn/blogimg/2016/06/21/18/01bec2ddcbb55247b2ac4869b3e4255286.png" />
<i class="yoho-txt01"></i>
</div>
<div class="left ewm-yoho" style="margin-left: 0.665rem; margin-right: 1.135rem;">
<img src="http://cdn.yoho.cn/yohocn/160315/images/ewm-yoho02.png" />
<i class="yoho-txt02"></i>
</div>
<div class="ewm-info"></div>
</div>
<span class="download-btn">点击下载 · YOHO!</span>
</div>
<div class="swiper-slide yhsj" tag="2">
<div class="swiper-mars bg"></div>
<div class="ewm-area">
<img src="http://cdn.yoho.cn/yohocn/160315/images/ewm-mars.png" />
<div class="ewm-info"></div>
</div>
<span class="download-btn">点击下载 · MARS</span>
</div>
<div class="swiper-slide show" tag="3">
<div class="swiper-show bg"></div>
<div class="ewm-area">
<img src="http://cdn.yoho.cn/yohocn/160315/images/ewm-show.png" />
<div class="ewm-info"></div>
</div>
<span class="download-btn">点击下载 · SHOW</span>
</div>
</div>
</div>
<div class="slide-pagination clearfix">
</div>
</div>
<div class="footer">
CopyRight © 2007-2016 YOHO!新力传媒
</div>
<div class="mask">
<div class="wx-img1"></div>
<div class="wx-img2"></div>
<div class="wx-img3"></div>
</div></div><script src="http://cdn.yoho.cn/yohocn/160315/js/lib/mini.js"></script><script type="text/javascript">
seajs.use(["lib/jquery", "plugin/swiper"], function($, Swiper) {
var slideSwiper = null,
u = navigator.userAgent,
isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1,
isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
isSafari = u.indexOf('Safari') > -1,
// TODO: 修改URL
jumpUrl = [
'http://union.yoho.cn/union/downapp.html?' + getQueryString(),
'http://union.yoho.cn/union/downyohoshow.html?'+getQueryString(),
'http://union.yoho.cn/union/downmars.html?'+ getQueryString(),
'http://union.yoho.cn/union/downshow.html?'+getQueryString(),
];
//初始化swiper插件
function initSwiper(num) {
slideSwiper = new Swiper('.slide-box', {
initialSlide: num,
loop: true,
autoplay: 5000,
autoplayDisableOnInteraction: false,
paginationClickable: true,
slideElement: '.swiper-slide',
pagination: '.main .slide-pagination'
});
}
//判断是不是微信浏览器
function isWeiXin() {
var u = navigator.userAgent,
ua = u.toLowerCase();
if (!!u.match(/AppleWebKit.*Mobile.*/)) {
if (ua.match(/MicroMessenger/i) && ua.match(/MicroMessenger/i)[0] === 'micromessenger') {
return true;
} else {
return false;
}
}
}
//打开对应的下载地址
function loadJump() {
var id = parseInt(location.hash.replace("#",""));
$('.loadding-area').hide();
if (slideSwiper != null) {
slideSwiper.destroy(true,true);
slideSwiper = null;
}
if (id >= 0 && jumpUrl[id] !== undefined) {
initSwiper(id);
window.location.href = jumpUrl[id];
window.location.hash = 'yes';
} else {
initSwiper(0);
}
}
window.onhashchange = function() {
var id = location.hash.replace("#","");
if (id === 'yes') {
return false;
}
if (isiOS && isSafari) {
location.reload();
// loadJump();
} else {
slideSwiper.stopAutoplay();
}
};
$(function() {
$('.loadding-area').hide();
var WeiXin = isWeiXin();
if (isAndroid && WeiXin) {
$('.wx-img2').hide();
$('.wx-img3').show();
}
$('.mask').css({
height: $(document).height()
});
//初始化页面
loadJump();
$(document).on('click', '.download-btn', function(e) {
if (e.target.className === 'download-btn') {
var id = $(this).parent().attr('tag');
slideSwiper.stopAutoplay();
window.location.href = jumpUrl[id];
setTimeout(function() {
slideSwiper.startAutoplay();
}, 3000);
}
});
$('.ewm-yoho img').on('touchstart', function() {
var $ewmArea = $(this).parent(),
index = $ewmArea.index(),
sbImg = $ewmArea.siblings('.ewm-yoho').find('img');
if (WeiXin) {
if (index === 0) {
sbImg.attr('src','http://cdn.yoho.cn/yohocn/160315/images/ewm-yoho02-no.png');//女生
}
if (index === 1) {
sbImg.attr('src','http://img03.res.yoho.cn/blogimg/2016/06/21/18/01db287fedae82aa7f0155727b0b5a0936.png');//男生
}
setTimeout(function() {
if (index === 0) {
sbImg.attr('src','http://cdn.yoho.cn/yohocn/160315/images/ewm-yoho02.png');//女生
}
if (index === 1) {
sbImg.attr('src','http://img03.res.yoho.cn/blogimg/2016/06/21/18/01bec2ddcbb55247b2ac4869b3e4255286.png');//男生
}
},2000);
}
});
$('.ewm-area img').on('touchstart', function() {
slideSwiper.stopAutoplay();
setTimeout(function() {
slideSwiper.startAutoplay();
}, 3000);
});
$('.mask').on('click', function() {
slideSwiper.startAutoplay();
$(this).hide();
});
});
});</script></body></html>