js 视差滚动记录备份

<!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; width: 1200px; height: 990px; margin: 0 auto;; }

.scnitem .img_scn { position: absolute; top: 0; left: 50%; width: 1920px; margin-left: -960px; overflow: hidden; }

.scnitem .img_scn img { display: block; width: 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>
巴特西

js 视差滚动记录备份

最新文章

热门文章

巴特西

js 视差滚动 记录备份

最新文章

热门文章

js 视差滚动记录备份
