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 视差滚动记录备份的更多相关文章

stellar.js 视差滚动
1.引入包 <script src="js/jquery.min.js"></script> <script src="js/jquery. ...
Sequence.js 实现带有视差滚动特效的图片滑块
Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...
分享七款视差滚动效果的jQuery 插件
视差(Parallax)是指从不同的点看一个物体时形成的视觉差异,这个名词是源自希腊文的παράλλαξις (parallaxis),意思是”改变”.在网页设计中,视差滚动(Parallax Scr ...
16个最棒的jQuery视差滚动效果教程
今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...
视差滚动（Parallax Scrolling）效果的原理与实现
视差滚动(Parallax Scrolling)效果的原理与实现1.视差滚动效果的主要特点: 1)直观的设计,快速的响应速度,更合适运用于单页面 2)差异滚动分层视差页面上很多的 ...
【转】视差滚动(Parallax Scrolling)效果的原理和实现
原文:http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html 视差滚动(Parallax Scrolling)是指让多层背景以不同 ...
iOS开发之视差滚动视图
首先声明一点,由于自己iOS开发经验有限,这里给下面将要实现的效果起名叫视差滚动视图,自己也不知道是否严谨,等以后有经验了,再来更新吧. 一.需求有的时候我们可能会有这样一种需求,在一个UITabl ...
css实现视差滚动效果
今天逛京东金融的时候发现他家网站首页的滚动效果看着很有意思,于是就做了一个,demo链接http://1.liwenyang.applinzi.com/index.html 大多数的视差滚动效果都是使 ...
视差滚动(Parallax Scrolling)插件补充
13. Windows Windows (github) 是一个让你用占据整个屏幕的section来构建单面网站的插件.该插件提供给你一些回调函数,当新的section出现在可视区并且并且处理快照时被 ...

随机推荐

纯c中声明变量
count 声明位置错了,纯c中声明变量全部放在main函数里,最前面的位置,要么vc6.0会报错: 修改 #include <stdio.h> int main(void) { int ...
初识LVS和LVS_NAT
如果一台服务器承受过多的压力,那么服务可能会崩溃,所以,我们应该让一台服务器承受的压力在合理范围内,但是如果服务端必须要承受较大的压力,那么一台服务器可能无法满足我们的要求,所以我们可以使用多台服务器 ...
CAP原理与最终一致性强一致性弱一致性
CAP原理中,有三个要素: 一致性(Consistency) 可用性(Availability) 分区容忍性(Partition tolerance) CAP原理指的是,这三个要素最多只能同时实现两点 ...
4 saltstack ssh
1.salt ssh https://docs.saltstack.com/en/latest/topics/ssh/index.html 免agent的 Salt ssh 串行执行的时候,发送给其 ...
解决SpringBootApplication右键没有启动项的问题
转载于 https://blog.csdn.net/weixin_41876599/article/details/82711302 感觉很有用
附：常见的Jdbc Type 与 Java Type之间的关系
附:常见的Jdbc Type 与 Java Type之间的关系 JDBC Type Java Type CHAR String VARCHAR String LONG ...
Prism框架中View与Region关联的几种方式
Prism.Regions命名空间下有2个重要接口:IRegionManager.IRegion IRegionManager接口中的方法与属性:AddToRegion().RegisterViewW ...
html上标与下标应用
HTML 标签应用示例: <html> <head> <meta http-equiv="Content-Type" content="te ...
bootstrap单选框复选框的使用
<form role="form"> <div class="form-group"> <label class="ch ...
python用BeautifulSoup解析源码时，去除空格及换行符
一.去除空格 strip() " xyz ".strip() # returns "xyz" " xyz ".lstrip() # ...

js 视差滚动 记录备份

js 视差滚动 记录备份的更多相关文章

随机推荐

热门专题

js 视差滚动记录备份

js 视差滚动记录备份的更多相关文章