<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>社区</title>
<meta http-equiv="X-UA-Compatible" content="edge,chrome=1" />
<meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 避免转码 -->
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="apple-itunes-app" content="app-id=932758491">
<!-- <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">-->
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no" >
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="screen-orientation" content="portrait"> <!-- uc强制竖屏 设置横屏应用得在config里面设置，网页是无法做到的 -->
<meta name="x5-orientation" content="portrait"> <!-- QQ强制竖屏 -->
<meta name="msapplication-tap-highlight" content="no"> <!-- windows phone 点击无高光 -->
<meta name="HandheldFriendly" content="true"> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="wap-font-scale" content="no" />
</head>
<style>
*{ margin: 0; padding: 0;}
ul,li{ list-style: none;}
/*scene*/
.scenewp { position: relative; overflow: hidden; zoom: 1; }
.scnitem { position: relative; 1200px; height: 990px; margin: 0 auto;; }
.scnitem .img_scn { position: absolute; top: 0; left: 50%; 1920px; margin-left: -960px; overflow: hidden; }
.scnitem .img_scn img { display: block; 100%; -webkit-transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transition:-webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition:-webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition:transform 1s cubic-bezier(0.23, 1, 0.32, 1); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 1s cubic-bezier(0.23, 1, 0.32, 1); }
</style>
<body >
<div class="scenewp">
<div class="scnitem scnitem_1">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_01.jpg" data-original="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_01.jpg" alt="场景一" style="display: block; transform: translateY(-8.24545%);">
</div>
</div>
<div class="scnitem scnitem_2">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_02.jpg?version=20161110" data-original="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_02.jpg?version=20161110" alt="场景二" style="transform: translateY(-1.98922%); display: block;">
</div>
</div>
<div class="scnitem scnitem_3">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_03.jpg" alt="场景三">
</div>
</div>
<div class="scnitem scnitem_0">
<div class="img_scn">
<img src="http://img.vip.kanimg.com/n_vip_7/images-y16/scene/scn_00.jpg" alt="直播">
</div>
</div>
</div>
<script src="http://m.lrlz.com/h5/fcj/js/jquery-2-0-3.js"></script>
<script>
// parallax 视差滚动
function Parallax(opt) {
this.$ele = $(opt.ele);
this.target = opt.target;
this.distance = opt.distance || 9; //可滚动距离百分比 9代码9%
}
Parallax.prototype.scroll = function() {
var that = this;
var _scrolltop = $(document).scrollTop();
for(var i = 0, len = that.$ele.length; i < len; i += 1) {
var $cur = $(that.$ele[i]),
_winheight = $(window).height(),
_pagetop = $cur.offset().top,
_diff = _winheight - (_pagetop - _scrolltop),
_pageheight = $cur.height();
if(_diff >= 0 && _diff < _pageheight) {
var val = _diff / _pageheight * this.distance;
$cur.find(that.target).css({
'-webkit-transform': 'translateY(' + -val + '%)',
'transform': 'translateY(' + -val + '%)'
});
}
}
};
var parallax = new Parallax({
ele: '.scnitem',
target: '.img_scn img',
distance: 9
});
$(window).scroll(function() {
parallax.scroll();
});
//翻页滚动
function Slider(opt) {
this.$ele = $(opt.ele);
this.liminal = opt.liminal || 160; //阈值
this.time = opt.time || 100;
this.isScroll = false;
this.exScrolltop = 0;
}
Slider.prototype.scroll = function() {
var that = this;
var _scrolltop = $(document).scrollTop(),
_pagetop = $(that.$ele[0]).offset().top,
_pageheight = $(that.$ele[0]).height(),
_winheight = $(window).height(),
_diff = _winheight - (_pagetop - _scrolltop);
var index = Math.floor(_diff / _pageheight),
diff = _diff % _pageheight,
forward = false,
liminal = that.liminal;
if(_scrolltop > that.exScrolltop) {
forward = true;
that.exScrolltop = _scrolltop;
}
else {
forward = false;
that.exScrolltop = _scrolltop;
}
if(index == 0) {
liminal = _pageheight / 2;
}
else {
liminal = that.liminal;
}
if(index >= 0 && index < that.$ele.length && !that.isScroll && forward && diff > liminal && diff < _pageheight / 4 * 3) {
that.isScroll = true;
$('html,body').animate(
{scrollTop: $(that.$ele[index]).offset().top + 'px'},
{
duration: that.time,
complete: function() { that.isScroll = false; }
}
);
}
}
// var slider = new Slider({
// ele: '.scnitem',
// liminal: 160,
// time: 800
// })
</script>
</body>
</html>