简易视差滚动备份

Posted 2020-09-02 surfaces
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简易视差滚动备份相关的知识，希望对你有一定的参考价值。
<!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>
以上是关于简易视差滚动备份的主要内容，如果未能解决你的问题，请参考以下文章
简易视差滚动 备份

简易视差滚动备份
